如何在html中正确安装顺风CSS ?



我只是想知道如何正确安装顺风CSS所有我想一步一步来,因为我已经尝试过这样做,但它不能正常工作

我试着从twilwind.com的主要网站复制步骤,但我没有得到正确的安装,我不知道为什么

这是我从

回答的官方文档步骤如下:

  1. 初始化html文件+全局css文件
  2. 使用命令行转到确切的文件夹,然后运行以下命令:
  3. npm install -D tailwindcss;npx tailwindcss init
  4. 一旦配置文件被创建,复制以下内容到里面:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
  1. 现在您已经有了一个配置文件,您需要在全局css文件中复制以下内容:
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. 然后运行以下命令,以便talwind cli为您编译css:
    npx tailwindcss -i global.css -o new_css_file.css --watch
    选项说明:
    -i标志指定输入文件
    -o指定输出
    --watch以保持观察变化(在您的html文件上)并编译到global.css文件

假设你没有安装node.js和npm,我将给你cdn方法。

这里是官方文档链接,这是我从

回答的地方将下面的脚本添加到head标签

<script src="https://cdn.tailwindcss.com"></script>

你应该能够在构建类中使用顺风

如果你想自定义顺风配置在前面的脚本标签下面添加另一个脚本标签例:

<script src="https://cdn.tailwindcss.com"></script>    
<script>
tailwind.config = {
theme: {
extend: {
colors: {
clifford: '#da373d',
}
}
}
}
</script>

将此代码添加到<head>和html中,您必须添加<script>

<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
clifford: '#da373d',
}
}
}
}
</script>

最新更新