普通 html 项目引入 tailwindcss
项目根目录安装依赖
npm install -D tailwindcss@3 postcss autoprefixer
初始化生成tailwind.config.js
npx tailwindcss init
修改tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {content: ["./index.html"], //根据自己的项目写theme: {extend: {},},plugins: [],
}
package.json 增加如下代码
"scripts": {"build": "npx tailwindcss build styles.css -o output.css"}
最终效果
{"devDependencies": {"autoprefixer": "^10.4.21","postcss": "^8.5.3","tailwindcss": "^3.4.17"},"scripts": {"build": "npx tailwindcss build styles.css -o output.css"}
}执行命令生成 css
npm run build
或者
npx tailwindcss -i ./styles.css -o ./output.css --watch
html 引入 css
<!DOCTYPE html>
<html lang="en"><head><title>Title</title><!-- Required meta tags --><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /><!-- 引入 tailwind --><link rel="stylesheet" href="/output.css" /></head><body></body>
</html>
项目目录
