Navigate back to the homepage

How to setup Next.js with Tailwind CSS and TypeScript

Kyrell Dixon
February 2nd, 2020 · 2 min read

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 with-typescript from the Next.js example repo to set up TypeScript.

1npx create-next-app next-tailwind-typescript-starter --example with-typescript
2cd next-tailwind-typescript-starter

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.

1# With Yarn
2yarn add -D postcss-preset-env tailwindcss
3
4# With Npm
5npm i -D postcss-preset-env tailwindcss

You can optionally create a tailwind.config.js file by using npx to run the Tailwind CLI.

1npx tailwind init

3. Setup PostCSS Build

After installing Tailwind, you have to set it up to be built with PostCSS. First, create the config file.

1touch postcss.config.js

Then you just need to add Tailwind and the PostCSS Webpack preset to the plugins section.

1module.exports = {
2 plugins: [
3 'tailwindcss',
4 'postcss-preset-env',
5 ],
6}

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 styles directory and an index.css file.

1mkdir styles; touch styles/index.css

Now you can use the @tailwind directive to inject the base, components, and utilities styles into the CSS file.

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

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 Layout component, but you can only import stylesheets in the pages/_app.{js,ts,jsx,tsx} file.

Since we’re using TypeScript, let’s create an app.tsx file.

1touch pages/_app.tsx

Inside of the _app.tsx file, we can create a custom App component that is passed AppProps and import the index.css file.

1import React from 'react'
2import { AppProps } from 'next/app'
3
4import '../styles/index.css'
5
6function MyApp({ Component, pageProps }: AppProps) {
7 return <Component {...pageProps} />
8}
9
10export default MyApp

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.

1# With Yarn
2yarn add -D @fullhuman/postcss-purgecss
3
4# With npm
5npm i -D @fullhuman/postcss-purgecss

Now you can add the plugin and tell it to look for CSS class names in all JavaScript and TypeScript files in the pages and components directories. If a class name isn’t used is one of these files, then it will remove the respective styles from the CSS file.

1module.exports = {
2 plugins: [
3 'tailwindcss',
4 process.env.NODE_ENV === 'production'
5 ? [
6 '@fullhuman/postcss-purgecss',
7 {
8 content: [
9 './pages/**/*.{js,jsx,ts,tsx}',
10 './components/**/*.{js,jsx,ts,tsx}',
11 ],
12 defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
13 },
14 ]
15 : undefined,
16 'postcss-preset-env',
17 ],
18}

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 base and components styles so that Purgecss doesn’t remove them. Here we can use a comment to whitelist both sections at the same time.

1/* purgecss start ignore */
2@tailwind base;
3@tailwind components;
4/* purgecss end ignore */
5@tailwind utilities;

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.

Join our email list and get notified about new content

Be the first to receive our latest content with the ability to opt-out at anytime. We promise to not spam your inbox or share your email with any third parties.

More articles from Kyrell Dixon

Creating a Product Hunt Clone with Vue.js and Tailwind CSS

I've been getting a lot of questions on how to build a full stack Vue.js application using Vuex, Vue Router, and Firebase complete with authentication, so I decided to make one.

September 15th, 2019 · 11 min read

How to Setup an Express.js Server in Node.js

This is a completely beginner friendly tutorial on how to setup a web server with Node.js using the Express framework.

August 18th, 2019 · 9 min read
© 2019–2020 Kyrell Dixon
Link to $https://twitter.com/kyrelldixonLink to $https://github.com/kyrelldixonLink to $https://instagram.com/kyrell.dixonLink to $https://www.linkedin.com/in/kyrell-dixon/