Maximize your Laravel blog's potential with SEO best practices and reach 10K monthly clicks on Google.
Preview the course for free
Benjamin Crozat New!
Benjamin Crozat The art of crafting web applications

Tailwind CSS forms plugin: a step-by-step build guide

Benjamin Crozat — Updated on
Artboard

Hundreds of developers subscribed to my newsletter.
Join them and enjoy free content about the art of crafting websites!

Powered by

Tailwind CSS is an utility-first CSS framework for productive front-end developers.

If you never heard about it, let me introduce you to the marvelous world of pragmatic CSS frameworks.

Table of contents

Tailwind CSS forms plugin: a step-by-step build guide

What is @tailwindcss/forms?

@tailwindcss/forms is an officially provided plugin that resets forms to a consistent state across all browsers and makes them easily stylable.

Installation

The plugin can be installed with this simple NPM command:

npm install @tailwindcss/forms

Or with Yarn:

yarn add @tailwindcss/forms

Then, import the plugin in your tailwind.config.js file:

// tailwind.config.js
module.exports = {
plugins: [
require('@tailwindcss/forms'),
],
}

Usage

First, I recommend you try the live demo.

Once the forms plugin is ready, all your forms will have basic styling with accessibility in mind.

Here are all the supported form elements:

As mentioned in the README on the official GitHub repository, you must at least use type="text" (or any of the types mentioned above for the styles to take effect.

This is a necessary trade-off to avoid relying on the overly greedy input selector and unintentionally styling elements we don’t have solutions for yet, like input[type="range"], for example.

From now on, you will be able to style select elements:

<select class="px-4 py-3 rounded-full shadow">
</select>

And even change a checkbox color using text color utilities:

<input type="checkbox" class="rounded text-green-400" />

Use classes instead of global styles

In some cases, you may want to be less hardcore. I’m thinking about existing projects, for instance.

Therefore, instead of applying global styles, you could use the classes provided by the plugin.

Base Class
[type='text'] form-input
[type='email'] form-input
[type='url'] form-input
[type='password'] form-input
[type='number'] form-input
[type='date'] form-input
[type='datetime-local'] form-input
[type='month'] form-input
[type='search'] form-input
[type='tel'] form-input
[type='time'] form-input
[type='week'] form-input
textarea form-textarea
select form-select
select[multiple] form-multiselect
[type='checkbox'] form-checkbox
[type='radio'] form-radio

And to make sure the plugin does not apply the global styles, you can pass parameters when initializing it:

// tailwind.config.js
module.exports = {
plugins: [
require('@tailwindcss/forms')({
// strategy: 'base',
strategy: 'class',
}),
],
}

Build a beautiful newsletter form

This blog’s user interface has been built with Tailwind CSS, and I make use of the forms plugin.

You may have noticed the form to subscribe to the newsletter on the home page.

A newsletter form make with Tailwind CSS and its forms plugin.

Why don’t we recreate it?

Let’s take a look at the few easy steps (live demo on Tailwind Play).

Let’s start with the input field:

<input
type="email"
placeholder="homer@simpson.com"
class="w-full rounded-md border-0 px-4 py-3 placeholder-gray-300 shadow"
/>
  1. w-full, to make sure the input takes the full width.
  2. rounded-md, to make the border rounded.
  3. border-0, because the Tailwind CSS forms plugin applies a border by default.
  4. px-4 py-3, which are padding values (padding: .75rem 1rem) that look right for my form.
  5. placeholder-gray-300, because the default placeholder text color doesn’t look right.
  6. And finally, shadow, which applies a small box-shadow that makes it look extremely cool.

Then, the button:

<button
class="mt-2 w-full rounded-md bg-gradient-to-r from-purple-300
to-purple-400 px-4 py-3 font-semibold text-white shadow-lg"
>
Subscribe
</button>
  1. mt-2, because we need a bit of spacing.
  2. bg-gradient-to-r from-purple-300 to-purple-400, for a beautiful purple gradient that starts from the left and goes to the right.
  3. font-semibold for a slightly bolded text.
  4. text-white, which is also self-explanatory.
  5. shadow-lg, for a large shadow that makes the button more clickable.
Recommended

This is the most comprehensive tutorial about Tailwind CSS. Learn how to make front-end development great again.

Take your code to the next level, thanks to exceptions. Handle errors in a more graceful way within try and catch blocks.

Learning a framework can be overwhelming, but time and execution will make you a master. Here are some best practices to help you toward your goal.

Knowing which Laravel version you are running is important before you start writing code on a new project. There are multiple ways to do so.

I show you how to upgrade your Laravel 9 project to version 10 and help you decide whether the return on investment is worth it.

I show you how to upgrade your Laravel 8 project to version 9 and help you decide whether the return on investment is worth it.

Nailing a Laravel job interview can be a daunting task, but with the right preparation and mindset, you can set yourself up for success.

Here's a case study for my blog in the programming niche, where I share everything I did to increase clicks by a huge amount since the beginning.

Smaller and even easier than Vue.js, setting up Alpine.js is as easy as copying and pasting a code snippet.

Laravel 10 has been released on February 14, 2023. Let's dive into every relevant new feature and change.

Powered by