If you’ve been staying in the loop with the latest CSS frameworks, you’ve probably already heard of the newest kid on the block: Tailwind CSS. According to its documentation, “Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.”
In practice, this means using a variety of classes that closely map to underlying CSS properties. For example, applying a class like .text-center to an element means that we’re setting its text-align property to center. Simple enough, right?
Using utility classes like this allows us to spend more time iterating through designs and avoiding premature abstraction of our CSS. Then, once we’re happy with our designs, Tailwind makes it easy to extract our utilities into component classes.
Now, I’m sure you know that even mentioning a utility framework is an open invitation for a certain amount of brouhaha. Before we start yelling at me on Twitter or the comments for even mentioning a utility framework, let’s just take a moment to remember that Tailwind is just one possible tool for us to use.
If you don’t want to add it to your toolbox, then no worries—you do you! But, if you’re interested in at least understanding this new tool, let’s take a look at building a sign-up form together.
Without further ado, let’s set up a fresh project with Tailwind, code out some HTML, and style it up.
The Set Up
Let’s start by creating a directory for us to work from. Using your terminal, navigate to the directory you’d like to create your project and run mkdir
Since we want to see everything that Tailwind can do, let’s install it with npm or Yarn using the following.
# Using npm
npm install tailwindcss –save-dev
# Using Yarn
yarn add tailwindcss –dev
With Tailwind installed, we can now generate the configuration file by running ./node_modules/.bin/tailwind init. This generates a tailwind.js file for us in the root of our project. In this file, we can adjust Tailwind’s default settings to our project’s needs. For this project, we shouldn’t have to change a thing.
Now, let’s create a CSS file where we can manage our own CSS and inject the Tailwind styles. To do that we can run touch styles.css from our project directory.
Inside of this new file, we can use Tailwind’s @tailwind directive to inject the preflight and utilities styles into our CSS. preflight contains all of the base styles and some browser style normalizations, while utilities adds all of the utility classes we specified in our config file. So, our styles.css file should look something like this:
/* Here we can add any custom overrides */
/* Here we can add our own utilities or custom CSS */
If you’re using PHPStorm and you’re annoyed by the red squiggles in your CSS file for @tailwind, just add /*noinspection CssInvalidAtRule*/ above where you use it.
With that all set up, we can run ./node_modules/.bin/tailwind build styles.css -o main.css to generate the CSS file we’d like to use in our project. This may seem a bit tedious, but don’t worry! Tailwind works with proper build tools like Webpack, Gulp, or Laravel Mix, so in a larger project you can just set it and forget it.
That’ll take care of our Tailwind set up! Now, we can start coding our HTML.
Before we can style our sign-up form, we need to build it! To start, we’ll need a simple index.html file. So, from your root directory, you can run touch index.html to create the file. Then, we can add the following snippet to get us started.
As you can see, it’s your typical HTML page. The only wrinkle here is that we’re importing our main.css file and we’ve given our page a descriptive title. Now, let’s start building our sign-up form!
To start, let’s add two nested
We’ll use the outer