One of the sweetest sounds you can hear when flying is the pilot letting you know you’re going to arrive early thanks to a great tailwind. Tailwinds are those upper atmosphere currents blowing in the direction of travel–pushing the tail to help you go faster.
In business, “tailwinds” refer to those favourable conditions that will move growth, revenues, or profits higher.
But can a good tailwind help you improve your web performance?
Tailwind CSS is a utility-first CSS framework for rapidly building custom style sheets for websites and applications. If it sounds familiar to you, then you’re in the know. Tailwind is quickly catching the attention of the tech industry. While their headquarters are located in the US, the founders work locally here in Waterloo Region, giving us all the more reason to love their work.
We set a high standard when it comes to our outsourced development and design services to help your team deliver above expectations. We know that in order to keep working effectively, you always need to be using the latest tools. That’s why we prioritize staying up to date with the best tech out there–and Tailwind CSS goes above and beyond.
After working with Tailwind on our new and improved website, we noticed a huge difference– according to Attilla Schmidt, our Director of User Experience.
“The main metric is that we took our CSS file from 400kb to 16kb and because we stripped out bootstrap we could get rid of bootstrap’s javascript dependencies too," said Schmidt.
We can’t go back now that we’ve converted to Tailwind CSS. It’s by far the fastest, most robust and a low-maintenance way of creating fully responsive web applications these days. Here’s our thoughts:
Why utility-first CSS?
Utility-first CSS means building complex components from a constrained set of primitive utilities. Traditionally, whenever you need to style something on the web, you write CSS. You write it once and then use it across your site or app.
With Tailwind, instead of opinionated pre-designed components, you get low-level utility classes that let you build completely custom designs without ever leaving your HTML. This allows you to enter into a diverse marketplace of high-quality coded resources, such as landing pages templates, website themes, and application dashboards.
Here at BitBakery, the rationale behind using utility-first CSS is all about the freedom it gives us. We can create almost anything we have in mind without having to worry about the lack of flexibility of the common component-based approach.
How does this make Tailwind different?
Tailwind is different from the likes of other CSS frameworks. As mentioned, it provides only the raw basics of what you need to style your own web pages, such as margins, sizes, positioning, colours. So why is this beneficial?
Responsive to the core
Every utility class in Tailwind can be applied conditionally at different breakpoints. It makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML. This works for every utility class in the framework, which means you can change literally anything at a given breakpoint– even things like letter spacing or cursor styles.
Component friendly
Tailwind is great for implementing custom designs. Unlike many other CSS frameworks, Tailwind isn’t down to hold your hand by including any component classes like form-inputs, buttons, cards, or navbars.
Instead, you're encouraged to work utility-first and extract your own components when you start to notice common patterns in your UI. While you can do a lot with just utility classes, you don’t want to risk outgrowing your own project. This is why it’s so useful to codify common patterns into higher level abstractions as you work, and allows you to stand out from the crowd.
Designed to be customized
If it makes sense to be customizable, Tailwind lets you customize it. This includes colors, border sizes, font weights, spacing utilities, breakpoints, shadows, and tons more.
Because Tailwind is written in PostCSS and configured in JavaScript, you have the full power of a real programming language at your fingertips. Tailwind is more than just a CSS framework, it's an engine for creating design systems.
The bottom line
As developers, we’ve worked with multiple CSS frameworks, and have faced all the challenges navigating them. We know our way around web development, but got tired of using older technology, spending precious time loading a ~400Kb of file when all we need is something simple.
We always strive to make your experiences stand out. Traditionally, to build something a little more unique, we’d have to spend time manually overriding tons of styles– just to get something different.
This is all before discovering the beauty and freedom of Tailwind. Because it doesn't impose design specification or how your site should look like, we can simply bring tiny components together to construct a user interface that is unique.
For these reasons, we believe Tailwind could surpass other CSS frameworks in popularity sooner than later. If you're sick of fighting the framework and are looking to upgrade from a custom framework to support a new long term vision– Tailwind CSS is for you.
