TailwindCss类不反映当我启动live-server

Question

这是我第一次尝试使用顺风css，它是一个麻烦，试图设置它的几天现在没有成功，跟随一个youtube视频的绝对初学者，直到最后一切都很好，直到时间加载实时服务器和类只是不会反映。让我提一下，我没有学过任何js框架，只是香草。我也尝试了他们网站上的官方顺风设置和他们使用vite的官方YouTube视频，仍然没有运气。

my postcss.config.js文件

module.exports = {
plugins: [require("tailwindcss"), require("autoprefixer")],
};

my tailwind config

module.exports = {
content: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
};

我在CSS中也有这个，它反映在输出文件中，我添加了这个导入，因为有人在这里建议它，但仍然不起作用

@import "tailwind/base";
@import "tailwind/components";
@import "tailwind utilities";

Answer 1

您需要告诉tailwind.config.js它应该分发什么内容。例如content: ["./src/pages/*.{html,js}"],。该路径必须是相对于tailwind.config.js所在位置的。

你还需要使用Tailwind的实时编译监视模式，它为所有使用的CSS类解析content:文件，将它们编译成output.css。在你的HTML中，你只需要包含output.css

命令如下:npx tailwindcss -i /path/to/input.css -o /path/to/output.css --watch

input.css是你的原始css文件(你已经把@import)，和output.css是文件，它将生成每次使用的类，所以文件你将加载到你的HTML。