Objectively evaluate TailwindCSS, whose growth trend is stronger than vite

Author: pxn > Source: medium

If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.

Common religious war articles in the front-end community: TailwindCSS is fundamentally evil and crooked, and Class is not used like this at all. It's really fucking hot when I see it - hardcore CSS/SCSS supporter

There will be such remarks, maybe it is not suitable to use such a framework in your daily workflow, or maybe you have not objectively understood the advantages of TailwindCSS, so you cannot appreciate its charm.

Conclusion: If you are a team doing SAAS products, you need to expand on a unified product style theme, and use a front-end framework such as React that can modularize x components, then TailwindCSS will be a style solution worth importing.

name

I've found that for me the flow state is often interrupted by naming components, and in traditional CSS/SCSS I need to stop and think about a set of components and their subcomponents class name name, check whether it will conflict with existing components, this extra step is actually a drag on development efficiency.

It is true that you can use some naming strategies such as Nested classes / BEM to make such steps consistent and reduce naming collisions, but when writing components in the JS part, you have to name components/name variables, name things and name things , many times your CSS just changes the name of the JS definition to the text format, copy and paste it

For example, there is a component here AwesomeCard

 AwesomeCard -> .awesomecard
AwesomeCardIcon -> .awesomecard__icon
AwesomeCardBody -> .awesomecard__body
AwesomeCardButton -> .awesomecard__button

To put it bluntly, it is a repetitive action that wastes life.

The following is the naming of a situation. I often interrupt my thinking with "Dad".

 <div class="flex items-center justify-between px-3">
  <div class="flex items-center">
    <Icon/>
    <span class="ml-1">Label</span>
  </div>
  <Caret />
</div>

div搭配flex ，例如上面的代码中，我Icon跟Label The two are vertically Caret , this group of components should be vertically centered and aligned with the left and right borders, and you may need to use several classes

 <div class="btn__container">
  <div class="btn__leftgroup">
    <div class="btn__icon" />
    <span class="btn__label">Label</span>
  </div>
  <div class="btn__caret"/>
</div>

To have an additional name btn__container btn__leftgroup will make me very irritable. If these steps can be saved, I think it can greatly improve the development efficiency.

switch between files

Another factor that affects the workflow of work is the separation of files HTML/JS/CSS . Although separation of concern is a very important concept in software work, in front-end practice, the coupling of the three files is extremely high. One must change the other two, and switching files frequently is actually very inefficient.

Taking the React framework as an example, Html has been integrated into JSX. When you are accustomed to this working mode, you will want to further include style definitions, which is why there are various css-in-js TailwindCSS is also a kind of css-in-js to some extent, various component state logic, such as changing the text/background color after clicking, can be switched directly through JSX className achieve (with npm modules such as classnames is even more powerful)

uniform style

If it is a SAAS product, you will want the entire team to have a consistent color palette, while maintaining limited options for font size, spacing, common width and height, so that you can better align the component layout. TailwindCSS has already helped you. Extract the most common ones text/bg color、font-size、spacing . The initial settings of the framework are quite sufficient. Usually, you only need to define the color wheel for the product brand color, and other parameters need to be customized to modify and expand through the configuration file. Also very convenient.

You may say that I can also define various variables in SCSS, yes, but you have to set up a set of parameter rules yourself or refer to a certain framework template (MUI/AntD/Bootstrap) to implement.

Then I came back to the question of a lazy person who wants to save typing. What is it?

 <div class="bg-gray-100">...</div>

still

 <div class="card"></div>
.card {
  background-color: $gray100
}

For me, the difference is actually quite stark.

verbose class name

 <div class="w-96 bg-white shadow rounded flex items-center">...</div>

Orthodox hard-core CSS users who usually oppose TailwindCSS, the most common attack is the long class name of Atomic utility classes, but this component encapsulation through React is not a problem at all, usually you will hide these complexities in the available In reusable components, in fact, when developing, the code is often very clean and easy to read

For example, the component of the next navigation looks like this in the DOM tree

 <ul class="flex">
  <li class="mr-6"><a class="text-blue-500 hover:text-blue-800" href="#">Link</a></li>
  <li class="mr-6"><a class="text-blue-500 hover:text-blue-800" href="#">Link</a></li>
  <li class="mr-6"><a class="text-blue-500 hover:text-blue-800" href="#">Link</a></li>
</ul>

li can be extracted and written as a separate component

 const NavItem = ({ href, children }) => <li class="mr-6"><a className="text-blue-500 hover:text-blue-800" href={href}>{children}</a></li>

In this way, your JSX source code can be organized into the following more readable format

 <ul className="flex">
  <NavItem href="#">Link</NavItem>
  <NavItem href="#">Link</NavItem>
  <NavItem href="#">Link</NavItem>
</ul>

Of course, the premise is that with React, a framework that can easily encapsulate composite components can achieve the maximum effect. If you don't use a similar framework, I can't deny that the class of atomic css is really long and hard to read.

Stylesheet with smaller file size

There is no doubt about this, because most of the utility classes are shared, and there is no redundant naming. TailwindCSS also comes with Tree Shaking, which will not generate unused classes. The overall CSS stylesheet file can be compressed to a very small size. The browser loads super fast.

Summarize

As an old saying goes, there is no good or bad tool, only whether it is suitable or not. As far as my personal development experience is concerned, importing TailwindCSS is well received by the team in the Developer Experience. In recent years, the rise of TailwindCSS, if it does not solve some pain points, why is it so? Many people tout?

If it’s just psychologically difficult, and still holding the pride and restraint of writing traditional CSS methods, I don’t have an objective understanding of the new tool and its applicable scenarios, I think it’s a pity, after all, if it is used well, it can really be used for you. It brings better productivity and efficiency, and teamwork can work harmoniously because of common standards. Why not?

The bugs that may exist in editing cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, here is a useful BUG monitoring tool , Fundebug .

Original: https://medium.com/@nightsprit622/%E5%AE%A2%E8%A7%80%E8%A9%95%E5%83%B9-tailwindcss-af27581f6d9

comminicate

The article is continuously updated every week. You can search for "Big Move to the World" on WeChat to read and update it as soon as possible (one or two articles earlier than the blog). This article GitHub https://github.com/qq449245884/xiaozhi has been included and sorted. Many of my documents, welcome to Star and improve, you can refer to the test center to review for interviews, and pay attention to the public account, reply to the benefits in the background, you can see the benefits, you know.