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…