javascript - TailwindCSS styles are not applied in my Next js app - Stack Overflow

admin管理员组

文章数量:1279187

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.

Index.js file

return (
    <div className="flex justify-center">
      <div className="px-4" style={{maxWidth: "1600px"}}>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2> Test
        </div>
      </div>
    </div>
       )

postcss.config.js file:

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

tailwind.config.js

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

globals.css

@tailwind base;
@tailwind ponents;
@tailwind utilities;

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.

Index.js file

return (
    <div className="flex justify-center">
      <div className="px-4" style={{maxWidth: "1600px"}}>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2> Test
        </div>
      </div>
    </div>
       )

postcss.config.js file:

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

tailwind.config.js

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

globals.css

@tailwind base;
@tailwind ponents;
@tailwind utilities;

• javascript
• next.js
• tailwind-css

Share Improve this question Follow edited Nov 20, 2022 at 9:59 Sina Rahimi asked Nov 17, 2022 at 20:04 Sina RahimiSina Rahimi 28111 gold badge33 silver badges1212 bronze badges 3

• Tailwind does not apply any classes (including their reset classes) until you use one of their utility classes in your code – Samathingamajig Commented Nov 17, 2022 at 20:06
• Could you please elaborate a little more? Or direct me to a thread. – Sina Rahimi Commented Nov 20, 2022 at 9:40
• @SinaRahimi the elaboration is in my answer – Samathingamajig Commented Nov 20, 2022 at 22:42

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

A missing import line import '../styles/globals.css' ( My case ) at the beginning of the _app.js file could cause the issue.

I had mistakenly mented out this line in my _app.js file, and everything started to work out fine when I fixed it.

It is also clear that the content property of the module.exports object in tailwind.config file should be set properly, as explained above a couple of times.

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.

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

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

It should work fine.

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

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 ponents/pages
    "./ponents/**/*.{js,ts,jsx,tsx}", //path to ponents/pages
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

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

本文标签： javascriptTailwindCSS styles are not applied in my Next js appStack Overflow