TailwindCSS FontAwesome svg 图标未对齐

Question

I am using fontawesome's react icons in a project, and setting up a social links bar. For some reason the first icon in the set doesn't line up right. I think it's due to something I'm doing wrong with tailwindcss, since if I use the same code without tailwind's classes it lines up as expected. I can tweak the svg view port manually and give the first icon a -100 Y value, but I don't think I can manually set these in the fontawesome react component.

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

Is there a change I can make to the CSS to make this render properly?

Answer 1

You need to remove the class space-y-1 as it has the below code:

.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 demo: https://40m92.csb.app/

Output: