Finding My Design Mojo With TailwindCSS

For many years, I had been battling with Styling web pages using CSS. I could create a decent design but when it came to adding those design components that really make a page come alive, I struggled. This was until I got introduced to TailwindCSS.

I know that some of the purists out there reading this, would probably bare thair fangs and rage on how bad an ideas it is to have a lot of CSS added to HTML elements but for me, this was basically what I needed.

TailwindCSS made it possible for me to know how to add styling to my elements without having to think too much. I had played around with a couple of Frameworks like Bootstrap and Bulma but there was always this constant fight to try and Tailor the components to look like what I had in mind. In most cases, it would mean creating a couple of overriding classes which I did not want to do and also adding some !important tags as well which to me indicates that something wasn’t right.

The Tailwind CSS documentation is really good and full of examples. With Tailwind, I don’t have to fight the framework. I can choose the default components or override it with my own preferences. I like the way I can actually talk through styling an element. Let us say i want a rounded button with green background and white text, space on the left and right of the text as well as top and bottom. I can talk through this process by writing the following;

<button class="bg-green-800 text-white px-3 py-2 rounded" type="submit">
  Submit
</button>

The above reads like this, “Create a button with a green background, white text, 0.75em padding on the x axis and 0.5em on the white axis and make the button rounded”. See how readable that was?

Okay so I know there will be some readers complaining about having too many classes in HTML. Tailwind give you an option to create your own components. Instead of writing the above, you can create your own component using the apply feature as follows;

.green-btn {
    @apply bg-green-800 text-white px-3 py-2 rounded
}

Then within your html, you can just simple reference .green-btn like so;

<button class="green-btn" type="submit">
  Submit
</button>

That’s it! Same thing achieved. The only limitation to using @apply does not currently support utilities that have variants like “sm:bg-red-800” These will need to be applied separately.

In future articles I will share how I use TailwindCSS in my projects.