不应用样式的顺风CSS

Question

我目前正在构建一个快速反应网络应用程序，今天我遇到了很多错误，第一个问题是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"
  }

这是指向项目的链接，如果这样做有任何帮助的话。

Answer 1

最后，我通过以下方法解决了这个问题：https://www.smashingmagazine.com/2020/02/tailwindcss-react-project/。但我还是不知道为什么突然停止工作。这个解决方案的唯一问题是在npm start上构建CSS并将其输出到另一个文件。问题是，每次更改CSS时，我都必须重新启动服务器。

Answer 2

我也有同样的问题，解决方案是在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: [],
};

Answer 3

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

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