Tailwind CSS: my love has been reignited ❤️

I have to admit, I hated Tailwind CSS at first. I’m pretty sure that my hatred for it lost me one of the contracting jobs I was gunning for. “Do you really want to use Tailwind CSS? Because I hate it with a passion. You may as well just use inline styles!”. Needless to say – they ghosted me after that 😂

While I inevitably would have tried Tailwind CSS sooner or later, that experience certainly fast-forwarded my toe-dipping. “I better see what all the fuss is about”, I thought.

Dipping my toes into Tailwind

Well, try I did, and I instantly fell in love with it. The benefits were immediate. I no longer had to waste time thinking of class names. Nor did I have to think “ah crap, is this style being used somewhere? I wonder if it’s safe to remove it..”. Class names never grew too long because I neatly separated all my code bases into React components. And it’s just so easy to make something look half decent with zero design capabilities.

Working with WordPress block development has recently reignited my love for Tailwind CSS. Having to think of css class names is just blerrgh. What a waste of time. Forgetting to remove some class names from the stylesheet and having to think if they’re still being used or not. It made me really appreciate the way Tailwind CSS greatly improves my development speed.

Consider this stylesheet:

.wp-block-blockylicious-piccy-gallery {
	padding: 40px;
	background: #eee;
	position: relative;
	box-sizing: border-box;
}

.wp-block-blockylicious-piccy-gallery .piccy-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 5px;
}

.wp-block-blockylicious-piccy-gallery button {
	border: none;
}

.wp-block-blockylicious-piccy-gallery .piccy-thumb {
	height: 100px;
	position: relative;
	background-position: center;
	background-size: cover;
}

.wp-block-blockylicious-piccy-gallery .block-editor-block-list__layout {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.wp-block-blockylicious-piccy-gallery > .piccy-label {
	position: absolute;
	display: inline-block;
	background: #ddd;
	padding: 8px;
	left: 0;
	top: 0;
	font-size: 10px;
	text-transform: uppercase;
	font-weight: bold;
}

I refactored a component into two components, resulting in an already trimmed-down code. Then I had to remember which styles to move over to the new component’s stylesheet without breaking it. Then, as part of the refactor, I forgot which class names are no longer needed. What a massive mess and waste of time. This is why from now on I’m using Tailwind CSS for everything, including WordPress block development.