html中使用tailwindcss

845 阅读1分钟

1.在html文件下npm init -y 初始化(前提安装了node)

2.安装tailwindcss

npm i tailwindcss

3.tailwindcss初始化

npx tailwindcss init

4.配置文件修改

// tailwind.config.js module.exports = {   purge: [    './*.html',    './*.js',  ],  }

5.新建tailwind.css填入以下代码(使用 @tailwind 指令注入 Tailwind 的样式)

@tailwind base;@tailwind components;@tailwind utilities;
/*可以添加自己的css类名*/@layer utilities {  .my-bg {    background: red  }}

6.设置将会自动生成css文件的地址
如新建css文件夹下的home.css
路径 ./css/home.css

7.在html中引入css文件

<link rel="stylesheet" href="./css/home.css">

8.html文件下终端执行

npx tailwindcss  -i tailwind.css -o ./cssxin/home.css --watch

(注意路径)

这样会实时监听html使用的tailwindcss的css类名并生成新的css文件,
编写时终端不能关闭。