Image for post
Image for post

Originally published at

Tailwind CSS is a utility-first CSS framework which means it has various utility classes which help to create layouts and rapidly create custom designs.

I have always loved Adam( Tailwind CSS creator)’s streams where he creates awesome-looking, well-designed layouts using Tailwind CSS. Now I cannot imagine a future project without using Tailwind CSS.

My blog is built using Tailwind CSS. 😉

How is it different from Bootstrap or Bulma etc.? 🤔

Most UI frameworks like Bootstrap, Material UI, Bulma etc. have pre-designed UI components like cards, buttons, navbars, alerts. You use those components and create designs on top of those components.

But in Tailwind CSS, you don’t get a pre-designed set of components. You get utility-classes. You can combine those to create your layout and components. …

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

Originally published at

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.

Updated guide for 2020

Spoiler Alert : I suggest you to try to hack your way into the site, before actually reading anything below. If you fail after considerable tries or you want to know a method which may be different than yours, you can follow along below.

(Updated) Video Version of tutorial:

If you want to watch a video instead of following the below tutorial, you can do that:

Not a text person? This video guide will help you.

If you enjoyed the video, please subscribe to a budding youtuber:

First of all, a small-ish intro about myself:

I am Soumya Ranjan Mohanty ( @geekysrm on the web), a Google Certified Mobile Web Specialist and Full Stack Developer. I also develop Native desktop apps with Electron and Android apps with React Native.
Visit my site to know more about me:

Originally published at

Hello readers! First of all, a small introduction about myself. I am Soumya Ranjan Mohanty , a software developer.

I took the Introduction to Modern Application Development course which was being jointly offered by IIT Madras and Hasura. I was new to web development and app development. But I grasped all the concepts taught to us in the 8 week course quite easily, thanks to the amazing teaching style of Tanmai Sir along with others, while doing a handful of practical exercises. An NPTEL online exam was held and top 5%(~400) students were selected for the Hasura Product Development Fellowship.


Soumya Ranjan Mohanty

Google MWS Google India Scholar. Fullstack web developer & blogger. Personal site: My dev newsletter 👉

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