tailwindcss 无法在 create-react-app 中工作

Question

我是第一次使用 tailwindcss，尤其是在 React 应用程序中。我遵循了文档，阅读了一些文章并观看了一些视频。我正在运行我的反应应用程序，但 tailwindcss 类不会反映在应用程序上。我已经多次从头开始重新启动该项目，但仍然面临同样的问题。这是我的 package.json

Answer 1

我必须升级反应脚本

npm i react-scripts@latest

Answer 2

尝试

import styles from "./index.css"

在您想要使用 Tailwindcss 的 .js/.jsx 中

你的index.css必须包含

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

Answer 3

我所做的是

• 将 tailwindcss、postcss、autoprefixer 和 React-scripts 版本更新到最新版本。
• 将 tailwind.config 内容替换为

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

Answer 4

发生这种情况是因为在开发依赖项中安装了 tailwind。尝试不带 -D 重新安装

Answer 5

步骤1 -

遵循顺风官方步骤中的所有步骤

第2步 -

npm install tailwindcss postcss autoprefixer@^9.8.6

步骤 3（打字稿不需要）-

npm install react-scripts@latest

步骤4 -

 npx tailwindcss init -p

步骤 5 -

运行你的反应应用程序

Answer 6

对于 React 应用程序，有专门的 tailwind CSS 文档。在tailwind.config.js里面module.exports将内容从改为content: ["./src/**/*.{html,js}"]这样

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

这解决了我的问题

Answer 7

我通过重新安装 autoprefixer@^9.8.6 解决了这个问题。该视频正确地指出了https://youtu.be/v6Sy6VP2yOc