Get up and running with Tailwind CSS and Next.js

Jamie Barton

Follow

Nov 23, 2018 · 4 min read

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 the 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 and Autoprefixer.

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 @zeit/next-css

Install devDependencies

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

npm install --save-dev tailwindcss autoprefixer cssnano postcss-easy-import

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"
},

Configure Next.js + CSS

Now we’ll tell Next.js to use the @zeit/next-css library we installed earlier.

There isn’t much configuration required (Next.js conventions 🙌) but we’ll now need to create a next.config.js file inside our root directory and add the following:

const withCSS = require('@zeit/next-css')
module.exports = withCSS({})

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 leading-normal">Next.js</h1>
    <p className="text-grey-dark">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 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.

Create a Tailwind config file

The Tailwind configuration is written in JavaScript and to create the default configuration, inside your Terminal type:

./node_modules/.bin/tailwind init

By default this will create a file called taildwind.js in your project root.

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

Because we installed @zeit/next-css earlier, 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:

const tailwindcss = require('tailwindcss')module.exports = {
  plugins: [
    require('postcss-easy-import'),
    tailwindcss('./tailwind.config.js'),
    require('autoprefixer')
  ]
}

We’re doing a few things in this file:

• Importing tailwindcss library we install via NPM
• Invoking the tailwind library with our custom configuration
• Enabling postcss-easy-import and autoprefixer plugins

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 utilities;body {
  @apply bg-grey-light 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/preflight";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

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

Import your CSS with Next.js

Open pages/index.js and at the top of the file we’ll import the CSS file we just created.

import '../styles/index.css'

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
• Next.js
• Tailwind CSS

Thanks to

• Damian Kidd for the illustration above 💪
• Tim Neutkens for merging my PR to update the official Tailwind example
• Erhan Karadeniz for agreeing to use Tailwind on our side project
• Jonathan Steele for getting me into Tailwind

Follow me on Twitter and YouTube for more related tutorials and tips. ❤️