nextjs

Next.js

To add Tailwind to a Next (^9.2.0) project, start by installing tailwindcss, postcss-import and autoprefixer:

npm install tailwindcss postcss-import autoprefixer --save

Next, set up your PostCSS plugins by creating a postcss.config.js file and adding the following configuration:

module.exports = {
  plugins: [
    "postcss-import",
    "tailwindcss",
    "autoprefixer"
  ]
};

Next, create a CSS file for your Tailwind styles. We've used css/tailwind.css for this example:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Finally, import your CSS in your pages/_app.js component to make them available globally:

import React from 'react'
import App from 'next/app'
import '../css/tailwind.css'

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return <Component {...pageProps} />
  }
}

export default MyApp

Setting up Purgecss (optional)

To add Purgecss, start by installing @fullhuman/postcss-purgecss.

npm install @fullhuman/postcss-purgecss --save

Finally, add Purgecss to PostCSS plugins by updating the postcss.config.js file and adding the following configuration:

const purgecss = [
  "@fullhuman/postcss-purgecss",
  {
    content: ["./components/**/*.js", "./pages/**/*.js"],
    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
  }
];
module.exports = {
  plugins: [
    "postcss-import",
    "tailwindcss",
    "autoprefixer",
    ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
  ]
};

Learn more about using Purgecss with Tailwind here.