loading...
Cover image for Get up and running with Tailwind CSS and Next.js

Get up and running with Tailwind CSS and Next.js

notrab profile image Jamie Barton Updated on ・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 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

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.

Next.js Terminal Output

Configure and integrate Tailwind

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

npx tailwind init

By default this will create a file called tailwind.config.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

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:

  • Importing tailwindcss library we installed via NPM
  • 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

I hope this helps ❤️

Video (out of date):

Posted on by:

notrab profile

Jamie Barton

@notrab

Husband. Dad. Full Stack Developer.

Discussion

markdown guide
 
 

Hello, nice setup, just a mistake : you wrote import "../styles/main.css"; I think it's import "../styles/index.css";

 
 

Oh, sorry! I thought this was a typo in the tutorial only.

Fixed for real.

 

This article is cool. Helped me getting up and running in no time. Thanks

 

Glad I could help ❤️

 

hey there, what do you think of the setup on the official repos of tailwind? github.com/tailwindcss/setup-examp...

There are some differences and just wanted to highlight that, let me know!

 

Also a great setup. The one you linked to doesn't use the postcss-preset-env plugin, which bundles autoprefixer and has the traditional next css support.

I'm personally not attached to either, just always defaulted to github.com/csstools/postcss-preset... after nextcss was renamed.

 
 

Thanks a lot Jamie. I am however facing a small performance issue. The hot reloading is taking 8-10s to reflect changes in browser upon changing any property after the @apply. I've opened a new stackoverflow question for this : stackoverflow.com/questions/631984... I'd glad if you can help.

 

I notice this while working with Gatsby, and others when using @apply too. Strange. Will look into it and report back any findings.

 

Does this work with SSR? If so, are there any performance implications? Does the CSS get compiled on each request or is it compiled and served as a separate file?

 

Nice article!
How do you go about purging the CSS file at the build time?

 
 
 

Hello, i am still new with TailwindCSS and NextJS. So, basically it is already built-in with PurgeCSS? removed unused css in TailwindCSS? or we must add PurgeCSS for manually? Thanks

 

It's since been included by default, so I'd opt to use the Tailwind built-in and configure that.

 

This is what I was looking for. Thank you :)

 

You're welcome! I've tried to keep it up to date as possible but if you find anything that could be improved or has changed, please let me know :)