Tailwind 类安装后不工作
Dro*_*rag 34 html css tailwind-css
我尝试使用CSS，我只是使用npm安装tailwindcss，然后构建css并提供output.css。但是，当我在按钮中使用 bg-black 类进行测试时，它仍然无法正常工作。
我使用的构建命令
tailwindcss -i ./src/style.css -o ./dist/output.css将其放入 package.json 中的脚本中
目录文件路径：
在src/style.css
@tailwind base;
@tailwind components;
@tailwind utilities;
在tailwind.config.js
theme: {
extend: {
// ...
},
},
plugins: [],
}
在dist/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">
<link rel="stylesheet" href="output.css">
<title>Learn Tailwind</title>
</head>
<body>
<div class="container">
<button class="bg-black">Awesome</button>
</div>
</body>
</html>
浏览器中的 HTML 结果：
Cod*_*ech 46
您只需更改 style.css 中的以下代码即可运行。
由此
@tailwind base;
@tailwind components;
@tailwind utilities;
对此
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
其余代码保持不变。只需要更改上述内容即可。这通常发生在 Tailwind v3 中。
希望答案对您有帮助。
- 我必须这样做才能让 Tailwind 在使用“--css tailwind”制作的全新 Rails 7 应用程序中工作。我很想知道它是如何工作的以及为什么它不能“开箱即用” (2认同)
- 大家好，以上解决方案兼容新旧版本的 tailwind css。出现此问题的原因是tailwind版本与您使用的框架版本不兼容。希望能帮助到你。 (2认同)
小智 34
更新（2022 年 12 月）：顾名思义，请尝试重新启动编辑器。我检查了所有内容（配置、导入），但它不起作用。当我重新启动编辑器 (VSCode) 时，类被识别。
原来的：
我遇到过同样的问题。它与你的 tailwind.config.js 有关。确保你有指向使用 tailwind 的 html 文件的内容列表。（请参阅下面的代码以查看下一级带有 html 的所有文件）
然后运行命令：
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
确保您不会收到任何有关无效路径的警告消息。
module.exports = {
content: ['./*/*.html', ],
theme: {
extend: {},
},
plugins: [],
}
- 这个提示帮助了我。如果您将 tailwind 与 vue 一起使用，请不要忘记在此处插入 .vue 扩展名。这是我的内容数组（使用启用了 ts 的 vite）： content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx,vue}", ], (2认同)
san*_*ani 15
转到
tailwind.config.js文件。在第一行，您会发现content，添加 html 文件的位置
Run Code Online (Sandbox Code Playgroud)module.exports = { content: ['./index.html'], theme: { extend: { primary : '#243c5a', secondary : { 100: '#243c5a', } }, }, plugins: [], }转到 cmd 并运行命令
npm run build-css来重建并显示代码中的任何错误。
在这里阅读更多内容
小智 5
我们需要编辑文件夹文件global.css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
小智 5
一般来说，tailwindcss 不建议使用动态类，因为他们在文档中提到这里是一个链接。
\n\n\n不要动态构造类名：
\n
<div class="text-{{ error ? \'red\' : \'green\' }}-600"></div>\n在上面的示例中，字符串 text-red-600 和 text-green-600 不存在，因此 Tailwind 将不会生成这些类。
\n相反，请确保您使用的任何类名\xe2\x80\x99 都完整存在：
\n\n\n始终使用完整的类名
\n
<div class="{{ error ? \'text-red-600\' : \'text-green-600\' }}"></div>\n小智 2
我看到您在代码中导入了“output.css”，但您必须导入 tailwind css 文件。前任：
<link rel="stylesheet" href="src/style.css">
请参阅文档： https: //tailwindcss.com/docs/installation