如何使用Fluid-Tailwind实现响应式百分比Div（无需手动写Tailwind类）

首先确保fluid-tailwind插件已正确配置到Tailwind配置文件中：

// tailwind.config.js
module.exports = {
  // 其他Tailwind配置项
  plugins: [
    require('fluid-tailwind')
  ]
}

修改布局代码，给两个子div使用正确的流体宽度类，同时父元素添加flex-wrap保证小屏幕下能换行：

<div class="flex flex-wrap">
  <div class="~w-full/1/2">A</div>
  <div class="~w-full/1/2">B</div>
</div>

原写法无效的原因 #

• ~w-2/2/1/2：fluid-tailwind没有w-2/2这个预设类，等价的标准类是w-full，需替换为full
• ~w-[2/2]/[1/2]：插件对2/2的分数解析存在兼容问题，使用full更可靠
• ~sm/md:~w-2/2/1/2：语法错误，fluid-tailwind的响应式流体类无需重复加~前缀，且断点格式不符合插件要求

补充说明 #

~w-full/1/2的作用是：屏幕宽度小于Tailwind默认sm断点（640px）时，元素宽度为100%；屏幕宽度达到sm及以上时，宽度自动过渡为1/2，无需手动编写响应式前缀。

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