# Next.js + Tailwind CSS

# Requirements

Fresh Next.js project.

# Run in console

npm install --save tailwindcss @tailwindcss/ui @fullhuman/postcss-purgecss

# tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    require('@tailwindcss/ui'),
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# styles/index.css

/* purgecss start ignore */
@tailwind  base;
@tailwind  components;
/* purgecss end ignore */

@tailwind  utilities;

1
2
3
4
5
6

# postcss.config.js

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# pages/_app.jsx

import '../styles/index.css'

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

export default MyApp

1
2
3
4
5
6
7

# pages/index.jsx

import Head from 'next/head'

const Home = () => (
  <>
    <Head>
      <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
    </Head>
    <div className="w-screen h-screen flex items-center justify-center">
      <div>Next.js + Tailwind CSS + Tailwind UI</div>
    </div>
  </>
)

export default Home

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Source: https://khanna.cc/blog/using-tailwind-ui-and-next-js-together/