I am developing a basic react application with the help of Tailwind css.
Scenario 1: Functioning correctly without tailwind:
https://codesandbox.io/s/bold-agnesi-y70ue
In this example, the tailwind library is not utilized. The simple react app displays the fieldset and legend in the desired format with a surrounding border.
Scenario 2: Not working as expected with tailwind:
Similar to the previous scenario, I aim to replicate the same UI using Tailwind CSS.
The attempted solution can be found below,
https://codesandbox.io/s/tailwind-css-and-react-forked-tkolh
Issue: Unlike the first link (without Tailwind css), the border does not appear around the fieldset when utilizing the second link (with Tailwind css). However, the form fields and legend text are displayed.
Sample code:
<form>
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" />
<br />
<br />
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" />
<br />
<br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br />
<br />
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday" />
<br />
<br />
<input type="submit" value="Submit" />
</fieldset>
</form>Requirement: The goal is to make the fieldset behave exactly like it does in link 1 once Tailwind css is integrated. The reason why this functionality is not achieved with Tailwind css added to the project remains unclear. Assistance in reaching the desired outcome would be greatly appreciated.