当前 react 19 和 tailwind 4.1.3 配合时,并没有安装 @tailwindcss/postcss 的插件。
安装后将,将 tailwind 的样式都附带一个前缀。
经实践,当你使用第三方的组件库比如 shadcn 时,更改 prefix 并没有用,导致样式不可用。
import postcssPrefixSelector from 'postcss-prefix-selector'; // 使用 import
import autoprefixer from 'autoprefixer'; // 同样使用 import
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: [
autoprefixer, // 自动前缀
postcssPrefixSelector({
prefix: '.my-namespace', // 设置命名空间前缀
transform: (prefix, selector) => {
// 你可以自定义如何处理选择器
if (selector.startsWith(':root')) {
return selector; // 不处理 :root
}
return `${prefix} ${selector}`;
},
}),
],
};
export default config;