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 _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
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] : []) ] }