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.

1. Add dependencies to your existing project

2. Add this plugin into your gatsby config

3. Initialized a config file for Tailwind CSS

4. Create a CSS file and import tailwind packages

5. Import your CSS file into gatsby’s browser step

6. Test to ensure Tailwind CSS is ready for use!

7. Remove unused Tailwind CSS code

#javascript