当前位置：首页 > article >正文

PyCharm Flask 使用 Tailwind CSS v3 配置

article 2026/1/17 6:16:56

安装 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 要注意运行路径和相对路径

PyCharm Flask 使用 Tailwind CSS v3 配置

安装 Tailwind CSS 步骤 1：初始化项目在 PyCharm 终端运行：npm init -y安装 Tailwind CSS：npm install -D tailwindcss3 postcss autoprefixer初始化 Tailwind 配置文件：npx tailwindcss init这会生成 tailwind.config.js。步…...

编程日记 2026/1/13 19:08:12

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

目录引言一、获取节点信息 1.1 获取属性 1.2 获取文本值 1.3 获取ID、位置、标签名、大小二、切换Frame 三、延时等待 3.1 隐式等待 3.2 显式等待四、前进后退五、Cookies 六、选项卡管理七、异常处理引言这一节我们继续讲解Selenium的使用下篇&#xff0…...

编程日记 2026/1/16 11:55:20

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

第2章 Ability的开发本章内容本章介绍HarmonyOS的核心组件Ability的开发。 2.1 Ability概述 2.2 FA模型介绍 2.3 Stage模型介绍 2.4 Ability内页面的跳转和数据传递 2.5 Want概述 2.6 实战：显式Want启动Ability 2.7 实战：隐式Want打开应用管理 2.8 小结 2.9 习题 2.1 Abili…...

编程日记 2025/12/30 10:12:11

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

java第一个程序 1、新建一个文件，以.java为结尾2、用编辑器打开后写入代码（本人写前端，所以用vscode，也可用其他）3、编译文件4、运行文件5、HelloWorld代码解释6、文档注释 1、新建一个文件，以.java为结尾 …...

编程日记 2025/12/30 15:17:05

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

RK3562 是 Rockchip 新一代 64 位处理器 RK3562（Quad-core ARM Cortex-A53，主频最高 2.0GHz），最大支持 8GB 内存；内置独立的 NPU，可用于轻量级人工智能应用，RK3562 拥有 PCIE2.1/USB3.0 OTG/…...

编程日记 2026/1/16 21:16:11

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

对于喜欢读书的伙伴们，应该都听说过z站（z-library），优点多多，缺点就是地址不稳定，经常会变化网站地址。然后我最近发现了一个工具，可以不间断更新官方可用的z站地址：电子书最新地址...

编程日记 2026/1/12 19:35:43

常见MQ及类MQ对比：Redis Stream、Redis Pub/Sub、RocketMQ、Kafka 和 RabbitMQ

常见MQ及类MQ对比基于Grok调研 Redis Stream、Redis Pub/Sub、RocketMQ、Kafka 和 RabbitMQ 关键点： Redis Pub/Sub 适合简单实时消息，但不持久化，消息可能丢失。Redis Stream 提供持久化，适合需要消息历史的场景，但…...

编程日记 2025/11/30 23:49:41

Kaggle-Bag of Words Meets Bags of Popcorn-(二分类+NLP+Bert模型)

Bag of Words Meets Bags of Popcorn 题意： 有很多条电影评论记录，问你每一条记录是积极性的评论还是消极性的评论。数据处理： 1.首先这是文件是zip形式，要先解压，注意sep ‘\t’。 2.加载预训练的 BERT 分词器 …...

编程日记 2025/12/2 6:30:14

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

1、背景公司新项目使用SpringBoot3.0以上构建，其中需要对外输出接口文档。接口文档一方面给到前端调试，另一方面给到测试使用。 2、SpringDoc 是什么？ SpringDoc 是一个基于 Spring Boot 项目的库，能够自动根据项目中的配置、…...

编程日记 2026/1/16 4:07:42

Json 在线格式化 - 加菲工具

Json 在线格式化打开网站加菲工具选择“Json 在线格式化” 或者直接进入 https://www.orcc.top/tools/json 输入Json，点击左上角的“格式化”按钮得到格式化后的结果...

编程日记 2026/1/12 15:52:12

React 列表渲染基础示例

React 中最常见的一个需求就是「把一组数据渲染成一组 DOM 元素」，比如一个列表。下面是我写的一个最小示例，目的是搞清楚它到底是怎么工作的。示例代码 // 定义一个静态数组，模拟后续要渲染的数据源 // 每个对象代表一个前端框架&#xf…...

编程日记 2025/12/5 5:18:44

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

Monitor作用 Monitor的作用就是来监听状态变量的值变化的。被Monitor修饰的函数，会在其对应监听的变量发生值的变化时，回调此函数，从而可以让您知道是什么值发生变化了，变化前是什么值，变化后是什么值。 V1版本的装饰器，有个叫@Watch的装饰器，其实也有监听变化的能力，…...

编程日记 2026/1/8 7:51:58

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

效果图 .wxml <view class"text" style"--deg:{{deg}}deg;"><view>混合父级颜色</view> </view> <view class"fill {{status?action:}}">文字颜色填充</view> <button bind:tap"setStatus"…...

编程日记 2026/1/15 18:22:14

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

网络分层模型 1.OSI七层模型国际标准化组织提出的一个网络分层模型，总共有七层，其大体功能以及每一层分工如下所示： 每一层都专注做一件事，并且每一层都需要下一层提供的功能。 OSI七层模型七层结构体系清晰，理论完整…...

编程日记 2026/1/13 22:09:07

二叉树理论基础

二叉树种类满二叉树：每个非叶子节点都有且只有两个子节点。和完全二叉树：除了最底层外，其他各层都是满的；最底层的节点都集中在左侧。二叉搜索树：对于任意节点 u，左子树上所有节点的值都小于 u.val…...

编程日记 2025/12/31 7:10:37

再读bert（Bidirectional Encoder Representations from Transformers）

再读 BERT，仿佛在数字丛林中邂逅一位古老而智慧的先知。初次相见时，惊叹于它以 Transformer 架构为罗盘，在预训练与微调的星河中精准导航，打破 NLP 领域长久以来的迷雾。而如今，书页间跃动的不再仅是 Attention 机制精…...

编程日记 2026/1/8 7:51:18

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

文章目录系统架构中断管理ARM中断寄存器相关知识ucos中断机制系统架构 ucos主要包含三个部分的源码： 1、OS核心源码及其配置文件（ucos源码） 2、LIB库文件源码及其配置文件（库文件，比如字符处理、内存管理&#xff0…...

编程日记 2026/1/15 2:53:04

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

一.基本介绍噪声：指图像中的一些干扰因素，也可以理解为有那么一些点的像素值与周围的像素值格格不入。常见的噪声类型包括高斯噪声和椒盐噪声。滤波器：也可以叫做卷积核 - 低通滤波器是模糊，高通滤波器是锐化 - 低通滤波器就…...

编程日记 2026/1/8 7:52:07

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

目录 6、细节描述 6.1预览 6.2功能框图 6.3 特征描述 6.3.1输入保护 6.3.1 EMI抑制 6.3.3 温度保护 6.3.4 容性负载和稳定性 6.3.5 共模电压范围 6.3.6反相保护 6.3.7 电气过载 6.3.8 过载恢复 6.3.9 典型规格与分布 6.3.9 散热焊盘的封装 6.3.11 Shutdown 6.4…...

编程日记 2026/1/13 6:45:45

用 Deepseek 写的uniapp油耗计算器

下面是一个基于 Uniapp 的油耗计算器实现，包含 Vue 组件和页面代码。 1. 创建页面文件在 pages 目录下创建 fuel-calculator 页面：  <template><view class"container"…...

编程日记 2026/1/13 2:36:39

示例服务类 app\common\lib\captcha <?php namespace app\common\lib\captcha;use think\facade\Cache; use think\facade\Config; use Exception;class Captcha {private $im null; // 验证码图片实例private $color null; // 验证码字体颜色// 默认配置protected $co…...

编程日记 2026/1/15 2:33:17

【k8s系列4】工具介绍

1、虚拟机软件 vmware workstation 2、shell 软件 MobaXterm 3、centos7.9 下载地址 （https://mirrors.aliyun.com/centos/7.9.2009/isos/x86_64/?spma2c6h.25603864.0.0.374bf5adOaiFPW） 4、上网软件...

编程日记 2026/1/8 7:51:30

微博辐射源和干扰机

微波辐射源和干扰机是电子战和通信领域中的两个重要概念，它们在军事、民用及科研中具有广泛应用。以下是两者的详细解析及其相互关系： ‌1. 微波辐射源‌ ‌定义‌： 微波辐射源是指能够主动发射微波（频率范围通常为 ‌300 MHz&…...

编程日记 2026/1/14 23:32:27

计算机网络——网络模型

一、OSI七层模型 （1）客户端发送请求时 OSI 七层模型的运作流程应用层（Application Layer） 用户通过浏览器输入URL（如https://example.com），根据协议类型（HTTP/HTTPS）确…...

编程日记 2025/11/11 21:23:55

Spark-SQL核心编程2

路径问题相对路径与绝对路径：建议使用绝对路径，避免复制粘贴导致的错误，必要时将斜杠改为双反斜杠。数据处理与展示 SQL 风格语法：创建临时视图并使用 SQL 风格语法查询数据。 DSL 风格语法：使用 DSL 风格语法查询…...

编程日记 2026/1/15 7:22:27

Java 序列化与反序列化终极解析

Java 序列化与反序列化终极解析 1. 核心概念 (1) 什么是序列化？ 定义：将对象转换为字节流的过程（对象 → 字节） 目的： 持久化存储（如保存到文件） 网络传输（如RPC调用&#xff09…...

编程日记 2025/11/14 20:09:26

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

写这个文章是用来学习的,记录一下我的学习过程。希望我能一直坚持下去,我只是一个小白,只是想好好学习,我知道这会很难，但我还是想去做！ 本文写于：2025.04.18 STM32开发板学习——第41节: [12-1] Unix时间戳前言开发板说明引用解答和科普一…...

编程日记 2026/1/8 7:51:39

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

一、自主导航与路径规划技术要点 1. 传感器融合 GPS/北斗定位：提供全局定位，但在室内或遮挡环境下易失效。惯性测量单元（IMU）**：通过加速度计和陀螺仪实时追踪姿态，弥补GPS信号丢失时的定位空缺。 …...

编程日记 2026/1/8 7:51:22

AI绘画SD中，如何保持生成人物角色脸部一致？Stable Diffusion精准控制AI人像一致性两种实用方法教程！

在AI绘画StableDiffusion中，一直都有一个比较困难的问题，就是如何保证每次出图都是同一个人。今天就这个问题分享一些个人实践，大家和我一起来看看吧。一. 有哪些实现方式方式1：固定Seed种子值。固定Seed种子值出来的图片人…...

编程日记 2026/1/13 0:34:30

java 设计模式策略模式

简介策略模式（Strategy Pattern）是一种行为设计模式，旨在定义一系列算法，并将每一个算法封装起来，使它们可以互相替换。策略模式让算法的变化独立于使用算法的客户端。换句话说，策略模式通过将不同的算法…...

编程日记 2026/1/6 20:31:05