PyCharm Flask 使用 Tailwind CSS 配置
使用 Tailwind CSS
步骤 1：初始化项目
- 在 PyCharm 终端运行：
npm init -y - 安装 Tailwind CSS：
npm install -D tailwindcss postcss autoprefixer - 初始化 Tailwind 配置文件：
这会生成npx tailwindcss inittailwind.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 devmain_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 查看获得