This article will explore how to use Tailwind CSS with a Gatsby project. As of writing this post, I am using Bulma . I enjoyed it initially but it got to a point where I was having to overwrite many of their container classes to do simple things like having a responsive site on mobile and desktop platforms. As a result, I often wondered why I didn’t just create a solution from scratch.
Add dependencies to your existing project
Add this plugin into your gatsby config
Initialized a config file for Tailwind CSS
Create a CSS file and import tailwind packages
Import your CSS file into gatsby’s browser step
Test to ensure Tailwind CSS is ready for use!
Remove unused Tailwind CSS code
#javascript