如何忽略 Tailwind CSS 中的链接组件？答案

【问题标题】：How to ignore Link component in Tailwind CSS?如何忽略 Tailwind CSS 中的链接组件？
【发布时间】：2021-09-11 03:34:47
【问题描述】：

<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}`}>
                                        <img src={item.image} alt="" className="w-1/5 p-2" />
                                    </Link>
                                    <Link to={`products/${item.productId}`}>
                                        <div className="w-3/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>

出于某种原因，tailwind 正在将 flex 应用于我在 React 中的链接组件。因此，它不是 5 个项目/列（图像/名称/价格/数量/删除按钮），而是将 Link 组件视为另一个弹性项目。

如何删除或让顺风忽略链接组件或任何其他组件？因为链接或提供者标签等不是 HTML 元素，而是顺风这样对待它？

【问题讨论】：

标签： reactjs tailwind-css

【解决方案1】：

实际上我发现我必须将 css Classnames 从图像移动到 Link 组件..

不确定这是否是最佳做法，但它确实在视觉上解决了问题

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。