Using the Tailwind CSS framework with Next.js means getting rid of CSS modules, Styled Components, and writing Vanilla CSS code by calling HTML element classes in CSS, etc.
Also in Next.js production mode, you only get the CSS code your page needs and no more unused CSS from hundreds of CSS styles.
This post has been updated for Next.js v10 and Tailwind CSS v2.
Just to clear up any confusion, This method also works with Typescript and If you get stuck following the instructions or looking at the source code is enough for you to implement Tailwind CSS in Next.js, visit the <a href="https://github.com/MejanH/tailwindcss-with-nextjs.git">GitHub repository</a>.
<h2>Getting Started</h2>
First, you need to create a project with <code>create-next-app</code>.
Run the <code>npm</code> or <code>yarn</code> command from below. It will ask you to type your project name. Name anything you want and hit enter.
<pre><code class="language-bash">npx create-next-app
# or
yarn create next-app
</code></pre>
Try running <code>yarn dev</code> or <code>npm run dev</code> command to check if your project was created successfully.
Now, delete the CSS import from <code>/pages/_app.js</code> and CSS files from styles folder and also replace the <code>/pages/index.js</code> file with the code below.
<pre><code class="language-JSX">// index.js
import Head from 'next/head'

export default function Home() {
 return (
 &#x3C;div>
 &#x3C;Head>
 &#x3C;title>Tailwind CSS with Next.js&#x3C;/title>
 &#x3C;link rel="icon" href="/favicon.ico" />
 &#x3C;/Head>
 &#x3C;h1>Creating a project with Tailwind CSS, NextJS &#x26; Typography&#x3C;/h1>
 &#x3C;/div>
 )
}

</code></pre>
<h2>Installation</h2>
We are going to install Tailwind CSS npm packages in <code>devDependencies</code>. Because in production mode there will be only the CSS code we will use from Tailwind, not the whole Tailwind CSS file which will make our web app load slower.
Let's add the npm packages first, run:
<pre><code class="language-bash">npm install --save-dev tailwindcss postcss autoprefixer
# or
yarn add -D tailwindcss postcss autoprefixer
</code></pre>
Then run the next command on your terminal to generate <code>tailwind.config.js</code> and <code>postcss.config.js</code> file in your project folder.
<pre><code class="language-bash">npx tailwindcss init -p
</code></pre>
Now, open the <code>tailwind.config.js</code> file and add the paths of your pages and components to remove unused css in production builds.
<pre><code class="language-javascript">// tailwind.config.js
module.exports = {
 purge: ["./components/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}"],

 theme: { extend: {} },
 variants: {},

 plugins: [],
};
</code></pre>
Then, go to the styles folder and create a CSS style sheet called <code>styles.css</code> and paste the code from below.
<pre><code class="language-css">/* /styles/styles.css */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
</code></pre>
Next, open the <code>pages/_app.js</code> file and import the <code>styles.css</code> file which will be the global CSS of your Next.js web application.
<pre><code class="language-jsx">// /pages/_app.js
import "../styles/styles.css";
</code></pre>
That's it. You have implemented the Tailwind CSS framework in your Next.js application.
Let's add a button in <code>pages/index.js</code> to check if it's working.
<pre><code class="language-jsx">import Head from "next/head";

export default function Home() {
 return (
 &#x3C;div>
 ...
 &#x3C;button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
 Button
 &#x3C;/button>
 &#x3C;/div>
 );
}
</code></pre>
<img src="/images/tailwind-with-next-js.png" alt="Tailwind with Next JS">
Yep, it's working.
I assume you already noticed that heading styles are gone. Because all headings, Lists are unstyled by default in Tailwind.
You have to manually style the headings, lists, pre, blockquote elements like the code below or you can add a responsive and customizable typography plugin in Tailwind or you can disable <a href="https://tailwindcss.com/docs/preflight/">Preflight</a> to bring the default HTML style back.
<pre><code class="language-css">/* /styles/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* custom styles */
h1 {
 @apply text-2xl;
}
h2 {
 @apply text-xl;
}
h3 {
 @apply text-lg;
}
a {
 @apply text-blue-600 underline;
}
</code></pre>
<h2>How to add typography in Tailwind CSS</h2>
It's easy. Just like styling a <code>&#x3C;div></code> element with a <code>className</code>.
First, let's install the Tailwind CSS plugin from the terminal.
<pre><code class="language-bash"># Using npm
npm install --save-dev @tailwindcss/typography

# Using Yarn
yarn add -D @tailwindcss/typography
</code></pre>
Next, Open the <code>tailwind.config.js</code> and add the plugin like below.
<pre><code class="language-javascript">// tailwind.config.js
module.exports = {
 theme: {
 // ...
 },
 plugins: [require("@tailwindcss/typography")],
};
</code></pre>
Then open <code>index.js</code> and add the <code>prose max-w-none</code> class in the parent div element.
Add some headings, lists, blockquote, etc. HTML tags in <code>index.js</code> to test if the typography plugin is working or not like the screenshot below.
<img src="/images/typography-with-tailwindcss-reactjs.png" alt="typography with tailwindcss and nextjs">
<code>prose</code> class added the beautiful typography style and the <code>max-w-none</code> class override the default max-width of the typography plugin.
You can also modify the default styles and make typography more responsive with this <a href="https://github.com/tailwindlabs/tailwindcss-typography">plugin</a>.
Try running <code>yarn build</code> or <code>npm run build</code> then run <code>yarn start</code> or <code>npm run start</code> to run your application.
Open the developer tools in your browser and go to Network tab and refresh the page. Click on CSS stylesheets type to filter only CSS files from the list.
You will see a very low sized CSS is generated like the screenshot below.
<img src="/images/purgcss-checking-with-tailwind-css-next-js.jpg/" alt="purgecss with tailwind">
<h2>Conclusion</h2>
Developers want to save their time with flexibility and Tailwind CSS gives you exactly that type of features.
If you use Tailwind CSS as your primary framework I suggest you install Tailwind CSS Intellisense Plugin in vs code. This was helpful for me not to look at the docs every time. You just press <code>Ctrl+space</code> and it will show you every snippet with original CSS code.

#tailwindcss