Get up and running with Tailwind CSS and Next.js

Tailwind CSS is winning at being a developer-friendly utility-first CSS framework and if you’re to looking upgrade or start out with a new project, you should give Tailwind a look for your CSS needs.

View code on GitHub

If you follow me already you probably know I’m a huge fan of Next.js and if you’ve not heard of Next.js, it’s a lightweight React framework. 😍

I recently tried to get both of the projects working together but it required way more confirmation than I liked. Thanks recent improvements, the next-css library “just works” out of the box with Tailwind CSS.

In this tutorial we’ll cover creating a new Next.js and configuring Tailwind with PostCSS.

Create a Next.js project

You’ll need to create a new directory for this project. Go ahead and do it now.

Initialize a new npm project

Open your Terminal, cd into your newly created directory and initialize a new NPM project. We’ll provide the -y flag to skip asking any questions.

npm init -y

Install dependencies

Next, we’ll use npm to install Next and React.

npm install --save next react react-dom

Install dev dependencies

We now need to install some dependencies which are used for compiling CSS, including Tailwind itself.

npm install --save-dev tailwindcss postcss-preset-env postcss

Configure npm scripts

Installing the dependencies above created a file called package.json. This file contains a list of the project dependencies and we’ll now need to edit this file.

Inside package.json you can replace scripts with the following:

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
},

Create a page

Next.js by convention configures routes by filenames inside a pages directory.

Create a pages/index.js file and add the following:

export default () => (
  <div className="p-4 shadow rounded bg-white">
    <h1 className="text-purple-500 leading-normal">Next.js</h1>
    <p className="text-gray-500">with Tailwind CSS</p>
  </div>
);

Start the server

Now is a good time to check everything is in the right place and start the next server. Inside the terminal, you’ll want to run:

npm run dev

Next.js will tell you the application is running on http://localhost:3000 by default.

Configure and integrate Tailwind

Now the fun begins! If you’ve used Tailwind CSS before then the next steps will be familiar.

npx tailwindcss init

By default this will create a file called tailwind.config.js in your project root that looks a little like:

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

This file alone doesn’t do anything. If you restart your application, you’ll see nothing has changed. We will next configure PostCSS and create our first stylesheet.

Configure PostCSS

We can now follow convention to configure PostCSS. Next will look for the file postcss.config.js and load any defined plugins.

Inside your project root, create the file postcss.config.js and add the following:

module.exports = {
  plugins: ["tailwindcss", "postcss-preset-env"],
};

We’re doing a few things in this file:

• Invoking the tailwind library with our custom tailwind.config.js file
• Invoking the postcss-preset-env module which is used to help browsers process our CSS, including autoprefixer.

That’s it! 🎉

Using Tailwind

We’re now ready to @import the tailwind css inside our stylesheet.

Import Tailwind into your CSS

Create a CSS file inside your project. I’ve created the directory and file styles/index.css and added the following:

@tailwind base;
@tailwind components;
@tailwind utilities;
body {
  @apply bg-blue-500 p-12;
}

We’re using the @apply helper here to compose our own classes using Tailwind. This is magic. 🎩

Note: If you wish to use Tailwind inside other css files and import those into your styles/index.css then you will need to update your CSS file to begin with:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

You can read more about importing Tailwind over on their docs.

Import your CSS with Next.js

Create a file at pages/_app.js, or if you have one already, this is where you should import the stylesheet we created.

import "../styles/index.css";
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Start the Next.js app

We can now run npm run dev to see our working Next.js + TailwindCSS example running at http://localhost:3000.

Links

• Code for this tutorial
• Video of this setup (uses autoprefixer
• Next.js
• Tailwind CSS
• Me on Twitter

I hope this helps ❤️

Video (out of date):