HTML怎么做Tailwind配置_html Tailwind CSS自定义配置【汇总】-html教程-PHP中文网

Tailwind 必须通过构建流程配置，CDN 方式仅支持极小范围变体且不生效于 JIT、Purge 等核心能力；唯一合法配置入口是 tailwind.config.js，需用 npx tailwindcss init 初始化，并确保 content 包含 HTML 路径，修改后必须重新运行构建命令。

html怎么做tailwind配置_html tailwind css自定义配置【汇总】

CDN 方式无法真正配置 Tailwind，所有自定义（颜色、断点、变体、任意值）都必须走构建流程。 你看到的 tailwindcss.config = { ... } 是 CDN 的临时 hack，只支持极小范围的变体启用，且不生效于 JIT、Purge、主题扩展等核心能力。

tailwind.config.js 文件必须存在且被正确引用

构建流程启动前，tailwind.config.js 是唯一合法配置入口。它不是“可选”，而是 CSS 生成的源头。没有它，npx tailwindcss -i ./src/input.css -o ./dist/output.css 会用默认配置硬编译，你加的 extend.colors 或 theme.screens 全部忽略。

初始化命令是 npx tailwindcss init，不是 npm init tailwindcss（后者是旧版或混淆写法）
确保 content 字段包含你的 HTML 文件路径，例如 content: ["./src/**/*.html"]，否则自定义类（如 @layer components）不会被扫描到，打包后直接消失
改完配置后必须重新运行构建命令，CDN 不会自动响应文件变化

颜色、间距、字体这些基础扩展必须写在 theme.extend 里

Tailwind 默认只生成预设值（如 blue-500、space-y-4），想加 brand-blue 或 mt-18，不能靠猜 class 名，也不能靠 CDN 配置对象。

正确写法是：

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#1e3a8a',
      },
      spacing: {
        '18': '4.5rem',
      },
      fontSize: {
        'xs': '0.75rem',
        '2xl': '1.5rem',
      }
    }
  }
}

错误做法：在 HTML 里写 text-[#1e3a8a] 就以为能替代配置——它依赖 JIT 模式且只对静态字符串有效；JS 动态拼接 class="text-[${color}]" 会完全失效
加了非标值（如 '7': '1.75rem'）会导致所有带 7 的工具类（mt-7、p-7、gap-7）全部打进 CSS，体积不可控

响应式断点和变体（hover / focus / dark）要按需开启

默认只启用 hover 和 focus 在 backgroundColor、borderColor 等少数属性上。像 md:scale-105、dark:shadow-lg 这类组合，必须显式声明。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

新版（v3.0+）不再需要 variants 字段，统一用 plugins 或 corePlugins 控制；但 hover、focus-within、group-hover 等仍需在 corePlugins 中设为 true
自定义断点写在 theme.extend.screens，例如：
```
screens: {
  'sm': '640px',
  'md': '768px',
  'lg': '1024px',
  'xl': '1280px',
  '2xl': '1536px',
  'print': { 'raw': 'print' },
}
```
注意：HTML 中写的 md:text-xl 必须和这里定义的 md 完全一致，大小写、冒号位置都不能错
dark: 前缀生效前提是标签上有 dark 类，且你在 tailwind.config.js 中启用了 darkMode: 'class'（默认是 'media'）

生产环境禁用 CDN，JIT 编译必须开启 content 扫描

CDN 版本体积大（>3MB）、无 Purge、不支持 @layer、无法解析任意值语法，上线即踩坑。真正可控的配置，只存在于构建产物中。

JIT 模式（v3.0+ 默认）会根据 content 字段扫描所有匹配文件中的 class 字符串，动态生成所需 CSS —— 所以你 HTML 里没出现 hover:from-red-500，它就不会被打包
常见漏配：content 路径写成 ["./src/**/*.{js,ts,jsx,tsx}"] 却忘了加 .html，结果自定义组件类名全丢失
执行构建后检查输出 CSS 文件大小，如果 >200KB，大概率是 content 范围过大或 extend 加了太多非标值

最常被跳过的动作：改完 tailwind.config.js 后没重跑构建，就去浏览器里刷新——它根本不知道你改了什么。配置不是热更新的，它是编译时决定 CSS 输出的开关。