tailwindcss 通过 npm 安装,并创建您的 tailwind.config.js 文件。
npm install -D tailwindcss npx tailwindcss init
配置您的模板路径
在 tailwind.config.js 文件中添加所有模板文件的路径。
module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], }
将 Tailwind 指令添加到您的 CSS
创建一个css文件,位置随意,比如src/style.css,并且将内容修改为如下:
@tailwind base; @tailwind components; @tailwind utilities;
将已编译的 CSS 文件添加到 <head> 并开始使用 Tailwind 来设置您的内容样式。
<link href="/style.css" rel="stylesheet">
创建构建命令
运行以下命令
npm init -y
现在打开 package.json 文件,添加以下运行脚本:
"scripts": { "build": "tailwindcss -i ./src/style.css -o /style.css --watch" }
这时候只要运行npm run build就可以自动监听你的页面改动并且实时编译了。