Rich's Blog

My Personal Intro to TailwindCSS

Richard's photo
Richard
·

4 min read

Introduction

I heard of Tailwind, but I never used it or Bootstrap for a long time, and my reasoning behind this was that I wanted to keep practicing my CSS skills while not relying on the convenience of CSS frameworks. However, I have seen Tailwind syntax across other projects when working with a group of developers, which introduced me to how tailwind syntax functions. Coming across an open role at Tailwind, I wanted to try applying, and I decided to build a small application talking about myself and my accomplishments using Tailwind.

Tailwind is Convenient

Implementing my own Tailwind syntax throughout my code, the first thing that stood out to me was how clean my CSS page looked. Not having to create any of my styling or classes, it was nice to have such a clean-looking CSS page for a change. Before Tailwind, I would have to manage my CSS styling specificities, making sure certain HTML elements didn't have their styles overridden from other style rules, or ensuring particular CSS rules weren't too high in specificity. Now I no longer have to worry about managing the CSS specificities so much and can just go straight to implementing the Tailwind CSS.

It was difficult creating consistent CSS class names across my multiple projects without good documentation for those CSS classes, and those projects not referencing the same CSS styling sheet. Thankfully Tailwind has both good documentation and a singular location to reference for styling. Tailwinds' consistent naming conventions for their classes reduce human error when working in a team, allowing easier communication and better teamwork. It also allows user customization for existing tailwind styles, providing flexibility for styles that may not make sense to include in certain website themes.

<div className="flex flex-col flex-nowrap justify-center w-4/6 mr-2 px-10">
</div

As an example of Tailwind's consistent naming pattern, let's look at the above example. For any styles that are subcategories like flex-direction or flex-wrap, Tailwind usually uses the hyphen to categorize the parent style and the child style. So when making an element's flex-direction column, Tailwind goes for flex-col to keep it short, simple, and effective. For styles that require choosing the direction for the style being implemented, Tailwind goes for the x and y-axis to represent said directions and make it easy to remember for repeated usage.

What I observed

When I was building my application with Tailwind, I observed as I added more Tailwind classes to an element, the more cluttered my code looked. Granted there are times when an element only needs one class, but there are also occasions where an element requires a lot of classes. As demonstrated below, there can be a lot of Tailwind classes on one element. Alternatively, using CSS without Tailwind also comes with this drawback as well, where you would need to go through many lines of code to find what you're looking for.

 <button
      className="border-b-2 text-4xl pb-1 pt-8 mb-8 hover:pb-3 hover:ease-in hover:duration-300 min-[2400px]:text-8xl min-[2400px]:leading-[6rem]"
      onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
        e.preventDefault();
        buttonProps.onClick();
      }}
    >
      {buttonProps.text}
    </button>

I already mentioned Tailwind's specificity and how it provides the convenience of not worrying about managing your own CSS specificities. However, this does come with one drawback, and that is being unable to switch the specificities of the Tailwind code without using the important (!) option. While that may not seem like too much of a drawback, for some developers, they may not want to include the important (!) option in their CSS no matter what.

Conclusion

Overall my experience was very positive and I am glad that I tried using Tailwind. I will be using Tailwind again for my future projects, but I do want to go back to using CSS without Tailwind from time to time to keep my skills as a CSS magician. 🪄 It saves so much time when initially building your application, and can be very convenient to use. However, I do not regret sticking with pure CSS for as long as I did because I was able to learn from that experience as well. I'm looking forward to learning more about what Tailwind provides!

Tailwind documentation: https://tailwindcss.com/

Tailwind CSS