NextJS项目中TailwindCSS带tw前缀的响应式样式失效求助

问题原因 #

你当前的响应式类写法错误，当给Tailwind配置了tw-前缀后，响应式变体（sm/md等）需要放在前缀前面，而非将前缀与响应式变体合并书写。

修复步骤 #

1. 确认Tailwind配置文件 #

确保tailwind.config.js中的前缀配置正确，示例如下：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: 'tw-', // 正确配置自定义前缀
  theme: {
    extend: {},
  },
  plugins: [],
}

2. 调整组件中的响应式类写法 #

将原代码里的tw-sm:w-[5rem]、tw-md:w-[10rem]修改为sm:tw-w-[5rem]、md:tw-w-[10rem]，调整后的完整代码如下：

return (
    <div>
        <nav className="bg-light tw-h-[65px] tw-w-full shadow-lg d-flex tw-items-center">
               <AiOutlineMenuUnfold size="2.5rem"/>
            <h4 className="text-primary">Welcome: Tombrown Anuma</h4>
        </nav>
        <Image className="sm:tw-w-[5rem] md:tw-w-[10rem] tw-rounded-full float-end tw-mt-[-3rem]" alt="profile-image" src={ProfilePic}/>
    </div>
);

原理说明 #

Tailwind的响应式前缀属于变体修饰符，优先级高于自定义前缀，正确的类名结构为：{变体修饰符}:{自定义前缀}-{工具类}，这样Tailwind才能正确识别并生成对应的响应式样式。

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