TailwindCSS v4中@source inline白名单失效报错的解决方案咨询

一、构建工具（CLI/PostCSS/Vite）的报错修复 #

你遇到的'@source' paths must be quoted报错，核心是语法格式错误，Tailwind v4对@source inline的写法有明确要求：

• 去掉多余的括号，将匹配模式直接用双引号包裹
• @source指令必须放在@import "tailwindcss"之前（因为@import会触发Tailwind的编译流程，需先声明白名单规则）

修正后的代码：

@source inline "{hover:,}bg-red-{50,{100..900..100},950}";
@import "tailwindcss";

二、浏览器端（CDN版本）的类不生效问题 #

浏览器端的Tailwind CDN版本不支持@source inline语法，需要改用@config指令配置白名单：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.0"></script>
<style type="text/tailwindcss">
@config {
  safelist: [
    "{hover:,}bg-red-{50,{100..900..100},950}",
    "text-3xl"
  ];
}
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>

<div class="text-3xl bg-red-100 hover:bg-red-900">
  Hello World
</div>

说明：

• 通过@config里的safelist数组直接声明需要保留的类或类模式
• 必须显式引入@tailwind base/components/utilities，确保所有样式层都被正确加载

额外验证步骤 #

1. 确认Tailwind v4版本为最新的4.0.x（部分早期预览版可能存在语法兼容问题）
2. 构建工具场景下，检查是否有其他PostCSS插件或Vite插件干扰Tailwind的指令解析

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