Tailwind CSS Form Components

Let’s explore utility classes for working with forms and inputs in Tailwind CSS. Here are some examples of how you can style forms and inputs using Tailwind CSS utility classes.

Form Layout

Tailwind CSS provides utility classes for creating form layouts easily. You can use flexbox utilities to align form elements horizontally or vertically.

<form class="flex flex-col">
    <!-- Vertical form layout -->
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" class="border p-2 mb-4">

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" class="border p-2 mb-4">

    <button type="submit" class="bg-blue-500 text-white font-bold py-2 px-4 rounded">Submit</button>
</form>

Input Styles

You can style inputs using utility classes like border, p, rounded, etc. You can also use focus and hover states to add interactivity.

<input type="text" class="border border-gray-300 p-2 rounded focus:outline-none focus:ring focus:border-blue-500">

Checkboxes and Radio Buttons

Tailwind CSS provides styles for checkboxes and radio buttons as well.

<label class="inline-flex items-center">
    <input type="checkbox" class="form-checkbox text-blue-500">
    <span class="ml-2">Remember me</span>
</label>

<label class="inline-flex items-center">
    <input type="radio" class="form-radio text-blue-500" name="radio">
    <span class="ml-2">Option 1</span>
</label>
<label class="inline-flex items-center">
    <input type="radio" class="form-radio text-blue-500" name="radio">
    <span class="ml-2">Option 2</span>
</label>

Select Menus

You can style select menus using Tailwind CSS classes.

<select class="border p-2 rounded">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

Validation States

You can use utility classes to style form elements based on their validation states.

<input type="text" class="border p-2 rounded focus:outline-none focus:ring focus:border-blue-500">
<span class="text-red-500">Invalid input</span>

Tailwind classes used in Image components

<div class="container mx-auto py-6">
    <!-- Responsive Image -->
    <img src="https://source.unsplash.com/random/800x600" alt="Random Image" class="w-full">

    <!-- Image with Specific Size -->
    <img src="https://source.unsplash.com/random/400x300" alt="Random Image" class="w-64 h-48">

    <!-- Rounded Corners -->
    <img src="https://source.unsplash.com/random/800x600" alt="Random Image" class="rounded-lg">

    <!-- Image with Shadow -->
    <img src="https://source.unsplash.com/random/800x600" alt="Random Image" class="shadow-md">

    <!-- Image with Aspect Ratio -->
    <div class="aspect-w-16 aspect-h-9">
        <img src="https://source.unsplash.com/random/800x600" alt="Random Image" class="object-cover">
    </div>
</div>