How to Set Up Tailwind CSS 2 With Next.js 10
Tags: nextjs, react, tailwindcss, css
Published: 2021-01-01 17:54:13


In the last months of 2020, a couple of great framework updates have been released. First was the release of [Next.js 10](https://nextjs.org/blog/next-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](https://blog.tailwindcss.com/tailwindcss-v2) of their CSS framework. This new update included lots of improvements like a [new color palette](https://blog.tailwindcss.com/tailwindcss-v2#all-new-color-palette) and [dark mode support](https://blog.tailwindcss.com/tailwindcss-v2#dark-mode).

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](https://classic.yarnpkg.com/en/docs/install/#mac-stable), 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](https://postcss.org/), 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](https://tailwindcss.com/docs/configuration).

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](https://localhost:4202/settings/departments) in your browser.

### Configure PurgeCSS

One problem with Tailwind CSS is the large file size, but [PurgeCSS](https://github.com/FullHuman/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](https://tailwindcss.com/docs/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.

---

If you’re interested in saving time on your next project and skip implementing authentication, payments, etc. then check out [Serverless SaaS](https://serverless.page), the SaaS starter-kit for React developers. You can also follow me on [Twitter](https://twitter.com/jakeprins_nl), or at [jakeprins.com](https://jakeprins.com).