The Right Way To Add Tailwind CSS to Gatsby with Purge CSS
Hunter Chang
Updated on
・1 min read
In this video, we look at the right way to add Tailwind CSS to a Gatsby site. First we install Tailwind CSS and make a button with its utility classes.
During the gatsby build
and gatsby serve
we view the page source to see that all the Tailwind CSS classes have been included, which is very bad!
We add gatsby-plugin-purgecss
to our Gatsby site to remove any CSS that we aren't using, which keeps our final file size small and pretty!
After that's all in place, I explore how we can make a re-useable Button component by passing in Props and Tailwind CSS classes.
Subscribe if you liked this video!:
https://www.youtube.com/channel/UCS6lPt9btmTG3GkU82ELygA
Follow Me On:
https://twitter.com/HuntaroSan
Nice article and video! Could you make one to use with styled-components?