Tailwind CSS并没有在我的项目中发挥作用,我试图学习这个新的CSS框架,我按照文档中的说明安装了所有东西,但它


enter code here//I installed and setup the things as instructed in tailwind docs but when I apply tailwind utility classes on my HTML file it is not working could anyone please help

//这是我的src/style.css

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

//我通过命令npm-run-build-css构建脚本,它在公共文件夹中生成了预构建css。在那里我创建了HTML文件index.HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<h1 class="text-orange-700">Hello Jaydeep</h1>
</div>
</body>
</html>
'''
// when I apply tailwind classes in it doesn't work, One more thing I want to mention is that when I included CSS file in HTML then the Fonts and size got changed, but when I applied utility classes style It's not working

如果你根据文档完成了所有操作,你可以做的一件事就是将style.css设置为输入文件,并创建另一个css文件作为输出文件,并在.html中使用该文件,为此,你可以运行以下命令

npx tailwindcss -i src/styles.css --output src/styles/tailwind.css --watch

在这里,它将在上面提到的目录中创建一个名为tailwind.css的输出文件,现在您可以在.html文件中包含src/styles/tailwind.cs。

好吧,由于缺少很多信息,我将尝试帮助执行一些标准步骤

如果您使用的是react native rn,但无法生成tailwind.json,请查看此处

首先,检查您的package.json或您正在运行的命令。

命令应该看起来像这个

tailwind --input path/to/your/css/file.css --output path/to/file/tailwind/will /generte.css

和萨蒂什库马尔·萨胡的回答基本相同,只是用不同的方式解释。

最新更新