Tailwind CSS未应用样式。

Question

我目前正在构建一个基于React-Express的Web应用程序，今天遇到了许多错误。第一个问题是关于Webpack-5的。我通过将版本降级到4.0.3来解决它，但是当我启动React应用程序时，CSS无法工作，所以我认为可能是Node JS版本的错误，因此我安装了最新版本，但这导致了另一个错误，所以我安装了LTS 16.15.1版本，但CSS仍然无法工作。所以我接下来做的事情是重新安装tailwind，但仍然没有解决问题。在控制台或终端中都没有收到任何错误消息。

tailwind.config.js

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

postcss.config.js

export const plugins = {
  tailwindcss: {},
  autoprefixer: {},
};

package.json

"devDependencies": {
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.14",
    "sass": "^1.52.1",
    "tailwindcss": "^3.1.3",
    "typescript": "^4.7.3"
  }

这是项目的链接，如果有帮助的话。

- Rohith Nambiar

Answer 1

我遇到了同样的问题，对于我来说解决方案在tailwind.config.json文件中的content数组中，我在其中指定了样式应用的文件夹路径

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",  
    "./components/**/*.{js,ts,jsx,tsx}",
    "./page-section/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: "#366B45"
      },

      fontFamily: {
        sans: ["Inter", "sans-serif"],
      },
    },
  },
  plugins: [],
};

- Afuye Olawale

---

仅仅拥有以下内容是否足够呢？content: [ "./src/**/*.{js,tsx,jsx}", ],因为它涉及整个项目。我仍然在设置中遇到问题，无法在任何地方得到答案。 - Rafael Santos

@RafaelSantos，Next.js 项目默认情况下在根目录下没有 src 文件夹。 - Afuye Olawale

Answer 2

我通过按照以下步骤解决了问题：https://www.smashingmagazine.com/2020/02/tailwindcss-react-project/。但我仍然不确定为什么它会突然停止工作。这种解决方案的唯一问题是，在npm start时，它会构建CSS并将其输出到另一个文件中。问题在于，每次更改CSS时，我都必须重新启动服务器。

- Rohith Nambiar

Answer 3

尝试在index.css文件中添加以下内容。

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

- MagnusEffect

---

我已经做过了，但是没有起作用。 - Rohith Nambiar

尝试重新启动服务器。 - MagnusEffect

那是我做的第一件事，但并没有起作用。 - Rohith Nambiar