Let's face it: CSS can be difficult to tinker with. It's either something that you absolutely love or absolutely hate, but it is required if you want to pretty up your websites after all. I have my own fair share when it comes to learning and writing CSS and cannot stress you enough how many times I would have to google concepts up in order to change something to your ideas. I get it!
BUT.. If you're a developer, especially within the front-end side of things, then you have definitely came across or known about the CSS framework, Tailwind CSS.
What is Tailwind CSS?
Tailwind is a utility-first CSS framework focused on letting you style your elements via classes rather than traditional style sheets. By installing Tailwind into your project, you gain access to a load of utility classes that allows you to apply various opinionated styles to your elements all within your markup language of choice. The use of the opinionated styling allows more consistent code with less arbitrary values, making the developer experience a breeze.
Why Tailwind?
For quite awhile, I've styled my projects and websites with traditional CSS and CSS modules if the scale of the project warrants it. I'll say it right now: I absolutely got no problems to traditional CSS styling methods! It works fine to my needs and whenever I needed to add something specific to my site, I would just open my style sheet, tinker some classes around, and boom, done!
However as time passed on, I came across the term Tailwind multiple times on my development journey. You could say whenever I came across other sites and projects, Tailwind would be listed as apart of the tech stack used (besides the good ol Tailwind VS CSS wars). As a developer, I felt quite content with current choice of styling but to me, if I wanted to branch out and become a better developer, I need to try out more tools as development is a never-ending journey of self-progression. And so begins my journey of learning Tailwind!
The Tailwind Experience
Since Tailwind is simply a set of utility classes available to use within your markup, there isn't that much of a learning curve for applying styles that you want for your project. Instead, I would like to point out the concepts that are different compared to traditional CSS.
Installation
Before I begin a new project, I have to account for the type of project that I am doing in order to decide the best front-end technology to suit my needs. For web apps and the like, I would definitely utilize Next.js in order to create optimized SPA applications. For content-focused sites or for sites that do not change that often, I would definitely go with Astro instead for MPA sites.
We as developers often have to choose various different tech stacks that are dependent on the use case we are given. Tailwind makes this very easy as they have various guides to help install Tailwind dependent on your chosen framework. (See guides here)
Global Style Sheet
Tailwind allows you to create a global style sheet that allows you to add unique Tailwind directives and create global styles for your project. Upon creating your global style sheet, you must add these directives at the beginning to harness Tailwind's default styles. Learn more here
// src/global.css
@tailwind base;
@tailwind components;
@tailwind utilities;Tailwind Config
Tailwind comes with a configuration file that allows you to edit your project with your ideas in mind.
Because Tailwind is a framework for building bespoke user interfaces, it has been designed from the ground up with customization in mind.
By default, Tailwind will look for this file in your project so if you have any specific use cases in mind when it comes to styling your project, then this file is your go-to to edit your project for consistency. This file allows you to add your own styles Tailwind to be indexed upon accessing utility classes.
Not only take, you can even override specific Tailwind styles in order to fit your project needs. It's quite convenient in the long run as I definitely came across use cases where I needed a specific media query min-width size that does not mesh well with Tailwind's default media query settings.
Learning how to edit this file took a bit considering there's a lot of ways to edit your configuration so be sure to skim through the documentation to see what works best for your project. See more here
Closing remarks
Since the time of this post, I have utilized Tailwind for my projects for about 3-4 months. How do I feel about Tailwind?
Pros
- There is an ample amount of utility classes that you can access and many of them really help streamlined the development process when push came to shove (can't tell you how many times I have used the shadow utility class just because it is quite a pain to achieve something decent).
- Installation is short and sweet, editing the config file is quite straight forward with the help of the documentation, and the utility classes looked excellent - Tailwind is quite powerful!
- The documentation is great and is actually a joy to use due to how simple, yet effective it is when it came to searching for information in regards to Tailwind.
Cons
- I'm not exactly a huge fan when it comes to overusing the styles for very specific niche cases though. The fact that Tailwind provides utility classes to style your components means that you'll be applying those utility classes to your projects, a lot. For styling specific niche cases, that can become a huge bundle of text that can be come quite ugly for the eyes. My remedy to this would be to create a custom class within the global style sheet so it wouldn't look that horrendous but this is a downside for Tailwind.
To be perfectly honest, Tailwind is absolutely amazing! It provides various ways of making your sites look incredible while writing less CSS. Most of the more complex CSS use cases are streamlined with simple utility classes that is pretty much plug-and-play.
Here are some use cases where I personally think Tailwind excels the best at:
- Quick and dirty prototypes
- Utilizing Tailwind is a CSS library for your team
- On a time crunch and need to apply styles in a limited amount of time
Should you pick up Tailwind?
If your use cases align with the above, why not? To me, I personally wanted to try it out since I like trying out new things as a developer.
Perhaps the most important prerequisite for Tailwind is that if you already know CSS, you may as well already know Tailwind CSS. Tailwind is all about adding utility classes to style your components, but those utility classes are based off traditional CSS styles. If your CSS game is a bit weak, then Tailwind won't exactly help you much here.
I wouldn't say I am extremely skilled when it comes to CSS but I personally feel like I am of that level where learning different CSS frameworks would help add to my current skill-set. Whenever I wanted to add a specific style to my components such as adding weight to my font, I simply searched up the term bold on the documentation and end up with the Tailwind equivalence of it.
At the end of the day, only you can judge whether your CSS is up to par or not. If it is not, then I would recommend doing projects to help reinforce the fundamentals for CSS. If it is though, why not? Tailwind definitely changed up my CSS game!