This article has been exclusively licensed from the author and has been slightly embellished by me. It is translated from TailwindCSS vs Styled-Components in ReactJs

A few days ago, I published a new blog post detailing my experience using Styled – Components and how to integrate dynamic styles into the JS domain and avoid using CSS files. Then I found another way to incorporate styles into applications… That is TailwindCSS.

I’ve seen some discussions about this before, as well as many videos and posts about TailwindCSS, but didn’t give it much thought. So now that I’ve been told about it again, I want to try it, too, so I can compare my experiences. I decided to build a website using TailwindCSS.

Tailwind met

To get you started and understand this article, the following points are important:

  1. TailwindCSS is a package full of pre-built classes that can style components, but they are flexible enough that you can do anything with them
  2. You don’t need to know CSS to use TailwindCSS
  3. TailwindCSS uses a lot of abbreviations, such as (PB is padding-bottom), so it’s important to read the document and use its search function when in doubt

Is Tailwind more like bootstrap?

I have to say my initial impression of TailwindCSS is pretty good. It uses a lot of bootstrap semantics and is almost extended so much that you never have to use direct CSS media queries to toggle style differences. Instead, you can do this:

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

For those of you who have used style frameworks before, such as Material UI, Bootstrap, etc. You need to understand the use of these different media breakpoints (SM, MD, LG, etc.).

It’s basically saying,

  • When my device size is less thansmWhen settingpadding-bottom 为 10 ;
  • Set when my device size is small (SM) or largerpadding-bottom 为12 ;
  • Set when my device size is medium (MD) or largerpadding-bottom 为8 ;
  • Set when my device size is larger (LG) or largerpadding-bottom 为4.

I must say, it took me a while to really understand a technique where there is no X breakpoint, which is the kind of example you would normally find in Bootstrap. Simply put, any device lower than SM inherits TailwindCSS classes without a media breakpoint like “PB-10” above.

Will Tailwind cause a lot of classes?

Tailwind does make your tag look like it has a lot of classnames, which is really frustrating. Adding a lot of class classes to every element can easily end up with huge class attribute values, unused classes stuck on unwanted elements, and so on. A good way to do this is to use a classNames package that combines these classNames together and allows you to format elements a bit more cleanly

For example:

module.exports = {
  theme: {
    // ...
    fontSize: {
      xs: ['0.75 rem', { lineHeight: '1rem'}].sm: ['0.875 rem', { lineHeight: '1.25 rem'}].base: ['1rem', { lineHeight: '1.5 rem'}].lg: ['1.125 rem', { lineHeight: '1.75 rem'}].xl: ['1.25 rem', { lineHeight: '1.75 rem'}].'2xl': ['1.5 rem', { lineHeight: '2rem'}].'3xl': ['1.875 rem', { lineHeight: '2.25 rem'}].'4xl': ['2.25 rem', { lineHeight: '2.5 rem'}].'5xl': ['3rem', { lineHeight: '1'}].'6xl': ['3.75 rem', { lineHeight: '1'}].'7xl': ['4.5 rem', { lineHeight: '1'}].'8xl': ['6rem', { lineHeight: '1'}].'9xl': ['8rem', { lineHeight: '1'}],,}}},Copy the code

How does Tailwind compare to styled- Components?

What I really like about styled- Components is that it makes your components look very simple. For example, you can create a stylized div and reference it:

import styled from 'styled-components'

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

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

In my opinion, this approach keeps components clean and tidy, allowing us to write components more logically than visually. You can even go one step further and extract the styles into a single JS file, abstracting the scope of the component. However, let’s see what this looks like in Tailwind:

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

As you can see, Tailwind actually reduces the number of lines of code we need to write to achieve the same goal. This is the intent of effective class class methods. It does simplify the writing of styling elements, however, it is very friendly for our element because it has only a few styles. Let’s look at a comparison of components with more complex styles:

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

const TestComponent = () = > (
    <>
        <Button>
            Hello world!
        </Button>
    </>
);
Copy the code
  • Tailwind
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>
);
Copy the code

As you can see from the above comparison, the Styled Components are indeed superior now because of the evolving style rules for our component. Tailwind makes className verbose, and it does make our lines much longer than they should be if we didn’t use packages like className class names. In my opinion, this is one of Tailwind’s biggest failures.

In particular, styled components make it easy to read the style of a component if you are doing multi-party development. In contrast to Tailwind, you may have to look up some utility classes in the documentation to understand what these values mean

Comparing this example to the first, Tailwind is simply purported to be simple, and the subsequent examples contain only complex and high-risk code. Just having multiple developers working on a few component styles at the same time can cause problems, and then they need to spend more time figuring out the root causes and removing specific utility classes. In my opinion, it is much easier to administer than the Styled – Components, which still rely on the original CSS changes

Styled components or Tailwind, which is better?

I honestly don’t think the two go together. Both of them have their own advantages and disadvantages, and have been verified in this paper.

I would say that if you are looking for a quick way to build a site quickly or generate a single page (i.e., uncomplicated pages), Tailwind might be perfect for you. This is mainly because you can get a lot of useful classes from the framework for styling.

However, if your goal is to develop a longer term project and you want it to be easy to maintain, I recommend using styled components, as they have a more “robust” feel when maintaining the style, in my opinion. However, I’m not an expert on either, I simply built both technologies, and those were my initial ideas.

link

  • TailwindCSS
  • styled-components