8 Simple Steps: Set Up a Project With Tailwind CSS, Next.js 10, and PurgeCSS

Create a JavaScript project with PurgeCSS to remove unused styles and keep it all small

Photo by Callum Hill on Unsplash.

Why Next.js?

It’s one of the best React frameworks supported by the huge React community.

Why Tailwind CSS?

Because it’s the simplest and most modern way to structure CSS classes for your components and layouts.

Why PurgeCSS?

Because you will need to keep your compiled Tailwind CSS file light and tiny.

The Setup Process

1. Let’s start with an empty Next.js project or just open up your already-set-up project:

npx create-next-app
# or if you use yarn
yarn create next-app

2. Then we will add Tailwind and PurgeCSS.

“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.” — Jake Prins on Medium

npm install tailwindcss
npm install -D @fullhuman/postcss-purgecss
# or if you use yarn
yarn add tailwindcss 
yarn add -D @fullhuman/postcss-purgecss

3. Launch this command to create a tailwind.config.js in the project:

npx tailwind init

4. Replace the Tailwind config content with these values if you want to remove warnings or other messages during the builds:

5. Inside the globals.css file, add these five lines with the comments included:

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

6. Add a real Tailwind component inside the file pages/index.js with the following content: