Install Tailwind for Next.js

install_tailwind_for_next.md

Install dependencies

yarn add -D @zeit/next-css postcss-preset-env
yarn add tailwindcss

# or a copy-friendly version
yarn add -D @zeit/next-css postcss-preset-env postcss-easy-import && \
yarn add tailwindcss

Add Tailwind config

npx tailwind init

Add PostCSS config

In ~/postcss.config.js

const tailwindcss = require('tailwindcss')

module.exports = {
  plugins: [
    require('postcss-easy-import'),
    tailwindcss('./tailwind.config.js'),
    require('postcss-preset-env')
  ],
}

Create a default style

In ~/styles/tailwind.css

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

Add tailwind to a custom app

Note: This will make tailwind global to all documents

In ~/pages/_app.(j|t)sx

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

export default class extends App {
  // Only uncomment this method if you have blocking data requirements for
  // every single page in your application. This disables the ability to
  // perform automatic static optimization, causing every page in your app to
  // be server-side rendered.
  //
  // static async getInitialProps(appContext) {
  //   // calls page's `getInitialProps` and fills `appProps.pageProps`
  //   const appProps = await App.getInitialProps(appContext);
  //
  //   return { ...appProps }
  // }

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