需要注意:
html文件中引入的是output.css input.css写那三行预留的就可以了
打包的时候只要打包html output.css img文件夹句ok,其他都不用
原理是运行时生产output.css文件,直接
【注意!注意!注意!class="xxxx" 不要用className=“Xxxxx‘ 那是react的写法不行的】
要用
使用 npm 或者 pnpm 安装
# 使用 npm 安装
npm init
npm i -D tailwindcss postcss autoprefixer
# 使用 pnpm,节省硬盘空间
npm i -g pnpm
pnpm init
pnpm i -D tailwindcss postcss autoprefixer
生成配置文件
# 初始化配置文件
npx tailwindcss init -p
编辑 tailwind.config.js
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./**/*.html"], // 根据实际情况设置路径
theme: {
extend: {},
},
plugins: [],
};
新建样式文件(例如input.css)并写入:
// input.css
@tailwind base;
@tailwind components;
@tailwind utilities;
在页面中引用最终样式,例如output.css
// index.html
<link rel="stylesheet" href="./output.css" />
在终端运行命令,可选参数 –minify 进行压缩:
npx tailwindcss build -i input.css -o output.css --watch --minify
然后编辑页面标签里写入预置的样式名,
// index.html
...
<div class="container mx-auto"></div>
...
或者编辑input.css再保存文件即可。
// input.css
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
@apply bg-slate-200;
}
也可以改成编辑package.json
// package.json
...
"script": {
"dev": "npx tailwindcss -i input.css -o output.css --watch",
"build": "npx tailwindcss -i input.css -o output.css --minify"
}
...
编辑时运行(必须保持运行,如果出错导致自动退出则需重新运行):
npm run dev
编辑完,进行压缩
npm run build