Creating the Form Structure
Start by setting up a basic form layout with proper spacing and alignment. Tailwind utilities help you quickly structure clean and readable forms.
Example:
<form class=”max-w-md mx-auto p-6 bg-white shadow rounded”>
<h2 class=”text-xl font-semibold mb-4″>Contact Form</h2>
</form>
Styling Input Fields
Use Tailwind classes to style input fields with borders, padding, and rounded corners for a modern look.
Example:
<input
type=”text”
placeholder=”Your Name”
class=”w-full border border-gray-300 p-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-400″
/>
Adding Labels & Accessibility
Always include labels for better accessibility and user experience. Tailwind helps you style them neatly.
Example:
<label class=”block mb-1 text-sm font-medium”>Email</label>
<input
type=”email”
class=”w-full border p-2 rounded”
/>
Designing Buttons & Actions
Add submit buttons and style them with colors, hover effects, and spacing to make the form interactive.
Example:
<button class=“w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600”>
Submit
</button>
Creating Responsive Form Layout
Use grid or flex utilities to make your form responsive across devices.
Example:
<div class=”grid grid-cols-1 md:grid-cols-2 gap-4″>
<input class=”border p-2 rounded” placeholder=”First Name” />
<input class=”border p-2 rounded” placeholder=”Last Name” />
</div>
