Flowbite Button组件size属性仅作用于文本，内部Div样式不生效求助

当为Flowbite的Button组件设置size="sm"属性时，仅按钮内的文本样式发生变化，内部嵌套的div元素的宽度、高度、内边距均保持原有状态。尝试在主题配置的size.sm中添加div相关的类名，但未生效：

size: {
  sm: 'text-sm div:w-[72px] div:py-5 div:px-4',
},

相关组件代码：

<Flowbite theme={{theme}}>
  <Button color="light" pill={true} size="sm">
    <span className='group-hover:underline flex flex-nowrap flex-shrink-0'>Content</span>
    <div className='bg-red-700 rounded-[50px] py-8 px-7 w-[125px] relative h-10 ease-in-out duration-300 group-hover:bg-white border-2 group-hover:border-red-700'>
      <img src={whiteArrow} alt="White Icon" className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3/5 group-hover:hidden' />
      <img src={redArrow} alt="Red Icon" className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3/5 hidden group-hover:block'/>
    </div>
  </Button>
</Flowbite>

Flowbite主题配置中size字段的类会直接添加到Button的根元素上，而你使用的div:w-[72px]这种写法属于Tailwind嵌套选择器变体，默认情况下Tailwind不支持这种语法，必须启用@tailwindcss/nesting插件并正确配置PostCSS才能生效。如果没配置嵌套插件，这些类不会被解析，自然无法作用到内部div上。

方法1：启用Tailwind嵌套插件 #

1. 安装依赖：

   npm install @tailwindcss/nesting postcss-nesting --save-dev
   

2. 在postcss.config.js中配置：

   module.exports = {
     plugins: {
       '@tailwindcss/nesting': {},
       tailwindcss: {},
       autoprefixer: {},
     },
   }
   

3. 重启项目后，主题配置中的div:xxx类就能正确作用到Button内部的div元素上。

方法2：使用全局CSS后代选择器 #

如果不想配置嵌套插件，直接写全局CSS控制size为sm的Button内部div：

1. 在全局CSS文件（如globals.css）中添加：

   .btn-sm div {
     @apply w-[72px] py-5 px-4;
   }
   

   （btn-sm是Flowbite为size="sm"的Button自动添加的类名）
2. 调整主题配置，移除无效的div:xxx类：

   size: {
     sm: 'text-sm',
   },
   

方法3：动态绑定内部div的类 #

直接根据Button的size属性给内部div动态切换样式类，直观且无需额外配置：

<Flowbite theme={{theme}}>
  <Button color="light" pill={true} size="sm">
    <span className='group-hover:underline flex flex-nowrap flex-shrink-0'>Content</span>
    <div className={`bg-red-700 rounded-[50px] relative h-10 ease-in-out duration-300 group-hover:bg-white border-2 group-hover:border-red-700 ${size === 'sm' ? 'w-[72px] py-5 px-4' : 'w-[125px] py-8 px-7'}`}>
      <img src={whiteArrow} alt="White Icon" className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3/5 group-hover:hidden' />
      <img src={redArrow} alt="Red Icon" className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3/5 hidden group-hover:block'/>
    </div>
  </Button>
</Flowbite>

方法4：自定义Button类+后代选择器 #

给Button添加自定义类，再通过全局CSS控制内部元素：

1. 修改Button组件：

   <Button color="light" pill={true} size="sm" className="btn-custom-icon-container">
     {/* 内部元素 */}
   </Button>
   

2. 在全局CSS中添加：

   .btn-custom-icon-container div {
     @apply w-[72px] py-5 px-4;
   }
   

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