如何在Django中离线配置Tailwind CSS、Bootstrap及JS文件？

一、先修复Django静态文件基础配置 #

你之前仅配置了模板路径，但静态文件的正确配置才是核心，按以下步骤调整：

1. 修改settings.py中的静态文件相关配置：

   # settings.py
   from pathlib import Path
   
   BASE_DIR = Path(__file__).resolve().parent.parent
   
   # 静态文件访问的URL前缀
   STATIC_URL = '/static/'
   
   # 指定全局静态文件目录（开发阶段生效）
   STATICFILES_DIRS = [
       BASE_DIR / "static",  # 指向你创建的全局static文件夹
   ]
   
   # 部署时收集所有静态文件的目录（开发阶段可忽略，但建议保留）
   STATIC_ROOT = BASE_DIR / "staticfiles"
   

2. 在所有模板文件的最开头加载静态文件标签：

   {% load static %}
   

二、离线集成Bootstrap CSS/JS #

步骤1：准备离线文件 #

从Bootstrap官网下载完整压缩包，解压后将以下文件放入全局static文件夹：

• bootstrap.min.css → 放到static/css/bootstrap.min.css
• bootstrap.bundle.min.js（已内置Popper.js，无需单独下载）→ 放到static/js/bootstrap.bundle.min.js

步骤2：在base.html中引入 #

在模板的<head>中引入CSS，在</body>标签前引入JS：

{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
</head>
<body>
    {% block content %}{% endblock %}

    <!-- 引入Bootstrap JS -->
    <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
</body>
</html>

三、Tailwind CSS集成方案 #

提供两种方案，按需选择：

方案1：离线引入预编译CSS（快速简单） #

• 从Tailwind官网下载预编译的压缩CSS文件（tailwind.min.css），放到static/css/tailwind.min.css
• 在base.html的<head>中引入：

  <link rel="stylesheet" href="{% static 'css/tailwind.min.css' %}">
  

方案2：项目内集成Tailwind CLI（支持自定义配置，推荐） #

这种方式可自定义Tailwind主题、插件等，步骤如下：

1. 安装Node.js后，在项目根目录执行：

   npm init -y
   npm install -D tailwindcss postcss autoprefixer
   

2. 生成Tailwind和PostCSS配置文件：

   npx tailwindcss init -p
   

3. 修改tailwind.config.js，指定模板文件扫描路径：

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       "./templates/**/*.html",  // 项目根目录下的模板文件
       "./**/templates/**/*.html",  // 子应用的模板文件（如果有）
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

4. 在static/css目录下创建input.css，写入：

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

5. 修改package.json的脚本，添加编译命令：

   "scripts": {
     "build:tailwind": "tailwindcss -i ./static/css/input.css -o ./static/css/tailwind.css --watch"
   }
   

6. 运行命令启动编译（开发时保持运行，会自动监听模板变化）：

   npm run build:tailwind
   

7. 在base.html中引入编译后的CSS：

   <link rel="stylesheet" href="{% static 'css/tailwind.css' %}">
   

常见问题排查 #

• 确认{% load static %}已添加到模板开头，无拼写错误
• 检查STATICFILES_DIRS的路径是否正确，可在settings.py中通过print(BASE_DIR / "static")验证实际路径
• 静态文件的存放路径要和{% static %}中的路径完全匹配（比如css/bootstrap.min.css对应static/css/bootstrap.min.css）
• 修改settings.py后，必须重启Django开发服务器

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