Tailwind CSS 不应用样式

Question

我目前正在构建一个 React-Express Web 应用程序，今天我遇到了许多错误，第一个问题是Webpack-5. 我通过将版本降级解决了这个问题，4.0.3但是当我启动react-app时，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: {},
};

包.json

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

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

Answer 1

我遇到了同样的问题，我的解决方案是在 tailwind.config.json 的内容数组中，我在其中指定了要应用样式的文件夹的路径

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: [],
};