Tailwind CSS v2.0 With Next.js

With the epic release of Tailwind CSS v2.0, here’s a guide on how you can add it to a new or existing Next.js project. For the purpose of simplicity and keeping this guide as short as possible, I will outline the steps of adding Tailwind to Next.js.

1. Create a new Next.js project

Run the following command to create a new Next.js project. This step should not be new to you if you have previous used Next.js:


npx create-next app

2. Installing TailwindCSS

postcss v8 or newer is required for Tailwind v2.0. You’ll also need a packaged called autoprefixer which handles adding vendor-specific prefixes to the compiled CSS (eg. -webkit).

Install this packages by running the following command in the root of your Next.js project created in Step 1:


npm install tailwindcss postcss autoprefixer

3. Configuring PostCSS

The next step is to configure postcss to work with tailwindcss and autoprefixer. Start by creating a file called postcss.config.js in the root of your Next.js project. This can be done from the command line using the command:


touch postcss.config.js

Then, add the following code to the postcss.config.js file:


module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {}
    }
}

4. Add Tailwind styles to the project

Now that postcss is configured to work with tailwindcss, we want to add Tailwind to the project. Create a file called tailwind.css in the /styles directory of your Next.js project and add the following code:


// styles.tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

The @tailwind directive us used by postcss to inject the Tailwind base, components and utilities CSS in to the compiled stylesheet.

As far as Tailwind configuration is concerned, we are done. The last step is to customise and use Tailwind in your project…

Using TailwindCSS in your Next.js project

Start by importing the TailwindCSS styles globally. To do this, open the pages/_app.js file and add the following line of code at the top of the file:


// add this line
import "../styles/tailwind.css";

...

// the code below should already be in the _app.js file
function App({ Component, pageProps }) {
    return ...
}

If you were already running the project with npm run dev, you should not stop the development server and restart it to ensure the changes take effect.

Testing TailwindCSS is installed correctly

You can test if you have followed the steps above correctly by replacing the contents of pages/index.js with the following code:


export default function Home() {
    return (
        <h1 className="text-3xl text-indigo-400 bg-gray-300 p-4 text-center">
            Purple title with gray background
        <h1>
    );
}

This should then display a purple title and gray background, styled by Tailwind at localhost:3000!

Bonus: Customising TailwindCSS

One of the powerful features of Tailwind is how it can be customised. Although the default configuration, palettes and styles work great you may need to change some of the defaults.

To do this, first create a Tailwind config file by running the following command in the root of your Next.js project:


npm tailwindcss init

This will create a tailwind.config.js file in the root directory with the following content:


module.exports = {
    purge: [],
    darkMode: false,
    theme: {
        extend: {},
    },
    variants: {},
    plugins: [],
}

You can now use the official Tailwind customisation docs for guidance on how to customise Tailwind for your project.

If you haven’t already – check out the epic hype video for TailwindCSS v2.0 here:

Happy coding!

Subscribe to Email Updates