A few days ago I posted a new blog post in which I detailed my experience with styled-components, and how it was a nice way of incorporating dynamic styling into the js domain staying away from CSS files. I later found out about yet another way to incorporate styling into your applications... that was TailwindCSS.

I had seen some conversation around this before as well as a lot of videos and posts mentioning TailwindCSS but thought nothing more of it. So seeing as I had been told of it again and also wanted to try it out so I could compare my experiences. I decided to build a website utilizing Tailwind for styling.

What should I know as basics?

To get you started and to understand this read it's important to know that:

1. TailwindCSS is a package full of pre-built classes to style your components however, they are so flexible that you can do anything with them!
2. You do not need to know CSS to use TailwindCSS.
3. TailwindCSS uses a lot of abbreviations i.e. (pb is padding-bottom), so it's important that you read the documentation and use its search function if you are ever unsure.

Tailwind... more like bootstrap!?

I have to say my initial impressions of Tailwind are positive. It takes a lot of the semantics of bootstrap and has almost extended them so much that you never have to use media queries in direct CSS to toggle differences in styling. Instead, you would do something like the below:

<div class="pb-10 sm:pb-12 md:pb-8 lg:pb-4">
    Hello world
</div>

To those who have used styling frameworks before such as Material UI, Bootstrap, etc. You will understand the usages of these different media breakpoints (sm, md, lg, etc.). These are essentially saying 'When my device size is lower than small apply a padding-bottom of 10. When my device size is small (sm) or greater apply a padding-bottom of 12. When my device size is medium (md) or greater apply a padding-bottom of 8. When my device size is large (lg) or greater apply a padding-bottom of 4'. I must say, it took me a while to really understand the technique of saying there is no 'xs' breakpoint which is what you would typically find in bootstrap for example. Simply that any device which is lower than sm inherits tailwind classes without a media breakpoint like the above 'pb-10'.

But hang on... that looks like a lot of classes?

That's true and it's something that did put a bit of a dampener on my view of the framework. With having so many utility classes being added on to each element it's very easy to end up with huge class property values. This can easily cause things like useless classes remaining on elements that aren't necessarily needed etc. A good package to use is the classNames package that will combine class names together. Allowing you to format your elements a little cleaner.

How does TailwindCSS compare to styled-components?

Something I really liked about styled-components, was how simple it made your components look. Being able to create a styled div and reference it like:

const Wrapper = styled.div`
padding-bottom: 10px;
@media (min-width: 768px) {
    padding-bottom: 20px;
}
`;

const TestComponent = () => (
    <Wrapper>
        Hello world!
    </Wrapper>
);

This to me, keeps component code so clean and concise allowing the components to focus on logic and not looks. You could even go one step further, and abstract your stylings out to a separate js file within your component domain. However, let's see what this looks like in TailwindCSS:

const TestComponent = () => (
    <div className="pb-10 md:pb-20">
        Hello World!
    </div>
);

As you can see here, TailwindCSS actually reduces the number of lines of code we have to write to achieve the same goal. This is its whole intention with the utility class approach. It really does simplify writing styled elements. However, this is all well and good for our elements with only a few styles. Let's take a look at the comparisons of more heavily styled components:

styled-components

const Button = styled.button`
    font-size: 1rem;
    margin: 1rem;
    padding: 1rem 1rem;
    @media (min-width: 768px) {
        padding: 2rem 2rem;
    }
    border-radius: 0.25rem;
    border: 2px solid blue;
    background-color: blue;
    color: white;
`;

const TestComponent = () => (
    <>
        <Button>
            Hello world!
        </Button>
    </>
);

TailwindCSS

const TestComponent = () => (
    <div className="text-base mg-1 pt-1 pr-1 md:pt-2 md:pr-2 rounded border-solid border-2 border-light-blue-500 bg-blue-500 text-white-500">
        Hello World!
    </div>
);

As you can see from the above comparisons, styled-components really does take the lead now as our component has grown in styling rules. Tailwind's implementation is so verbose in classNames and without using a package like classNames it really makes our lines a lot longer than they should be. This is one of the biggest downfalls for Tailwind in my opinion.

Especially if you are working on a project with multiple developers, the styled-components approach allows you to easily read what stylings the Button component has. In comparison to the Tailwind approach, you would most likely have to lookup in the docs some of those util classes to understand precise values.

Compare this example to the first example. Tailwind just screamed simplicity. This follow up example just consists of complexity and a high risk of spaghetti code. It only takes multiple developers to be working on a few components at the same time for styles to be easily ruined/disrupted and then spending time removing certain util classes to find out the root cause. In comparison to the styled-components way of doing things where we still rely on our raw CSS changes it is a lot easier to manage change in my opinion.

So, who takes home the trophy?

Well... to be honest, I wouldn't say either of these two trumps each other. Both have their benefits and disadvantages which have been demonstrated in this article. I'd say if you are looking for a quick way to style a website or single pager with not much complexity; then TailwindCSS might be best for you. Mainly due to the amount of utility you get out of the box to style your classes. However, if you are looking for a longer-term project that can be more easily maintained. I would advise styled-components due to their more 'robust' feel to it when maintaining styles in my opinion. However, I am not an expert in either of them, I have simply just been building in both of these technologies and these are my initial thoughts.

Useful Resources:

TailwindCSS:

https://tailwindcss.com/

https://www.tailwindtoolbox.com/

https://tailwindcomponents.com/

Styled-Components

https://styled-components.com/

Thank you for reading, let me know in the comments below if you have used either of these or maybe both and how you found using them! 👇