1# If you're on Next.js v10 or newer
2npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
3
4# If you're on Next.js v9 or older
5npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
1 // tailwind.config.js
2 module.exports = {
3- purge: [],
4+ purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
5 darkMode: false, // or 'media' or 'class'
6 theme: {
7 extend: {},
8 },
9 variants: {
10 extend: {},
11 },
12 plugins: [],
13 }
1 // pages/_app.js
2- import '../styles/globals.css'
3+ import 'tailwindcss/tailwind.css'
4
5 function MyApp({ Component, pageProps }) {
6 return <Component {...pageProps} />
7 }
8
9 export default MyApp
1// pages/_app.js
2import '../styles/globals.css'
3
4function MyApp({ Component, pageProps }) {
5 return <Component {...pageProps} />
6}
7
8export default MyApp
1// tailwind.config.js
2module.exports = {
3 purge: [],
4 darkMode: false, // or 'media' or 'class'
5 theme: {
6 extend: {},
7 },
8 variants: {
9 extend: {},
10 },
11 plugins: [],
12}
1// postcss.config.js
2module.exports = {
3 plugins: {
4 tailwindcss: {},
5 autoprefixer: {},
6 },
7}
1/* ./styles/globals.css */
2@tailwind base;
3@tailwind components;
4@tailwind utilities;