Tailwind CSS Tutorial for Beginners

How Tailwind CSS works

Tailwind is a utility-first CSS workflow where you add simple, utility CSS classes to your HTML to bring your designs to life.

Unlike other CSS frameworks, Tailwind’s classes aren’t tied to a particular HTML structure. They are more like shorthand class names which act as a design-API.

“Isn’t my HTML going to be bloated with CSS classses?”

Tailwind allows you to combine utility classes inside your Tailwind CSS file using the @apply command.

Take this example of using utility classes to style a button:

<a href="/" class="text-lg bg-green-700 text-white px-2 py-4 inline-block lg:px-4 lg:py-8 lg:text-xl">Click Me</a>

If we are going to reuse these utility classes for all our buttons as a default style, we can pull them out of our HTML and into our base tailwind.css file, like this:

@tailwind base;

@tailwind components;

.btn {
   @apply text-lg bg-green-700 text-white px-2 py-4 inline-block lg:px-4 lg:py-8 lg:text-xl;
}

@tailwind utilities;

Now our HTML becomes this:

<a href="/" class="btn">Click Me</a>

Since Tailwind CSS takes advantage of PostCSS (a Node.js-based way to process CSS files), you can also hook into Autoprefixer and PurgeCSS as part of your workflow, resulting in CSS that is cross-browser compliant and only includes the CSS classes you are actually using in your HTML templates.

How to install Tailwind CSS

If you haven’t already, you will need to install NodeJS on your computer.
Initialize npm in your project by running the terminal command npm init -y. This will create a package.json folder and allow you to install the necessary packages.
Install the packages by running the terminal command npm i postcss postcss-cli tailwindcss autoprefixer @fullhuman/postcss-purgecss This installs PostCSS, the PostCSS CLI (for running the build script) and the 3 main plugins for PostCSS, which are TailwindCSS, AutoPrefixer and PurgeCSS.
Run the terminal command npx tailwind init. This generates a tailwind.config.js file, which is optional, but allows you to override or extend basic settings within Tailwind such as fonts, colors, spacing etc.
Create a postcss.config.js file and add the following code:

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
        require('@fullhuman/postcss-purgecss')({
            content: [
                '**/*.html' // whatever your template language
            ],
            defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
        })
    ]
}

(Note: Your content and defaultExtractor settings for PurgeCSS will likely differ. In the above example, I am parsing through Twig templates for a WordPress Theme project.)

Create a tailwind.css file and add the following code:

@tailwind base;

@tailwind components;

@tailwind utilities;

Add a build script to your package.json file:

"scripts": {
    "build": "postcss tailwind.css -o style.css"
  }

(Note: you may need to change the reference paths to your tailwind.css and style.css files to match your own project file structure.)

Build your CSS file by running the terminal command npm run build

You should now have a compiled CSS file, which only contains Tailwind’s base settings (just Normalize.css), along with whatever utility classes you are using in your templates.

While in development, you can omit using PurgeCSS in your build process and just add every Tailwind Utility class to your CSS file.

This will result in an enormous CSS file, however, if you are working locally, it should load fast and allows you to have access to all of Tailwind’s CSS without having to constantly run a build script.

How to customize Tailwind CSS

Tailwind can be customized through the tailwind.config.js file. Here is an example from the Tailwind CSS website:

module.exports = {
  important: true,
  theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      margin: {
        '96': '24rem',
        '128': '32rem',
      },
    }
  },
  variants: {
    opacity: ['responsive', 'hover']
  }
}

You can either override a default Tailwind value, or extend one of the existing values.

As you can see, they have overridden Tailwind’s default display and body font settings, and extended the color and margin settings by adding their own values.

When to use Tailwind CSS

If you find it difficult to maintain CSS classes and naming conventions, and are looking for a way to have your CSS adhere to design standards (styleguides) like fonts, colors, and spacing rhythms, you might want to give Tailwind a try.

However, Tailwind does rely on NodeJS for compiling. If you are unable to utilize NodeJS, you really can’t take advantage of the Tailwind CSS workflow and build process.

You can use Tailwind CSS through a CDN as a single compiled CSS file, however, it’s going to be a huge file! (around 2MB) So, if you are in a hurry to try it out this might be fine in development, but it’s far too large for a production website.

Is Tailwind CSS worth it?

Yes. I have found it does 3 things quite well:

creates very small CSS files by utilizing PurgeCSS
a more streamlined workflow by just adding classes to HTML
flexible enough to adhere to any design
eliminates the worry of CSS naming conflicts and CSS refactoring

However, because the Tailwind workflow it relies on NodeJS and a number of packages, I have run into bugs and build issues. I wrote about one of those issues.

Is Tailwind CSS free?

Yes. Tailwind is a free, open-source project.

Tailwind UI, however, is a paid product created by the Tailwind CSS team and is a pre-made set of UI components built on the Tailwind CSS process.