PyCharm Flask 使用 Tailwind CSS v3 配置

news2025/4/19 19:37:33

安装 Tailwind CSS

步骤 1：初始化项目

在 PyCharm 终端运行：
```
npm init -y
```

安装 Tailwind CSS：

npm install -D tailwindcss@3 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 ./src/input.css -o ./src/output.css --watch"
}

运行构建：
```
npm run dev
```
这会生成 src/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="../src/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:5000" --files "main_app/templates/**/*.html"

其中 http://localhost:63342 可以直接浏览器打开 html 查看获得

注意：

1. Flask app 需要使用debug模式

2. browser-sync 要注意运行路径和相对路径

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2338214.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

PyCharm Flask 使用 Tailwind CSS v3 配置

安装 Tailwind CSS

步骤 1：初始化项目

步骤 2：配置 Tailwind

步骤 3：构建 CSS

步骤 4：在 HTML 中使用

优化 PyCharm 对 Tailwind 的支持

1. 安装 Tailwind CSS 插件

2. 启用 PostCSS 支持

浏览器实时预览

1. 安装 browser-sync，

2. 使用方法

注意：

1. Flask app 需要使用debug模式

2. browser-sync 要注意运行路径和相对路径

相关文章

Python爬虫第17节-动态渲染页面抓取之Selenium使用下篇

HarmonyOS 第2章 Ability的开发，鸿蒙HarmonyOS 应用开发入门

day2-小白学习JAVA---java第一个程序

Rockchip 新一代 64 位处理器 RK3562--九鼎开发板

z-library电子图书馆最新地址的查询方法

Spring Boot 3 + SpringDoc：打造接口文档

Json 在线格式化 - 加菲工具

HarmonyOS-ArkUI V2装饰器： @Monitor装饰器：状态变量修改监听

微信小程序文字混合、填充动画有效果图

【计算机网络 | 第一篇】计算机网络基础知识

再读bert（Bidirectional Encoder Representations from Transformers）

uCOS3实时操作系统（系统架构和中断管理）

图像预处理-图像噪点消除

6.数据手册解读—运算放大器（二）

用 Deepseek 写的uniapp油耗计算器

thinkphp实现图像验证码

【k8s系列4】工具介绍

Spark-SQL核心编程2

STM32单片机入门学习——第41节: [12-1] Unix时间戳

无人机自主导航与路径规划技术要点！