如何让Tailwind CSS忽略React中的Link等非原生HTML组件？

问题根源 #

首先纠正一个认知误区：Tailwind 不会主动给任何自定义组件附加默认样式，所有样式仅会作用于你主动添加了className的元素，不存在「Tailwind 识别自定义组件并自动应用样式规则」的情况。

你遇到的布局异常是 flex 布局的原生特性：flex 容器的所有直接子节点，不管是原生HTML标签还是React自定义组件最终渲染的DOM标签，都会自动成为flex子项参与排列。你当前的写法里，两个Link是外层flex容器的直接子节点，自然会被算作两个独立的布局项，而你把w-1/5、w-3/5等宽度类加在了Link的内部元素上，宽度是相对于Link本身而非外层flex容器计算的，自然达不到预期效果。

解决方案 #

方案1：给Link组件直接加宽度类 #

React Router的Link组件默认会透传你传入的className到内部渲染的a标签上，直接把宽度类加在Link上即可：

<div key={item.productId} className="cart-item flex flex-col md:flex-row items-center border-2 border-gray-400 border-opacity-10 my-3 p-3">
  <Link to={`products/${item.productId}`} className="w-1/5 p-2">
    <img src={item.image} alt="" className="w-full" />
  </Link>
  <Link to={`products/${item.productId}`} className="w-3/5 text-center p-6">
    <div>{item.name}</div>
  </Link>
  <div className="px-4">${item.price.toFixed()}</div>
  <div className="px-4 qty-select">
    <label htmlFor="qty">Qty</label>
    <select name="qty" >
      <option value={item.qty} defaultValue>{item.qty}</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </div>
  <button onClick={() => {deleteCartHandler(item.productId)}} className="p-2"><i className="fas fa-trash-alt"></i></button>
</div>

方案2：合并指向相同地址的Link #

两个相邻Link指向同一个地址属于语义不佳的写法，你可以把图片和商品名统一包在同一个Link里，Link内部再做flex布局，减少flex子项数量：

<div key={item.productId} className="cart-item flex flex-col md:flex-row items-center border-2 border-gray-400 border-opacity-10 my-3 p-3">
  {/* 单个Link包裹图片和商品名，作为一个flex子项 */}
  <Link to={`products/${item.productId}`} className="flex items-center w-4/5">
    <img src={item.image} alt="" className="w-1/5 p-2" />
    <div className="w-4/5 text-center p-6">{item.name}</div>
  </Link>
  <div className="px-4">${item.price.toFixed()}</div>
  <div className="px-4 qty-select">
    <label htmlFor="qty">Qty</label>
    <select name="qty" >
      <option value={item.qty} defaultValue>{item.qty}</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </div>
  <button onClick={() => {deleteCartHandler(item.productId)}} className="p-2"><i className="fas fa-trash-alt"></i></button>
</div>

特殊情况处理 #

如果你遇到不支持透传className的第三方自定义组件，只需要在组件外包裹一层原生的div/span标签，把布局相关的类加在这个原生容器上即可，不需要修改任何Tailwind配置。

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