Tailwind CSS

A couple weeks into my coding bootcamp at Flatiron I began asking classmates and acquaintances about Javascript styling frameworks. The one that kept coming up, time and time again was Tailwind CSS. Since then I have implemented Tailwind into my Javascript and React projects multiple times and have learned a lot along the way. I wanted to share basic use cases for Tailwind and show off some low level examples as well.

I started out learning Tailwind when I was still new to even CSS at the time. Despite this, I still felt that Tailwind wasn’t too advanced for me at the time. This kept me interested in using it instead of becoming discouraged right off the bat. That being said, it is best to know the basics of CSS to make your integration of Tailwind less of a headache.

What is Tailwind CSS?

One of the main differences between Tailwind and other CSS frameworks such as Bootstrap, is that it doesn’t come with any pre-designed components. Tailwind operates at a lower level that allows you to design your project how you want to. Because of this, it has less of a cookie-cutter-look that some other frameworks tend to have. Just like if you were to use CSS, you’re still choosing how everything looks but Tailwind just does it in a different way.

Just by looking at a React component utilizing Tailwind, you know something is very, very different. This is because all of your styling is done directly in your markup. Theres no separate CSS files to diddle with, just your markup. I know not everyones not a fan of this and some people think it makes your components look too bloated or busy. Heck, even the founder of Tailwind has this to say: “If you can suppress the urge to retch long enough to give it a chance, I really think you’ll wonder how you ever worked with CSS any other way.” Well there you have it folks.

Styling

Lets look at what we can do with a simple <h1></h1> tag using Tailwind:

<h1 className="text-red-500 text-3xl font-serif font-bold hover:text-yellow-600"></h1>

If we break down what we just created with our headline tag, this is what we’ve done to it:

text-red-500 — we changed our text color to red

text-3xl — our font size is now set to 1.875rem

font-serif — the headline has been altered to a serif font, which was originally set to sans-serif.

font-bold — you guessed it, our font is now bold.

hover:text-yellow-600 — on hover, our text will turn a yellow color.

This is a very basic example but the same principles are applied for any other tags you’ll end up styling. If you haven’t already, give Tailwind a try on your next project. Hopefully you don’t end up retching.