DEV Community

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
Enter fullscreen mode Exit fullscreen mode

Install dependencies

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

npm install --save next react react-dom
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
},
Enter fullscreen mode Exit fullscreen mode

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>
)
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 tailwindcss init
Enter fullscreen mode Exit fullscreen mode

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: [],
}
Enter fullscreen mode Exit fullscreen mode

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'],
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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} />
}
Enter fullscreen mode Exit fullscreen mode

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):

Discussion (28)

pic
Editor guide
Collapse
w3bdesign profile image
w3bdesign

Purge CSS is now built-in to Tailwind: tailwindcss.com/docs/controlling-f...

Collapse
f2aldi profile image
Aldi

its auto add or we must add manually?

Collapse
w3bdesign profile image
Collapse
tortuefacile profile image
Guillaume Gasnier

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

Collapse
notrab profile image
Jamie Barton Author

Thanks! I've fixed :)

Collapse
natterstefan profile image
Thread Thread
notrab profile image
Jamie Barton Author

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

Fixed for real.

Thread Thread
natterstefan profile image
Collapse
vvo profile image
Vincent Voyer

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!

Collapse
notrab profile image
Jamie Barton Author

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.

Collapse
ncko profile image
Nick Olsen

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?

Collapse
pav1an profile image
Pavan

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.

Collapse
notrab profile image
Jamie Barton Author

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

Collapse
mattiascibien profile image
Mattias Cibien

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

Collapse
notrab profile image
Jamie Barton Author

Glad I could help ❤️

Collapse
sfteague profile image
Teague Ashburn

Thank you 😊

Collapse
obouchari profile image
Otman Bouchari

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

Collapse
notrab profile image
Collapse
jamesqquick profile image
James Q Quick

Worked great. Thank you!

Collapse
uidoyen profile image
Hussain Ansari

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

Collapse
notrab profile image
Jamie Barton Author

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 :)

Collapse
notrab profile image
Jamie Barton Author

Hey Cory,

Good point. The latest preset requires postcss as well. I will add a note to the post :)

Thank you <3

Collapse
sinanweb profile image
sinan-web • Edited

Thank you so much. The last weeks I questioned my life choices cuz I wasnt able to install Tailwind correctly. :D I wish you the best

Collapse
notrab profile image
Collapse
pabloc profile image
PabloC

Thank you!

Collapse
f2aldi profile image
Aldi

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

Collapse
notrab profile image
Jamie Barton Author

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