How to setup Next.js with Tailwind CSS and TypeScript
This tutorial will show you how to set up a Next.js app with Tailwind CSS and TypeScript. At the end of the post, I will show you how to optionally use Purgecss to remove unused CSS styles.
1. Bootstrap the project with Create Next App
Create Next App is the Next.js equivalent of Create React App used to set up the boilerplate
for a Next.js web app. Here we're using it along with
from the Next.js example repo to set up TypeScript.
2. Install Tailwind CSS Dependencies
After getting the majority of the project boilerplate setup, we can start working on installing Tailwind. First, let's install the packages.
You can optionally create a
tailwind.config.js file by using
npx to run the Tailwind CLI.
3. Setup PostCSS Build
After installing Tailwind, you have to set it up to be built with PostCSS. First, create the config file.
Then you just need to add Tailwind and the PostCSS Webpack preset to the plugins section.
The PostCSS plugin system expects plugins to be added as the
string type. This is different than what the Tailwind docs
recommend, so be sure to check out the Next.js PostCSS docs for more details.
4. Add Tailwind to CSS file
That's it for the set up! Now we can focus on getting the CSS into Next.js. First create a
Now you can use the
@tailwind directive to inject the
utilities styles into the CSS file.
5. Import Global CSS
All that's left is to import the
index.css file into a component so Tailwind can be used throughout the app. You might be tempted to import the file in the
but you can only import stylesheets in the
Since we're using TypeScript, let's create an
Inside of the
_app.tsx file, we can create a custom App component that is passed
AppProps and import
Now the entire web app has access to the Tailwind CSS classes!
6. Optional: Configure Purgecss
There are several things you can do to minimize the CSS file size. One of the easiest ways to minimize the file size is to use Purgecss to remove any unused styles from the final CSS file.
To set up Purgecss, first let's install it.
If a class name isn't used is one of these files, then it will remove the respective styles from the CSS file.
There is also a check to ensure Purgecss is only added in production. Only adding Purgecss in production helps speed up development by removing the extra CSS processing.
The final step is to whitelist the
components styles so that Purgecss doesn't remove them. Here we can use a comment
to whitelist both sections at the same time.
That's the last of the setup! If you ran into any issues, you can check out the Github repo to view the source code for the final boilerplate.