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> ```