Use TailwindCSS with Gatsby (with Emotion or styled-components)
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:
- Run the following command on your terminal to get a default Gatsby site up and running.
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)
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:
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
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
