TailwindCSS FontAwesome svg 图标未对齐

Posted 2023-02-21

【中文标题】TailwindCSS FontAwesome svg 图标未对齐

【英文标题】：TailwindCSS FontAwesome svg icons not aligned

【发布时间】：2021-07-16 23:10:44

【问题描述】：

我在一个项目中使用了 fontawesome 的 react 图标，并设置了一个社交链接栏。由于某种原因，集合中的第一个图标没有正确排列。我认为这是由于我在使用 tailwindcss 时做错了什么，因为如果我使用相同的代码而不使用 tailwind 的类，它会按预期排列。我可以手动调整 svg 视图端口并给第一个图标一个 -100 Y 值，但我认为我不能在 fontawesome react 组件中手动设置这些。

https://codesandbox.io/s/boring-leftpad-bi0d7?file=/src/App.js

我可以对 CSS 进行更改以使其正确呈现吗？

【参考方案1】：

您需要删除类space-y-1，因为它具有以下代码：

.space-y-1>:not([hidden])~:not([hidden])  /* This selects all elements after the first element */
    --tw-space-y-reverse: 0;
    margin-top: calc(.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.25rem * var(--tw-space-y-reverse));

Codesandbox 演示： https://40m92.csb.app/

输出：