PyCharm Flask 使用 Tailwind CSS 配置

使用 Tailwind CSS

步驟 1：初始化項目

在 PyCharm 終端運行：
```
npm init -y
```

安裝 Tailwind CSS：

npm install -D tailwindcss postcss autoprefixer

初始化 Tailwind 配置文件：
```
npx tailwindcss init
```
這會生成 tailwind.config.js。

步驟 2：配置 Tailwind

修改 tailwind.config.js：

/** @type {import('tailwindcss').Config} */
module.exports = {content: ["./src/**/*.{html,js}"], // 指定掃描的文件theme: {extend: {},},plugins: [],
}

創建 src/input.css 并添加 Tailwind 指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

步驟 3：構建 CSS

在 package.json 中添加腳本：

"scripts": {"dev": "tailwindcss -i ./main_app/static/css/input.css -o ./main_app/static/css/output.css --watch"
}

運行構建：
```
npm run dev
```
這會生成 main_app/static/css/output.css，并在文件變化時自動重新編譯。

步驟 4：在 HTML 中使用

在 index.html 中引入生成的 CSS：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Tailwind in PyCharm</title><link href="../static/css/output.css" rel="stylesheet">
</head>
<body><h1 class="text-3xl font-bold text-blue-600">Hello Tailwind!</h1>
</body>
</html>

優化 PyCharm 對 Tailwind 的支持

1. 安裝 Tailwind CSS 插件

File → Settings → Plugins → 搜索 “Tailwind CSS” 并安裝。
提供類名自動補全和懸停提示。

2. 啟用 PostCSS 支持

File → Settings → Languages & Frameworks → Stylesheets → PostCSS
勾選 “Enable PostCSS” 并指定 postcss.config.js（如果有）。

瀏覽器實時預覽

1. 安裝 browser-sync，

點我安裝

快速入門

2. 使用方法

browser-sync start --proxy "localhost:63342" --files "main_app/templates/**/*.html"

其中 http://localhost:63342 可以直接瀏覽器打開 html 查看獲得

注意：

1. Flask app 需要使用debug模式

2. browser-sync 要注意運行路徑和相對路徑

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/79324.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/79324.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/79324.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！