Tailwind CSS响应式断点失效问题（Pelican主题环境）

安全阿岳

2026-8-21

解决Pelican主题中Tailwind响应式断点失效问题

以下是针对性的排查和修复步骤：

确认tailwind.config.js配置正确
核心是content路径必须覆盖所有使用Tailwind类的模板/静态文件，Pelican使用Jinja2模板，务必包含对应路径；同时检查screens断点配置未被误修改：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './templates/**/*.html',
    './templates/**/*.jinja2',
    './static/js/**/*.js', // 若JS中动态添加类也需包含
  ],
  theme: {
    extend: {},
    screens: {
      'sm': '640px',
      'md': '768px', // 默认中等断点，确保未被改到过高阈值
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    },
  },
  plugins: [],
}

如果content路径不全，Tailwind JIT模式不会生成未检测到的响应式类。

验证Tailwind构建命令与入口CSS
1. 确保主CSS入口文件（如src/css/main.css）包含完整的Tailwind指令：
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
  缺失@tailwind utilities会导致响应式类无法生成。
2. 检查构建命令是否正确，开发环境命令示例：
```
npx tailwindcss -i ./src/css/main.css -o ./static/css/main.css --watch
```
  生产环境需添加--minify，确保命令输出路径与Pelican引用的CSS路径一致。
清理缓存并重新构建
1. 删除Tailwind缓存目录：rm -rf node_modules/.cache/tailwindcss
2. 重新运行构建命令，确保生成最新的CSS文件。
3. 强制刷新浏览器页面（Ctrl+F5），或在开发者工具中禁用缓存，避免加载旧样式。
排查样式冲突与类拼写
1. 检查HTML中类名拼写，比如是否误写为md:text-green400（缺少横杠）或拼写错误。
2. 用浏览器开发者工具查看元素样式：切换到对应断点尺寸，检查响应式类的样式是否被其他自定义CSS覆盖，若存在覆盖需调整自定义CSS的优先级或修改选择器。