DEV Community

loading...
Cover image for Adding TailwindCSS v2 in your Next.js project

Adding TailwindCSS v2 in your Next.js project

nikit profile image Nikit Singh Originally published at overcompiled.com Updated on ・2 min read

TailwindCSS v2 was recently released. Their release trailer was freaking amazing. They even got music composed especially for their trailer.

Now let's focus on how you can add TailwindCSS v2 to your new or existing Next.js project.

Creating a new Next.js project

npx create-next-app
Enter fullscreen mode Exit fullscreen mode

This command will bootstrap a new Next.js project for you.
The package.json should contain these scripts.

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}
Enter fullscreen mode Exit fullscreen mode

You can start the project by running

npm run dev
Enter fullscreen mode Exit fullscreen mode

Adding TailwindCSS

npm install tailwindcss postcss autoprefixer
Enter fullscreen mode Exit fullscreen mode

PostCSS v8 or up is required for Tailwind v2 to work. autoprefixer is a PostCSS plugin. It adds vendor-specific prefixes to the compiled CSS like -webkit, -ms, etc.

Configuring PostCSS

Both tailwindcss and autoprefixer are postcss plugins. To use them in our project, we first need to configure postcss and pass these two plugins to it.

Create a file named postcss.config.js in the root of your project.

touch postcss.config.js 
Enter fullscreen mode Exit fullscreen mode

Now add this to the file.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}
Enter fullscreen mode Exit fullscreen mode

Adding TailwindCSS styles

Now create a src/styles/tailwind.css file and add the following to it.

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

The @tailwind directive will inject the base, components, and utility classes for us to use.

Now we have added TailwindCSS to our project. The only thing remaining is importing the styles globally. Doing so will let us use them from anywhere in our project.
To do that let import the tailwind.css file into the pages/_app.js file.

import '../src/styles/tailwind.css';

function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Restart your server after making changes to pages/_app.js so the changes can reflect.

Now you are ready to use Tailwind v2 in your project. Let's try it now, shall we?

Remove everything from your pages/index.js file and paste this there.

export default function Home() {
  return (
    <h1 className="text-4xl text-red-400 bg-gray-800 p-4 text-center">
      TailwindCSS v2 with Next.js
    </h1>
  );
}
Enter fullscreen mode Exit fullscreen mode

Screenshot of TailwindCSS v2 working in Next.js app

Configuring TailwindCSS defaults

To change the TailwindCSS defaults we first need to create a tailwind config file. Add it by running this command.

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

This will create tailwind.config.js in the root of your project with following content,

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

Thanks for reading and I hope this was helpful :)

Discussion (1)

pic
Editor guide
Collapse
ricardopbarbosa profile image
Ricardo Pereira Barbosa

Hi, thank you for this post!
Have you tried installing any plugins in this structure? I've been trying to install "@tailwindcss/custom-forms" plugin, everything good on the tailwind.config file from examples I've seen, but next.js seems to not include the plugin styles in the end. I don't know if there's any additional configuration needed in the postcss.config file or any other since I can't seem to find an example of the mix next.js+tailwindcss+plugins