What is CSS and why is it important?
As web developers, CSS is something we come into contact with almost every single day. It’s so ingrained in our workflow that it’s sometimes easy to forget its sheer importance. Simply put, CSS is a “style sheet language” that defines the layout, structure, alignment, colours and fonts of a web page. On top of this, it has the ability to render animations, adding a layer of dynamism to websites.
Without CSS, a webpage would simply be a set of plain text and images (as well as any other elements) stacked on top of each other – with no styling, structure, colour, or layout. Comparable to most Microsoft Word documents!
As we are creative creatures who thrive off beauty and aesthetics, CSS is arguably the most important language within a web developer’s toolkit. CSS brings the web to life, it makes websites look like, well… websites. It enables one website to look completely different from the next and gives web designers and developers (almost) total creative freedom.
What is Tailwind and why do we use it?
Tailwind is an intuitive, utility-first (I will elaborate on this later) CSS framework. It gives web developers a very solid foundation on which to start a web project, without having to reinvent the wheel, so to speak. However, despite its out-of-the-box approach, it is an incredibly flexible and customisable framework and can be tweaked and amended to accommodate virtually any web layout, design, or theme.
Its main aim is to speed up the front-end web development process, by vastly reducing the amount of CSS a web developer has to write. It is for that reason, amongst some others I will talk about below, why we have adopted Tailwind CSS when building client websites at Patch. Since adopting Tailwind, we have bypassed many CSS-related headaches and find our workflow to be a lot more efficient, structured, and dare I say pleasurable!
We will admit, if you want to get the most out of Tailwind (avoiding the CDN version), the setup process does take longer than your average CSS framework, as it relies on a “build process” (https://tailwindcss.com/docs/installation) in order to function correctly. However, this said we think it is more than worth it and below I will discuss what makes it different and in our opinion so great.
What makes Tailwind different?
Tailwind, unlike many of its competitors, has several features that set it apart from the rest. For us it comes down to five main points:
1. Customisable/extendable
The framework simply wouldn’t work for us if Tailwind wasn’t able to be amended and tweaked to fit our clients’ bespoke design needs. As web developers, when we are handed a design it is crucial that we aren’t restricted by the tools in our arsenal. It is for that reason we really do appreciate the ease and extent that Tailwind can be customised and extended.
By configuring Tailwind’s config file, we are able to add our own custom CSS classes, amend existing ones and extend upon a theme’s default ones. This allows everything to remain organised and structured, especially when more than one web developer is working on the same project.
2. It’s not opinionated
You’re probably thinking to yourself, what in the earth does this mean? CSS frameworks aren’t people… they don’t have opinions. Well, what we mean by this is there is no right or wrong way to do things with Tailwind. It does not come with predefined templates or modules and it doesn’t push you down a specific path.
In conclusion, it doesn’t make things easier if they are done in a “certain way”, which ultimately means it’s flexible. This is vital for us, as mentioned above, we need to be able to accommodate all manner of website designs.
3. PurgeCSS (small production size)
Another huge advantage of Tailwind is a built-in feature, that has the ability to “purge” your CSS.
Under the hood, Tailwind uses the tool “PurgeCSS”, which removes any unused and unwanted CSS classes from your main Tailwind CSS file, ensuring only the CSS classes that you have applied directly to your HTML markup are retained. This is vitally important, as a default, unpurged Tailwind file is around 3.7MB in size. This aspect essentially means you are only ever using the parts of the framework that you require, which is quite a rare and much-welcomed feature amongst CSS frameworks.
4. Its glorious documentation
Tailwind has extensive and comprehensive documentation, making it very easy for developers to grasp, understand and implement many of Tailwind’s features. In my 8 years of developing websites, I would personally vouch that it is some of the best documentation I have ever come across. From installation to browser support, to understanding the fundamentals of how the framework operates, everything is explained clearly and consciously.
There are also several great “cheat sheets” (e.g. nerdcave.com/tailwind-cheat-sheet), which make it incredibly easy to look up exactly what a utility class does.
5. It’s utility-first
Tailwind is a utility-first framework and comes with a vast amount of predefined CSS classes, hence its large (unpurged) file size. Its aim is to stop the need to write and define virtually any bespoke CSS code, by simply adding the predefined classes directly to your HTML markup. This is an incredibly attractive feature when building websites as it can reduce a website’s front-end build time. Below I will discuss a utility-first approach and its advantages in more detail.
Utility-first approach
There are a dozen or so CSS frameworks in existence, Bootstrap, Foundation, and Bulma being three of the most popular. They all offer various pros and cons, but unlike Tailwind, most of them all share one thing in common: they are “component-based” frameworks.
This means that they come with many prebuilt components, already styled and ready to use. In addition, they do have some utility classes for things like spacing, containers, and columns, but in contrast to Tailwind and other utility-first frameworks such as Tachyons, these are limited.
Below are my personal thoughts and opinions on what I feel the four main advantages utility-first frameworks offer compared to component-based frameworks or not utilising a framework at all.
1. Decision making & consistency
One thing I have noticed and very much appreciate when using Tailwind is the reduction in decision-making. Instead of getting caught up on if a margin should be 23px or 24px wide, you are far more likely to just implement the class “m-6” (24px). In a real-world scenario that 1px is going to make virtually no difference and by applying the same utility class for all the margins you ultimately end up with a much more consistent layout.
2. Knowledge
In order to use Tailwind, you have to have a very solid and fundamental understanding of how CSS works, as you are directly applying so many CSS rules (classes) to HTML markup that affect layout and styling. This is somewhat different from component-based frameworks where it is easy to “get by” by only knowing a handful of classes.
This may be great for designers or someone who is relatively new to web development, but I feel it may restrict their ability to progress and actually properly learn to code CSS, ultimately affecting their ability to use it as effectively as possible and create websites from different designs.
3. Maintenance
Opposed to a component-based framework, it is of my opinion that Tailwind is actually easier to maintain. This is because we are able to tweak individual files and components without having the concern of breaking other pages or elements. For me, this is a big plus and makes maintaining our sites a lot less stressful.
4. Speed
Depending on the design and for most projects, the number of actual CSS rules a web developer will have to write will be significantly reduced. This can really speed up the front-end build process, which ultimately is a win-win situation for both developers and clients alike.
Conclusion
To conclude this blog post, since adopting Tailwind CSS and at Patch we have seen an uplift in both our productivity and front-end build-time, as well as a decrease in our CSS file sizes, ultimately resulting in faster-loading web pages.
With a solid grounding in CSS, we were able to adopt Tailwind with relative ease, having spent just a couple of hours looking through its extensive and brilliant documentation.
Tailwind’s unopinionated approach has made integrating it into our client’s projects hassle-free. Tailwind is a breeze to customise and extend, making it incredibly adaptable, so much so that we feel that there is virtually no way in which it restricts our builds.
Since switching to a utility-first framework, we have found our layouts to be more consistent, with less overall decision-making, resulting in fewer overall hiccups.
With so many CSS frameworks to chose from, it’s important to not just adopt one for the sake of it and that it does its job of making your builds more pain-free, intuitive, structured, browser-compliant, and speedier. We really do feel Tailwind ticks all these boxes and we can’t see us moving on to another framework anytime soon.