TailwindCSS v4移除content属性后，如何用CSS优先配置添加外部包源？

在TailwindCSS v4中，tailwind.config.js已被弃用，所有配置需移至CSS文件完成。针对你原来在JS配置中指定的外部模板路径：

// 原 tailwind.config.js
module.exports = {
  content: [
    "./vendor/tales-from-a-dev/flowbite-bundle/templates/**/*.html.twig"
  ],
}

对应的CSS语法如下：

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

// 配置内容扫描路径
@tailwind content [
  "./vendor/tales-from-a-dev/flowbite-bundle/templates/**/*.html.twig"
];

添加外部源文件路径的方式 #

由于v4已完全不支持JS配置文件中的content属性，所有需要Tailwind扫描的模板、组件等文件路径，都要通过CSS文件中的@tailwind content指令来声明。你可以在该指令的数组中添加任意数量的路径，支持通配符匹配：

@tailwind content [
  "./src/**/*.{html,js,ts,vue}",
  "./vendor/tales-from-a-dev/flowbite-bundle/templates/**/*.html.twig"
];

这样Tailwind就能正确扫描到这些外部源文件中的类名，生成对应的样式。

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