React项目升级Tailwind CSS v3后safelist配置位置咨询（purge属性已替换为content）

你完全找对了方向——Tailwind v3确实用content替换了旧的purge属性，但safelist的配置位置也跟着变了：它不再是content（原purge）的子属性，而是直接作为配置对象的一级属性存在！

给你把旧配置改成v3兼容的版本：

module.exports = {
	mode: 'jit',
	content: ['./src/**/*.{js,jsx,ts,tsx}'], // 原purge下的content直接提至顶层
	safelist: [ // 直接将safelist放在配置顶层
		'bg-[#ffffff]',
		'bg-[#d9ffff]',
		'bg-[#cc80ff]',
		'bg-[#c2ff00]',
		'bg-[#ffb5b5]',
		'bg-[#909090]',
		'bg-[#3050f8]',
		'bg-[#ff0d0d]',
		'bg-[#90e050]',
		'bg-[#b3e3f5]',
		'bg-[#ab5cf2]',
		'bg-[#8aff00]',
		'bg-[#bfa6a6]',
		'bg-[#f0c8a0]'
	],
	theme: {
		extend: {},
	},
	plugins: [],
};

补充说明 #

Tailwind v3重构了内容扫描和安全列表的逻辑，把safelist从purge.options中抽离出来作为独立顶层配置项，让配置逻辑更清晰，也和新的content属性形成平级关系。

针对你提到的字符串插值场景（比如<div className={text-white ${props.bg}}></div>），只要把这些动态生成的bg-*类加入顶层safelist，JIT编译器就会保留这些类，不会在构建时将其移除，完全能适配你的业务需求。

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