15 February 2021

Tailwinds - My Thoughts

For years I’ve been heavily reliant on a stylesheet I put together including multiple CSS helper classes. This helped me keep my CSS to a minimum, and still create a replication of a design.

This post is over two years old, so the details may be out of date.

However I always had to write some CSS to cover other basics, which did frustrate me due to not being very future proof.

During a team discussion at Bluegg, we decided to give Tailwinds a whirl, to see if this could speed up our process.

HTML

<div class="w-full m-auto">
	<div class="flex flex-col md:flex-row items-center justify-between relative w-100 h-auto bg-100 shadow-2xl rounded-lg p-8">
		<div class="w-8/12 text-2xl">
			<p class="flex heading-h4 font-bold">Stay up to date</p>
			<p>Subscribe for email updates.</p>
		</div>
		<button class="relative shadow-md font-medium my-5 py-2 px-4 text-white cursor-pointer bg-black hover:bg-black rounded text-lg text-center w-48">
			Signup now
		</button>
	</div>
</div>

What is Tailwinds?

So Tailwinds is an atomic CSS framework. This means it has hundreds of classes ready at your fingertips to use as *helper classes*. So there’s no need to write hundreds of lines of CSS to get your desired look.

The two biggest issues I’ve personally faced with CSS are:

1) The Speed

Now, I’ve found writing CSS fairly simple. However some aspects still cause me to rush over to Stack Overflow to find out how certain systems work. With Tailwinds I was able to create components using helper classes, instead of spending time figuring out which systems would be better by changing CSS over and over.

2) Naming

I’m not alone here. Creating CSS names can be a complete pain. Having to describe elements in two words (BEM), and doing this over and over again becomes incredibly taxing. Tailwinds helps to reduce this substantially. I wound’t say it removes it completely, as some components will need a bit of tinkering, however it definitely reduced the pain!

The Downsides

Of course there are downsides to everything, and Tailwinds is no exception. Headings still need to be styled, and small things like aspect ratios haven’t been included yet (Jan 2021). However this doesn’t put me off, as these can instead be added to the tailwinds config file so it’s not the end of the world.

Also with any custom CSS files, you can include the Tailwinds class with the `@apply` method.

CSS

.aspect-ratio {
	@apply max-w-full relative overflow-hidden;
	
	> * {
		@apply absolute left-0 top-0 w-full;	
	}
			
	&.aspect-ratio-16\/9 {
	  padding-bottom: 56.25%;
	}
}

In Conclusion

I haven’t been using TailwindCSS very long, but I can see it becoming something I use going forward. It’ll help create a more straightforward process with a quicker turnaround.

I’d definitely recommend giving it a go.