如何在不使用Flask、Django的纯Jinja环境中加载静态CSS文件

前置准备：先编译生成Tailwind静态CSS #

无需依赖任何Web框架，先用Tailwind CLI完成独立编译流程：

• 项目内安装Tailwind依赖：npm install -D tailwindcss
• 生成Tailwind配置文件：npx tailwindcss init
• 修改tailwind.config.js的content字段，匹配所有Jinja模板路径，示例：

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 按实际模板存放路径修改，支持jinja后缀文件扫描
  content: ["./templates/**/*.{html,jinja}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

• 新建Tailwind源CSS文件（示例路径src/input.css），写入基础指令：

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

• 执行编译命令生成最终静态CSS：npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
--watch参数会监听模板文件变动自动重编译，开发阶段可保持运行。

两种无框架依赖的CSS引入方式 #

不需要Flask/Django的static相关加载函数，直接用Jinja原生能力或静态路径引入即可：

方式1：硬编码静态路径引用 #

如果渲染后的HTML会和CSS文件一同部署，直接在模板的<head>标签内写对应路径即可：

<head>
  <meta charset="UTF-8">
  <title>页面标题</title>
  <!-- 路径改为CSS文件相对于渲染后HTML的实际路径即可 -->
  <link rel="stylesheet" href="/dist/output.css">
</head>

本地预览可使用相对路径，部署时替换为线上绝对路径即可。

方式2：内联CSS到模板 #

适合需要单HTML文件输出、不想维护静态资源路径的场景：

1. 手动复制：小项目可直接将编译后的output.css内容复制到模板的<style>标签内。
2. 用Jinja原生include语法加载：将编译后的output.css放到Jinja模板搜索路径下，直接引入即可，无需额外扩展：

<head>
  <meta charset="UTF-8">
  <title>页面标题</title>
  <style>
    {% include "output.css" %}
  </style>
</head>

需确保Jinja初始化时配置的Loader（如FileSystemLoader）的搜索目录包含output.css的存放路径，若CSS放在模板子目录assets下，写法改为{% include "assets/output.css" %}即可。

验证 #

渲染Jinja模板得到最终HTML后，打开文件检查样式是否生效，修改模板内Tailwind类名后，编译进程会自动更新CSS，刷新页面即可看到变更。

内容的提问来源于stack exchange，提问作者penntreetz