In the existing directory of your Next.js app, run these commands:
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p
Then open your tailwind.config.js file and add these lines:
content: [ "./app/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", // Or if using `src` directory: "./src/**/*.{js,ts,jsx,tsx}", ],
The whole file may look like this now:
/** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./app/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", // Or if using `src` directory: "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }
And there might be an error: "Parsing error: Cannot find module 'next/babel'". Thanks to Stack Overflow. This is the fix:
- Create a file called .babelrc within the root directory of your Next.js app
- Add this to the file:
{ "presets": ["next/babel"], "plugins": [] }
Then open your .eslintrc.json file and replace all code with this:
{ "extends": ["next/babel","next/core-web-vitals"] }
Now the last thing to do is to add this to the main .css file:
@tailwind base; @tailwind components; @tailwind utilities;
Finished! Check the resources for further information