I have created a Next js app. As they said in their documentation, I integrated TailwindCSS into my project. Everything went well. However, the result I got was a web page where no TailwindCSS styles were applied on.

I will provide the files that I think are causing this issue.

I would appreciate it if someone could clarify where I am wrong.

postcss.config.js file:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

CodePudding user response：

Your tailwind.config.js needs a content field so that Tailwind knows where to look for their utility classes being called.

content: ["./src/**/*.{js,ts,jsx,tsx}"],

Here's my entire config:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Tailwind does not apply any classes (including their reset classes) until you use one of their utility classes in your code, so if it doesn't know you used any of them then no styles will be applied.

CodePudding user response：

You should add following code in your tailwind.config.js file

module.exports = {
content: [
 "./pages/**/*.{js,ts,jsx,tsx}",
 "./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
 extend: {},
},
plugins: [],
} ```

It should work fine.

CodePudding user response：

What worked for me:

1. add a watch script to your scripts in package.json file

Make sure to give it the correct path for your input/output css files

"scripts": {
    "watch": "npx tailwindcss -i src/input.css -o dist/output.css --watch"
 }

2: run it:

npm run watch

CodePudding user response：

your tailwind.config.js doesnt have the code connecting it to the pages you want processed. you should include this.

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}", //path to components/pages
    "./components/**/*.{js,ts,jsx,tsx}", //path to components/pages
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

the code above (minus the comments) is from their website,

https://tailwindcss.com/docs/guides/nextjs