How to Set Up Tailwind CSS V2.0 With Next.js 10

In the last months of 2020, a couple of great framework updates have been released. First was the release of Next.js 10, which came with a lot of nice features, like the new image component that automatically optimizes images.

Secondly, 18 months after the 1.0 release, the Tailwind team released v2.0 of their CSS framework. This new update included lots of improvements like a new color palette and dark mode support.

Using the latest version of Next.js with Tailwind CSS is a very powerful combination to create and style web applications. Let’s walk through the steps of setting a new project up.

Start a New Next.js Project

Assuming you have installed Yarn, open your terminal and run yarn create next-app in your projects folder.

You will get prompted with the following message:

What is your project named?

Fill in a name, hit enter, and wait until your project is ready. Then, type cd <your-project-name> to make sure you are inside that directory where you can run yarn dev to start the development server. You should now have your new Next.js 10 project up and running.

Install Tailwind and Its Dependencies

Tailwind CSS is a plugin built on PostCSS, a tool for transforming CSS with JavaScript. The v2.0 has been updated for the latest PostCSS release, which requires installing postcss and autoprefixer as peer dependencies alongside Tailwind itself.

Add Tailwind and install PostCSS as well as autoprefixer using npm or yarn:

yarn add tailwindcss postcss autoprefixer

Create Config Files

We need to add a tailwind.config.js and a postcss.config.js file to the root of our application. Use the following command to set this up:

npx tailwindcss init -p

This will create a tailwind.config.js file at the root of your project:

Learn more about configuring Tailwind in the configuration documentation.

It will also create a postcss.config.js file that includes tailwindcss and autoprefixer configured:

Import the CSS

Let’s create a styles folder and import Tailwind CSS from a CSS file:

touch styles/tailwind.css

Inside tailwind.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

To add global CSS to a Next.js app, we need to override the default App component. With Next.js 10, you should already have _app.js inside your pages folder. Now import the stylesheet we created:

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

Cool, now we are ready to add some Tailwind CSS magic to our home page. Go to /pages/index.js (or /pages/index.tsx if you use TypeScript) and add some elements with Tailwind CSS classes. For example:

Run yarn dev to see your app on http://localhost:3000 in your browser.

Configure PurgeCSS

One problem with Tailwind CSS is the large file size, but PurgeCSS can fix this. PurgeCSS reduces the file size by scanning your HTML and removing any classes that aren’t used. We only want this in production because if we are developing, we want to be able to use any Tailwind CSS class without running the build process.

Now with Tailwind CSS v2, PurgeCSS is already included. All you have to do is update the tailwind.config.js file so Tailwind can tree-shake unused styles in production builds. Update your file like this:

For now, we check all of our code inside .js, .jsx, .ts or .tsx files that live in either the pages/ or components/ folder. If you plan to add HTML in other folders like containers/ or something, make sure you add that folder to this configuration file.

You can read the guide from Tailwind on optimizing for production to learn more about tree-shaking unused styles for best performance.

Conclusion

Now we are ready to work with the latest versions of Next.js and Tailwind CSS without having to worry about bundle sizes!

That’s it! Thanks for reading. I hope it was helpful.