【发布时间】：2021-11-06 01:51:14
【问题描述】：
我想第一次使用tailwind css框架，我尝试尽可能接近他们页面上的教程，但它没有对我的网页进行任何更改，我不知道为什么。 由于我非常缺乏经验，我想我错过了安装或做某事，因为这是我第一次为我的项目使用框架。 我也是第一次开始使用 Visual Studio Code，我有点不知所措。
我现在得到了什么：
安装了 node.js，因为我在某个地方读到了需要它用于顺风 css，似乎可以工作 node --version 命令发送结果。
将目录更改为我的项目文件夹后，在 vs 终端中使用 npx tailwindcss init 在我的项目文件夹中安装了 tailwind css（项目文件夹位于 XAMPP 的 HTDOCS 文件夹中） . 现在我还有一个 node_modules 文件夹和一个 tailwind.config.js
添加
<link rel="stylesheet" href="style.css" type="text/css">
在我的 home.html 和
@tailwind base;
@tailwind components;
@tailwind utilities;
到我的 style.css
然后我尝试添加
class="bg-green-500"
到 home.html 中的我的正文，它显示在编辑器中，但不在网站上...
我错过了什么？ 感谢您的帮助。
【问题讨论】：
-
你创建tailwind.config.js文件了吗？
-
它是aout生成的，我只将目录添加到purge部分：module.exports = { purge: [ './home.html', './code.js', ], darkMode : false, // 或“媒体”或“类”主题：{扩展：{}，}，变体：{扩展：{}，}，插件：[]，}
-
您需要 liveserver 插件，这样您就可以让您的网站自动刷新，这是最简单的方法。如果您不想这样做并且仍想继续使用 XAMP，则必须将 ALL 路径更改为相对路径，例如
href="style.css"为href="/style.css" -
非常感谢，至少这有助于使正常的 css 正常工作，但 tailwind 仍然无法正常工作。
-
尝试运行
npx命令npx tailwindcss -o tailwind.css这将创建一个包含所有类的顺风构建文件。但很可能智能感知会起作用。
标签： html css visual-studio-code tailwind-css