Tailwind CSS and Next.js

RTFM

As things change rapidly, following the official install docs is the best place to start.

Install Tailwind

As we use yarn: yarn add tailwindcss

Add Tailwind to your CSS

Because it's a general install doc it doesn't discuss where these directives should be placed in a Next.js project.

However a recent Tailwind project places it in css/main.css so let's follow that approach.

We also need to import the css into our Next.js project, which we can do in a pages/_app.js file:

import '../css/main.css'

function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default 

Create your Tailwind config file (optional)

We'll usually want to add some customisations (such as extending themes and adding variants) so we'll run npx tailwindcss init to generate a config file:

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Process your CSS with Tailwind

Using Tailwing with PostCSS

We'll want to add a postcss.config.js file as specified:

module.exports = {
  plugins: [
    'tailwindcss',
    'autoprefixer',
  ]
}

Note: In Tailwind CSS's example project PurgeCSS is set up manually, but as the Tailwind docs mention this is only necessary in older versions of Tailwind.

That completes following Tailwind's installation docs with some minor additions for Next.js.

We're not quite done though.

PurgeCSS Configuration

To ensure 300KB+ CSS bundles are not served in production, let's setup PurgeCSS for Next.js from within Tailwind CSS's configuration file (tailwind.config.js):

module.exports = {
  purge: ['./components/**/*.js', './pages/**/*.js'],
  ...
}

Fonts

Add your font files to a fonts/ directory. You might only need woff2 files in 2020 – for many use cases other formats are no longer necessary.

Add your font-face directives to the top of css/main.css.

To define a default font, update tailwind.config.js to extend fontFamily with your main font:

const defaultTheme = require('tailwindcss/defaultTheme')

extend: {
  fontFamily: {
    sans: ['Lato', ...defaultTheme.fontFamily.sans]
  }
}

You can naturally define a variety of other font families to use in addition to prepending to the 'sans' default, as outlined in the Tailwind configuration docs.