Most CSS frameworks come packaged with far too many pre-designed components. Very quickly, you find yourself fighting the framework you chose to save you time. But TailWind CSS is an unbiased framework. It lets you build bespoke product components really, really quickly.
Most CSS frameworks do too much. They come packaged with all these pre-designed components. Navs, cards, badges, buttons, alerts and more. Why? Because it helps you move quickly… at first. As soon as you try to implement custom designs, though, the battle begins.
Very quickly, you find yourself fighting the framework you chose to save you time. And the more you override a framework, the more you ask: what’s the point in using it?
That’s where TailWind CSS comes in.
Enter: TailWind CSS
TailWind is a low-level CSS framework. It gives you the blocks you need to build bespoke product designs – and that’s it. There’s no default theme and there are no built-in, pre-styled UI components.
Put simply, TailWind has no opinion on what your product should look like.
This means you don’t have to fight to override any annoying styles. There’s no detective-work required. Most importantly, though, it means that product design is always dictated by design. Not the framework.
A Utility-First Framework
The utility-first workflow that Tailwind encourages utility classes implementation only. This helps us to avoid adding abstractions to your code before it’s actually necessary. Or before you even fully understand the problem space.
But even with a utility-first workflow, you’ll quickly find yourself repeating common combinations as you recreate the same component across different areas of your product.
The most common are small, frequently used components like buttons and badges. Very quickly, you’ll build a long list of utility classes that have to be kept in sync across many different components. In this instance, it’s best to extract a component.
With TailWind, you build a single source of truth for your template. You can still use all the same utility classes but without the burden of having the same classes in multiple areas of your product.
For small and frequently used product components like buttons, I don’t typically create a template partial or JavaScript. Instead, I’ll just use TailWind’s @apply directive.
The Benefits of Tailwind CSS
In the traditional approach to product development, custom designs require custom CSS. The more features you build, the bigger your CSS files get. But using utility classes lets you style elements by applying pre-existing classes directly in your HTML. This means you can build completely custom component designs without writing a single line of custom CSS.
This means we don’t have to waste energy inventing a long list of class names just so we can style a specific component. We rarely have to switch context to get a design to look right. And at the end, the CSS file output is tiny when you employ PurgeCss to remove anything you aren’t using.
Tailwind CSS lets us publish to specific templates with confidence knowing there won’t be any unwanted side effects. It helps us to build bespoke product components that match designs precisely. Product design should come from design, after all! Tailwind just lets us do that faster.