logo标签列表

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

reactjsclass
22

我第一次在React应用中使用Tailwindcss。我按照文档，阅读了一些文章并观看了一些视频。我的React应用程序正在运行，但是Tailwindcss类未反映在应用程序中。我已经多次从头重新启动项目，但仍然面临同样的问题。 这是我的package.json文件：

enter image description here

2
你在代码中导入了Tailwind吗？ - gbalduzzi
2
build:css 命令会创建一个 output.css 文件，但是该文件必须在您的页面中导入，否则它将没有任何效果。 - gbalduzzi
我不确定你所说的导入tailwind是什么意思。你是指导入@tailwind的base、components和utilities吗？因为我已经这样做了。而且我也已经导入了output.css。 - Lihin Ogana
15个回答
48

我不得不升级react-scripts

npm i react-scripts@latest
如果你正在使用 Node 17 并使用遗留选项来使用 create-react-app，这将非常有帮助。 - galo hernandez
13
我所做的是：
  • 将tailwindcss、postcss、autoprefixer和react-scripts的版本升级到最新版。
  • 用以下内容替换tailwind.config文件中的内容
    content: ["./src/**/*.{js,jsx,ts,tsx}", "./index.html"],
13

尝试

import styles from "./index.css"

在你的 .js/.jsx 文件中想要使用 Tailwindcss 时，你需要在 index.css 中包含以下内容。
@tailwind base;
@tailwind components;
@tailwind utilities;
感谢@Gp_，这就是我需要解决我的问题的所有内容。如果使用NextJS，我还应该提到这个导入语句应该在_app.js中。 - Africanfruit
谢谢，这对我很有帮助。我忘记添加index.css文件了。 - Deepak Soni
11
这是因为在Devdependencies中安装了Tailwind导致的。尝试重新安装而不使用-D参数。
没错！这就是我解决这个问题的方法，只需不带 -D 安装即可。 - Anna Costalonga
你不应该需要这样做，但好吧，它起作用了。 - pguardiario
你节省了我的时间：)) - Nightcrawler
7

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

这解决了我的问题。

请参阅文档以了解如何在React应用程序中创建Tailwind CSS：https://tailwindcss.com/docs/guides/create-react-app - Krishnadev. V
7

步骤1 -

按照Tailwind官方步骤中的所有步骤进行操作。

步骤2 -

npm install tailwindcss postcss autoprefixer@^9.8.6

步骤3（适用于TypeScript无需）-

npm install react-scripts@latest

步骤4 -

 npx tailwindcss init -p

步骤5 -

运行你的React应用程序

3
这个解决方案对我不起作用。 - Julius Goddard
3

我安装了postcss和autoprefixer到开发依赖项中，同时与tailwindcss一起使用，这对我很有效。

npm install -D tailwindcss postcss autoprefixer 
npx tailwindcss init -p
3
如果你正在使用craco和webpack 5，你需要在craco.config.js中替换postcss为postcssOptions，例如：
// craco.config.js
module.exports = {
    style: {
        // why use postcssOptions? -> https://github.com/dilanx/craco/issues/353
        postcssOptions: {
            plugins: [
                require('tailwindcss'),
                require('autoprefixer'),
            ],
        },
    },
}

详细信息请查看此问题：https://github.com/dilanx/craco/issues/353 在此输入图片描述

2
做
npm i tailwindcss postcss-cli autoprefixer@^9.8.6
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接