The benefits of Tailwind CSS as a rapid front-end development tool

I recently had the opportunity to use Tailwind CSS for the first time on a large eCommerce project that included a robust design system and many different components, sub-components and and variation options for each. I was pleasantly surprised with how much Tailwind sped up the development process and I’m sharing what I learned from that experience here.

In combination with a design system provided by the creative team, we were able to use Tailwind CSS to configure global settings and options for consistent styling around spacing, responsive breakpoints, colors and lot more that kept development consistent and quick.

The benefits of universal settings and many of the other Tailwind CSS benefits below have made it one of the fastest growing framework and front-end tools in 2020.

Tailwind CSS utility classes

One of the most useful features of Tailwind is its robust yet un-opinionated selection of utility classes and options. These class names work together with the core settings created when Tailwind is first configured.

The naming conventions for utility classes outlined in the documentation are short and easy to remember, so you can actually do a lot more by writing less code than regular CSS. Thanks to fewer characters of code to decipher, regular maintenance and bug fixes can be made more easily and quickly.

Tailwind’s utility classes are low level which means they don’t make a lot of decisions for you about how your element should look. Instead, you can combine multiple low level utility classes together to make your own re-usable component and variation classes, covered next.

Combining Tailwind utility classes into custom component classes to avoid tech debt

On larger projects, lots of utility class names bunched together can really start to clutter up a template or view file. This makes the overall code harder to read and more complex, which means it’s harder to re-use and debug.

This creates a problem called “technical debt” which is used to describe long-term code problems that cost more money to fix later on than if code was written more efficiently in the first place.

To avoid this type of tech debt I separate my view layers into a .scss file. Then, using @apply, I add a variety of low level utility classes that comprise my component class.

By abstracting the code into a .scss file in this way, we can avoid the issues caused by technical debt with utility classes inside the template files mentioned earlier saving time and money.

By only keeping utility classes in your .scss files, a developer is able to separate functionality and form. However, where needed and especially in combination with a lightweight front-end framework like Vue, developers can also apply dynamic state management and styles according to any change in the UI.

This process also allows you to give your elements better component class names, because you’re not focusing on a long-line of low-level class names as shown in this example from the Tailwind docs:

.btn {
    @apply font-bold py-2 px-4 rounded;

.btn-blue {
	@apply bg-blue-500 text-white;
.btn-blue:hover {
	@apply bg-blue-700;

.btn-gray {
	@apply bg-gray-400 text-gray-800;
.btn-gray:hover {
	@apply bg-gray-500;

Both settings and component-friendly classes make Tailwind a great investment for large or small projects from web apps or eCommerce platforms to marketing websites.

Learn more about extracting components with Tailwind on their site

Lightweight yet powerful global settings

One of the major ways Tailwind differs from other frameworks like Bootstrap is that it’s much more lightweight and less opinionated. This means that it doesn’t have a default theme, and there are no built-in UI components like modals or menus for you to use. However, this simplicity is also what makes Tailwind incredibly powerful and a great long-term choice for your project.

“Tailwind is more than a CSS framework, it’s an engine for creating design systems.”

Tailwind CSS

Although Tailwind CSS doesn’t provide complete UI components out of the box, it delivers a powerful group of core, global settings for colors, border sizes, font weights, spacing utilities, break points, shadows, and lots more. In this way, Tailwind CSS gives you a design system out of the box to keep things like spacing, colors, fonts and more consistent site-wide, while still allowing you to build in customizations to work outside a set of rigid requirements as needed.

These settings keep your front-end work consistent across a team, and allow you to avoid so much of the tech debt and cost associated with projects that rely too heavily on external libraries.

In projects with a lot of tech debt using heavy frameworks, what often happens is that common values and settings must be repeated due to a lack of architectural strategy early on. Developers are fallible, and they forget or overlook repeat code because it’s not easily found or referenced, or the code becomes too fragile to change without a major rewrite.

Tailwind abstracts the parts of your code that repeat into settings and variables that give you full control over your responsive, front-end development as you scale for the long-term.

Published October 19, 2020