How to use Tailwind CSS?

Posted 3 years ago

There are multiple ways of using Tailwind CSS for your project, such as including the main Tailwind CSS file via CDN and then start building the elements using the default utility classes, or a much more recommended method, which would be to include Tailwind CSS via a package manager, then choosing a preferred building tool technology and then use the Tailwind Configuration file to easily change parameters and even add extra utility classes.

In this guide, we will cover both methods and show you a few examples of how you can get started using the most popular utility-first CSS framework.

Using Tailwind CSS via CDN

Although not the recommended method and you will lose a lot of the advantages of Tailwind CSS if you include it via CDN, it can be a great way to quickly test out the classes and get a good understanding of the utility-first methodology, before you dive into the more advanced building tools and configurations.

Include the following stylesheet inside the <head> tag of your HTML template to pull in the compiled Tailwind CSS file:

    
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

After that, you can start playing around with the default utility classes from Tailwind CSS. Add the following HTML markup to your template using the utility classes:

    
<button class="bg-teal-500 hover:bg-teal-600 focus:outline-none focus:shadow-outline py-2 px-3 text-white rounded-sm">
    Sign Up
</button>

Let’s break down the meaning of each of the classes:

bg-teal-500 - adds a teal color for the background of the button
hover:bg-teal-600 - makes the background color of the button slightly darker when being hovered on
focus:outline-none - disables the default browser outline styling when the button is being focused
focus:shadow-outline - adds a shadow outline to the button when being focused
py-2 - adds padding to the Y-axis (top and bottom)
px-3 - adds padding to the X-axis (left and right)
text-white - makes the text inside the button white
rounded-sm - adds a small border-radius to the button

You may now ask, why so many classes and hustle for a button? Wouldn’t it be better to just have one class, such as .btn, and have the classes added inside the CSS files? Yes, and no.

If you would only have a couple of types of a button throughout your project, it’s absolutely fine to just have a single class for the button, and then maybe a few more for changing the colors or sizing.

However, if your project is quite large and more diverse, you may have many situations when there would need to be a slight change to a button, such as slightly larger or smaller, or a color that is only used in one or two places.

In these cases, using the utility-first method is hugely advantageous, because you don’t need to create an extra class in your CSS file for a single button.

For the example above, you could use py-3 or px-4 to make the button larger, you wouldn’t need to create another class to make a larger type of button. Put it simply: it’s just faster to develop this way.

I recommend you check out the documentation of these utility classes on the official website and play around with them in your HTML template.

Using Tailwind CSS via a Package Manager

It is generally recommended to use a package manager for any project for easier maintainability of dependencies and libraries. The most popular front-end package manager is NPM so we recommend using it to pull it in. Make sure you have Node and NPM installed on your machine before continuing.

If you don’t have a package.json file, make sure to run the following command in your terminal to initiate a config file:

    
npm init

You’ll be prompted to add a few pieces of information about the project, such as the title, author, version, and so on. For testing purposes, you can just “enter your way through”.

Secondly, run the following command to install Tailwind CSS locally:

    
npm install tailwindcss

Add Tailwind to your CSS

Create a local main.css file and use @tailwind to inject Tailwind’s base, component, and utilities styles into your CSS:

    
@tailwind base;

@tailwind components;

@tailwind utilities;

These directives will be swapped with the actual CSS code from Tailwind when building the files.

Create a Tailwind config file

If you’d like to customize the utility classes of Tailwind, we highly recommend using the Tailwind configuration file. For example, if you want to easily change colors, sizings, radiuses, shadows, font families, and many more, this is the easiest way to change them with little effort.

Use the Tailwind CLI to generate a configuration file by running the following command in your terminal:

    
npx tailwindcss init

This will create a boilerplate file with the following content:

    
// tailwind.config.js
module.exports = {
    future: {},
    purge: [],
    theme: {
    extend: {},
    },
    variants: {},
    plugins: [],
}

We’ll get back to this file after finishing the building tools part of this guide and show you how you can update the colors and other properties of existing classes or even add new classes to your local Tailwind CSS configuration.

Processing Tailwind CSS

This is the final step of configuring Tailwind CSS locally. Add the following two plugins into your tailwind.config.js file for your build chain:

    
module.exports = {
    plugins: [
        // ...
        require('tailwindcss'),
        require('autoprefixer'),
        // ...
    ]
}

For simple projects, you can run the following command in your terminal to process the Tailwind configuration you have set up:

    
npx tailwindcss build main.css -o output.css

Make sure that the main.css file is the one that imports the directives and that you include the output.css file in your HTML template. The CSS that you need to include in your project is output.css, not main.css.

Using the configuration file

By default, Tailwind will always first look for the tailwind.config.js file and take into account the parameters that you have set up. In this file, you can change the values of the existing utility classes, such as changing the colors, sizings, spacing, font family, and many more. You can also add extra classes to the existing ones.

Let’s go through a few simple examples of usage. Let’s start with a common one, changing the font family.

Changing the font family

First of all, you will need to include a new font family for your project. We recommend using Google Fonts. We like the “Nunito” font family, so after selecting it from Google Fonts, we added it to our HTML template like this:

    
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">

Afterward, including a font, you should go to the tailwind.config.js file and add the following options inside the “theme” key value:

    
module.exports = {
    future: {
        // removeDeprecatedGapUtilities: true,
        // purgeLayersByDefault: true,
    },
    purge: [],
    theme: {
        fontFamily: {
        sans: ['Nunito', 'sans-serif'],
        display: ['Nunito', 'sans-serif'],
        body: ['Nunito', 'sans-serif'],
        },
        extend: {},
    },
    variants: {},
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
    ],
}

Now run the command that will process the Tailwind configuration file:

    
npx tailwindcss build styles.css -o output.css

You will now see that the font has changed when viewing your HTML template in your browser.

Adding custom colors

Almost inevitably you will need to either change or add branded colors to your project. Using the configuration file from Tailwind CSS, this process is incredibly easy to do. Add a key-value pair of your new color inside the “extend” object of the configuration file like this:

    
extend: {
    colors: {
        primary: '#EA755E',
    }
}

Now change the bg-teal-500 and hover:bg-teal-500 classes of the button you have created to bg-primary and hover:bg-primary. Run the command in your terminal to process Tailwind and check out your browser to see how the button now uses the newly added color.

What is so awesome about Tailwind is that the new color will now be used not only for changing background colors but also for changing the color of text, shadows, and many more.

Build Tool Examples

Running the custom Tailwind processing command in your terminal every time you change something in the configuration file can be bothersome and counterproductive. This is where building tools come into play. The official documentation has the most popular building tools such as Webpack, Gulp, Laravel Mix, and some other ones well covered. Check out the officially supported build tools from the documentation.