如何在 reactjs web 应用程序中配置 tailwind css？答案

【问题标题】：How to configure tailwind css in reactjs web app?如何在 reactjs web 应用程序中配置 tailwind css？
【发布时间】：2022-06-21 21:51:22
【问题描述】：

我是顺风 css 的新手。我尝试使用官方文档在我的 reactjs 项目中配置它，但它似乎不起作用。我尝试了其他资源，但仍然无法正常工作。

请注意：它没有抛出任何错误，但它不起作用。

例如

<div className="bg-sky-50">
  Come On 
  </div>

应该改变背景颜色，但不改变背景颜色。

请查看我使用的配置

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js

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

index.css

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

我也试试这个

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

npm install @craco/craco

Package.json

{
    // ...
    "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test",
      "eject": "react-scripts eject"
    },
  }

craco.config.js

module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

创建tailwind.config.js

npx tailwindcss-cli@latest init

tailwind.config.js


module.exports = {
   purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

index.css

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

【问题讨论】：

什么不起作用？不是在建吗？抛出错误？不显示样式？你能提供更多关于它在做什么的信息吗？
它没有抛出任何错误，但它不起作用。
“它不工作”具体是什么“不工作”
例如<div className="bg-sky-50">Come On </div> 没有改变背景颜色。
你能在代码沙箱中重现这个吗？您可能错过了一些东西，但是如果不查看您的代码库，我们就无法真正找出什么。这是任何人的猜测。

标签： javascript reactjs tailwind-css

【解决方案1】：

试试这个link。

它有为 react 设置顺风的详细可能解释

希望对你有帮助！

【讨论】：