css - TailwindCSS FontAwesome svg 图标未对齐

Question

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

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

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

标签： cssreactjsfont-awesometailwind-css

Answer 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/

输出：