Use TailwindCSS with Gatsby (with Emotion or styled-components)

Gatsby + Tailwind + Emotion
Gatsby + Tailwind + Emotion
Gatsby + Tailwind + Emotion

Originally published at soumya.dev.

I was amazed by the stuff one can do using Tailwindcss. I watched in awe the live streams of Adam Wathan (creator of tailwindcss)where he used to build various layouts using tailwindcss, without using any custom CSS.

Not being a great designer by myself, I decided to give TailwindCSS a try. Being a React developer, I wanted to try tailwind with React.

Then, I was starting with a Gatsby site, I thought why not use tailwind with this. I also wanted to use it with a CSS-in -JS solution like Emotion or styled-components being a big fan of CSS-in-JS. I googled a lot, tried different starters and here I am with what I can tell the “best 👌 way to use TailwindCSS with Gatsby along with CSS-in-JS solutions like Emotion or styled-components.

Steps to get the perfect 👌combo:

  1. Run the following command on your terminal to get a default Gatsby site up and running.
Create gatsby site

2. Run gatsby develop on your terminal to open your site on port 8000 (default).
You can view your site with live reload (updates site as you edit and save code).

3. Install Tailwind and generate Tailwind config file.
( To learn more about how to use Tailwind in your CSS, visit the Tailwind Documentation)

Install Tailwind and generate Tailwind config file

Now you can use tailwind classes in your project using className attribute. But to use CSS-in-JS magic and styled components pattern, follow the below steps.

4. Now install Emotion packages, tailwind-micro, gatsby-plugin-postcss, postcss-preset-env, postcss-import, stylelint:

Now install Emotion packages and tailwind-micro:

5. Create a file postcss.config.js in the root of your project with the following content:

6. Add gatsby-plugin-postcss and gatsby-plugin-emotion to your gatsby-config.js file:

7. Restart Gatsby dev server using Ctrl+C and again running gatsby develop .
Now our gatsby site knows about the plugins we have installed.

8. To use default Tailwind base styles and utilities styles, create a globals.css file. I like to keep it in src/styles/globals.css :

9. Now to use the globals.css styles, we import it in the gatsby-browser.js file in our root directory:

10. Restart Gatsby dev server using Ctrl+C and again running gatsby develop .

Usage 💻

Finally, we are done with all installation and configuration. Whew!
We can now use the tailwind classes quite easily in our components in 3 ways:

a. Using tailwind classes directly in markup:

Here, the tailwind classes font-semibold, text-lg, leading-snug, truncate will be applied to h4 tag.

b. Using styled components pattern:

c. In case you want to apply custom CSS along with some TailwindCSS properties:

Tip: To quickly refer Tailwind classes, use TailwindCSS cheatsheet 📝.

That’s it! Congratulations! 🎉
You have successfully setup a Gatsby site that uses TailwindCSS along with Emotion.

Suggestions and comments are welcome!

Subscribe to Soumya’s dev thoughts

Subscribe to my newsletter for regular articles and dev thoughts

Happy Coding! 👨‍💻

If this post helped you, and you want to help me create more tutorials/ videos like this, please consider supporting me at https://coffee.soumya.dev/

You can find me online at: (@geekySRM everywhere)

My website: soumya.dev

Buy me a Coffee: coffee.soumya.dev

Youtube: link.soumya.dev/youtube

Twitter: twitter.com/geekysrm

Github: github.com/geekysrm

Facebook: facebook.com/geekysrm

Medium: medium.com/@geekysrm

The Startup

Get smarter at building your thing. Join The Startup’s +788K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Soumya Ranjan Mohanty

Written by

Google MWS Google India Scholar. Fullstack web developer & blogger. Personal site: https://soumya.dev. My dev newsletter 👉 https://tinyletter.com/geekysrm

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +788K followers.

Soumya Ranjan Mohanty

Written by

Google MWS Google India Scholar. Fullstack web developer & blogger. Personal site: https://soumya.dev. My dev newsletter 👉 https://tinyletter.com/geekysrm

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +788K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store