Don’t get left behind! Sign up to the WebDevEducation newsletter for free tutorials, coupon codes, and more! 🎉

    @tailwindcss/forms tutorial: effortlessly style your forms

    When building web applications, the styling of forms often proves to be a challenge. With the vast range of input types and variations, creating a consistent look can be tedious. Thankfully, the creators of TailwindCSS introduced @tailwindcss/forms – a plugin specifically designed to give a head-start in form styling. In this @tailwindcss/forms tutorial, we will delve into how to use this tool to make your forms look neat and consistent across various platforms.

    Setting up @tailwindcss/forms

    Before using the plugin, you’ll need to have both TailwindCSS and @tailwindcss/forms installed in your project.

    npm install tailwindcss @tailwindcss/forms

    Next, integrate the plugin into your TailwindCSS configuration.

    module.exports = {
      plugins: [

    Basic usage

    Once the setup is done, your form elements automatically inherit the default styles provided by the plugin. Here’s an example:

      <label for="email">Email</label>
      <input type="email" id="email" name="email">
      <label for="password">Password</label>
      <input type="password" id="password" name="password">
      <button type="submit">Login</button>

    When rendered, this form will showcase enhanced styles for the input fields and the button, providing a cohesive and pleasant look.

    Customizing styles

    The true power of @tailwindcss/forms lies in its seamless integration with TailwindCSS’s utility classes. You can customize form elements just like you would with any other HTML element using Tailwind.

    For example, if you want to give your input fields rounded corners and a shadow:

    <input type="email" id="email" name="email" class="rounded-md shadow-sm">

    Working with variants

    The plugin works hand-in-hand with Tailwind’s variants. This means that you can use features like hover, focus, and active to style form elements for different states.

    <input type="email" id="email" name="email" class="focus:border-blue-500 focus:ring focus:ring-blue-200">

    Styling other form elements with @tailwindcss/forms

    The @tailwindcss/forms plugin also offers support for other form elements like select, textarea, and checkbox.

    <!-- Dropdown -->
    <select class="mt-1 block w-full py-2 px-3 border rounded-md">
        <option>Option 1</option>
        <option>Option 2</option>
    <!-- Textarea -->
    <textarea class="mt-1 block w-full rounded-md border-gray-300"></textarea>
    <!-- Checkbox -->
        <input type="checkbox" id="check" name="check" class="rounded">
        <label for="check">Check me out</label>

    Resetting styles

    There may be instances when you’d like to remove the default styles applied by the plugin. In such cases, you can use the unstyled class.

    <input type="text" class="unstyled">

    Start using @tailwindcss/forms today!

    The @tailwindcss/forms plugin makes form styling a breeze. This tutorial merely touches the surface of what you can achieve. Remember, the synergy between TailwindCSS and @tailwindcss/forms offers a vast array of possibilities, so don’t hesitate to experiment and find the perfect look for your forms. Whether you’re a seasoned developer or just diving into the world of web design, this tool is a must-have in your toolkit.

    Tailwind CSS zero to hero course

    Want to go from zero to hero with Tailwind? Take the Tailwind CSS Zero to Hero course!