add tailwind to next

1npx create-next-app -e with-tailwindcss my-project
2cd my-project

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

1npx tailwindcss init -p

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;