Gatsby (v3) + Tailwind is not very easy to use together. We needed to leverage twin.macro in order to use it.
However, in doing so, it seemed that we would have had to forfeit some crucial Tailwind features, such as customizing the theme, or adding custom keyframes. Neither of these features appeared to work as intended; VS Code intellisense detected the newly-defined objects, implying the setup was correct, but Gatsby (or, possibly, twin.macro) simply wouldn't find most of the TailwindCSS classes.
Additionally, TailwindCSS purge did not appear to work, meaning it was not possible to prune unused styles from the site.
I believe it may still be possible to use TailwindCSS in Gatsby sites, but it seems too steep of a time investment with too many detrimental tradeoffs to be worth it. Most of what we wanted to accomplish through TailwindCSS can instead be accomplished through Styled Components.
Performance notes
This change led to a significantly-smaller site size; the Cypress tests used to take almost 3-4 seconds per test at times, but are now consistently taking around 1 second (or less) to complete.
Negative impacts
Many of the styles were apparently leaning on some built-in features of TailwindCSS (or, there are some errors left to sift through - Styled Components doesn't appear to validate classes, unfortunately). As a result, many styles will seem a bit off. With that said, they weren't perfect to begin with, so it shouldn't matter too much. There is still much to be done!
Gatsby (v3) + Tailwind is not very easy to use together. We needed to leverage
twin.macroin order to use it.However, in doing so, it seemed that we would have had to forfeit some crucial Tailwind features, such as customizing the theme, or adding custom keyframes. Neither of these features appeared to work as intended; VS Code intellisense detected the newly-defined objects, implying the setup was correct, but Gatsby (or, possibly,
twin.macro) simply wouldn't find most of the TailwindCSS classes.Additionally, TailwindCSS purge did not appear to work, meaning it was not possible to prune unused styles from the site.
I believe it may still be possible to use TailwindCSS in Gatsby sites, but it seems too steep of a time investment with too many detrimental tradeoffs to be worth it. Most of what we wanted to accomplish through TailwindCSS can instead be accomplished through Styled Components.
Performance notes
This change led to a significantly-smaller site size; the Cypress tests used to take almost 3-4 seconds per test at times, but are now consistently taking around 1 second (or less) to complete.
Negative impacts
Many of the styles were apparently leaning on some built-in features of TailwindCSS (or, there are some errors left to sift through - Styled Components doesn't appear to validate classes, unfortunately). As a result, many styles will seem a bit off. With that said, they weren't perfect to begin with, so it shouldn't matter too much. There is still much to be done!