How to style Forms in Tailwind CSS? | Tailwind CSS Interview Questions

What You'll Learn

Basic form styling
Form states
Forms plugin

Basic Input Styling

index.htmlHTML

<input
  type="text"
  class="w-full px-4 py-2 border border-gray-300 rounded-lg
         focus:outline-none focus:ring-2 focus:ring-blue-500
         focus:border-transparent"
/>

Form States

index.htmlHTML

<input
  class="border-gray-300
         focus:border-blue-500 focus:ring-blue-500
         invalid:border-red-500 invalid:focus:ring-red-500
         disabled:bg-gray-100 disabled:cursor-not-allowed"
/>

Select Input

index.htmlHTML

<select class="w-full px-4 py-2 border rounded-lg bg-white
               focus:outline-none focus:ring-2 focus:ring-blue-500">
  <option>Option 1</option>
</select>

Checkbox/Radio

index.htmlHTML

<input type="checkbox"
       class="w-4 h-4 rounded border-gray-300
              text-blue-600 focus:ring-blue-500" />

<input type="radio"
       class="w-4 h-4 border-gray-300
              text-blue-600 focus:ring-blue-500" />

@tailwindcss/forms Plugin

$ terminalBash

npm install @tailwindcss/forms

code.jsJavaScript

// tailwind.config.js
plugins: [require('@tailwindcss/forms')]

index.htmlHTML

<!-- Now forms have sensible defaults -->
<input type="text" class="rounded-md" />