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文件,
编写时终端不能关闭。