TailwindCSS 样式未应用于我的 Next js 应用程序答案

【问题标题】：TailwindCSS styles are not applied in my Next js appTailwindCSS 样式未应用于我的 Next js 应用程序
【发布时间】：2022-11-18 04:34:17
【问题描述】：

我创建了一个 Next js 应用程序。正如他们在文档中所说，我将 TailwindCSS 集成到我的项目中。一切顺利。然而，我得到的结果是一个没有应用 TailwindCSS 样式的网页。

我将提供我认为导致此问题的文件。

如果有人能澄清我错在哪里，我将不胜感激。

postcss.config.js 文件：

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

tailwind.config.js

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

全局变量.css

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

【问题讨论】：

在您在代码中使用它们的实用程序类之一之前，Tailwind 不会应用任何类（包括它们的重置类）

标签： javascript next.js tailwind-css

【解决方案1】：

您的 tailwind.config.js 需要一个 content 字段，以便 Tailwind 知道在哪里寻找他们被调用的实用程序类。

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

这是我的整个配置：

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

在您在代码中使用它们的实用程序类之一之前，Tailwind 不会应用任何类（包括它们的重置类），因此如果它不知道您使用了它们中的任何一个，则不会应用任何样式。

【讨论】：

【解决方案2】：

您应该在 tailwind.config.js 文件中添加以下代码

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

It should work fine.

【讨论】：

【解决方案3】：

对我有用的是：

在package.json文件中添加watch脚本到你的scripts
确保为您的输入/输出 css 文件提供正确的路径
```
"scripts": {
    "watch": "npx tailwindcss -i src/input.css -o dist/output.css --watch"
 }
```
2：运行它：
```
npm run watch
```

【讨论】：