TailwindCSS FontAwesome svg 图标未对齐

Question

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

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

我可以对 CSS 进行更改以正确渲染吗？

Answer 1

您需要删除 class 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/

输出：

TailwindCSS FontAwesome svg 图标未对齐

TailwindCSS FontAwesome svg icons not aligned

css

font-awesome

reactjs

tailwind-css