01.安装以及基础配置 · 初心（学习笔记）

>[info] 安装以及基础配置 * **官方地址：** https://www.tailwindcss.cn * **安装地址：** https://blog.csdn.net/qq_41091006/article/details/121539796?spm=1001.2101.3001.6650.6&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-6-121539796-blog-121207308.pc_relevant_recovery_v2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-6-121539796-blog-121207308.pc_relevant_recovery_v2&utm_relevant_index=10 1. **创建项目目录** ![](https://img.kancloud.cn/de/a0/dea0f241abc6d43c40fb309bead0be4a_870x263.png) 2. **通过 npm 安装 Tailwind** ~~~shell npm install -D tailwindcss@latest postcss@latest autoprefixer@latest ~~~ ![](https://img.kancloud.cn/ac/73/ac737228f8b3375ab7ff41fdeb50a63d_1158x420.png) 3. **创建 `postcss.config.js` 配置文件** ~~~shell npx tailwindcss init ~~~ ![](https://img.kancloud.cn/e8/82/e8824dbb5f6d5b1187430a40793ebbab_684x116.png) 这将会在您的工程根目录创建一个最小的`tailwind.config.js`文件。 ``` /** @type {import('tailwindcss').Config} */ module.exports = { content: [], theme: { extend: {}, }, plugins: [], } ``` 我们修改content属性，让他能够定位到项目中的html文件的位置，最终内容如下： ``` /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], } ``` 4. **包含 Tailwind 到 CSS 中** 如果尚未创建一个 CSS 文件，请使用 @tailwind 指令注入 Tailwind 的基础 (base)，组件 (components) 和功能 (utilities) 样式： ~~~css /* ./src/static/css/tailwind.css */ @tailwind base; @tailwind components; @tailwind utilities; ~~~ 5. **生成 CSS** ~~~shell npx tailwindcss -i ./src/static/css/tailwind.css -o ./dist/tailwind.css npx tailwindcss -o tailwind.css ~~~ ![](https://img.kancloud.cn/1d/e7/1de735f3218b9ef73d42db0276f41c41_1105x151.png) ![](https://img.kancloud.cn/84/6c/846c16b25809b3737ac0336d0e602506_1190x153.png) 6. **示例** ``` <!doctype html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="../tailwind.css" rel="stylesheet"> </head> <body> <button class="bg-red-500 hover:bg-red-700"> Hover me </button> </body> </html> ```