普通 html 项目引入 tailwindcss

2025/11/10 20:01:22 来源：https://blog.csdn.net/u014617119/article/details/147652990 浏览: 次关键词：普通 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>