If you’re starting a new React project, you might want to consider Next.js and Tailwind CSS. In this article, we will explain why this would be a great choice and walk you through the process of setting up a new project using these technologies.

UPDATE: Tailwind CSS 2.0 has been released. Please follow this new guide to use the latest version of Tailwind with the latest version of Next.js:

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

Why Next.js?

There are many important details you need to consider when you start a new project with React. Your code has to be bundled using a bundler like webpack and transformed using a compiler like Babel. Create React App can be a nice tool to handle this for you and give you a massive head start, but what about code-splitting, pre-rendering for performance, and SEO or server-side rendering?

To build a complete React application, you need more than CRA provides you. You can save yourself some time by using Next.js, a React framework that provides a solution to all of these problems above. If you want to read more about CRA vs. Next.js, check out Stack choices: Create React App vs Next.js.

Why Tailwind CSS?

Tailwind CSS is a CSS framework, but it’s different than most other frameworks like Bootstrap, Material, or Ant Design. It’s a utility-first framework, which means it doesn’t focus on predesigned components like buttons, cards, and alerts. It provides low-level utility classes that let you build completely custom designs without leaving your HTML.

Although it requires some time to learn all the utility classes, you barely need to write any CSS anymore once you start using it. It can give you a huge boost in productivity, and not needing to switch files while styling your HTML elements can feel like a blessing.

Let’s Start

If you haven’t got a project set up with Next.js, first 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 and hit enter. The next message will be:

Pick a template

Choose “Default starter app” 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 project up and running.

Adding Tailwind CSS

Start by adding the Tailwind CSS library to your development dependencies using npm or yarn:

yarn add tailwindcss -D

Then, we need to add a tailwind.config.js file to the root of our application. Use the following command to set this up:

npx tailwind init

You should now have a tailwind.config.js in your project containing the following:

Adding PostCSS

Next up, we need to configure PostCSS, a tool for transforming CSS with JavaScript because Tailwind CSS is a PostCSS plug-in. Let’s create a postcss.config.js and add the following so Next.js will load the defined plug-ins.

In the root of your project, run:

touch postcss.config.js

Then add the following to that file:

module.exports = {
  plugins: \['tailwindcss'\],
}

Besides TailwindCSS, we should also add the PostCSS Preset Env module, which converts modern CSS into something most browsers understand:

yarn add postcss-preset-env -D

Now let’s update our postcss.config.js to include this module:

module.exports = {
  plugins: \['tailwindcss', 'postcss-preset-env'\],
}

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

mkdir styles 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. Next.js uses the App component to initialize pages, and if we need to control the page initialization, we need to create a file called pages/_app.js:

touch pages/\_app.js

Now import the stylesheet we created:

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 localhost:3000 in your browser.

PurgeCSS

One problem with Tailwind CSS is the large file size, but we can use PurgeCSS to 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. To set this up, we start by installing the PurgeCSS module as a dev dependency in our project:

yarn add @fullhuman/postcss-purgecss -D

Then update your postcss.config.js file with the following code:

The order of exports matters. First, we tell PostCSS to load Tailwind CSS. Then, we purge the unused CSS (only in production). Finally, we let the PostCSS Preset Env plug-in do its thing to make the remaining CSS compatible for all browsers.

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.

Finally, it’s recommended to only apply PurgeCSS to Tailwind CSS’s utility classes — not to base styles or component classes. This will ensure you don’t accidentally purge important base styles when working with Next.js The easiest way to do this is to use PurgeCSS’s whitelisting feature to disable PurgeCSS for non-utility classes. Add this to your tailwind.css file:

/\* purgecss start ignore \*/
@tailwind  base;
@tailwind  components;
/\* purgecss end ignore \*/@tailwind  utilities;

Cool, now we are ready to work with Next.js and Tailwind CSS without having to worry about bundle sizes!

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

How to Set Up Next.js With Tailwind CSS