Why does TailwindCSS work so well?

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money

As you can see from the npm.devtool tag: With 3 million NPM downloads per month and 9 million jsDelivr downloads per month, Star is on the verge of breaking 38K, and thousands more Packge and Github Repo are dependent on NPM. However, when you need to use it, Node should be older than 12.13.0

My CSS scheme commonly used TailwindCSS, here to talk about a little feeling, and some common questions to answer. TailwindCSS is controversial because of the fact that a class represents a CSS property, which is called Atomic CSS.

There are four granularities of CSS style schemes

One, four kinds of particle size

<div style="{borderRadius: '0.5rem', padding: '1rem'}"> Click </div>
Copy the code

<div class="rounded-lg p-4"> Click </div>
Copy the code

<div class="button"> Click </div>
Copy the code

<Button> Click </Button>
Copy the code

The more you go down, the larger the granularity, the higher the constraint, the less freedom. TailwindCSS is at the second layer.

Second, some answers to questions

Tailwindcss is popular for nothing more than atomized CSS for better use, in my opinion. A few days ago, I wrote an article about Tailwindcss on my blog, but there were a lot of comments on it, so I summarized it again

Q1: How is this different from inline CSS?

Most people think this: Text-center alone is a little convenient, but not enough to make a difference.

If it’s just simple atomized CSS, it’s easy to use but not brilliant. But it doesn’t stop there.

1. Convenience:text-center,grid-cols-3,w-[180px]

Maybe a text-center isn’t enough to give you the benefit of the doubt, but a grid-Cols-3 and shadow is definitely handy for a triscale Grid property

.grid-cols-3	{
  grid-template-columns: repeat(3.minmax(0.1fr));
}
Copy the code

Or can you remember the parameters for each position of the box-shadow? I guarantee that at least 93% of people reading this article can’t tell

In tailwind, using.shadow is easy and convenient

.shadow {
  box-shadow: 0 1px 3px 0 rgba(0.0.0.0.1), 0 1px 2px 0 rgba(0.0.0.0.06);
}
Copy the code

If you can’t remember all the class names at first, using square brackets is easy and doesn’t require too much memorization

<img class="absolute w-[762px] h-[918px] top-[-325px] right-[62px] md:top-[-400px] md:right-[80px]" src="/crazy-background-image.png">

<button class="bg-[#1da1f1]">Share on Twitter</button>

<div class="grid-cols-[1fr,700px,2fr]">
  <! -... -->
</div>
Copy the code

2. Semantic:text-lg, the text – white,ring,animate-spin`

Text-lg, a large font, has a lot of trouble with in-line styles: IF I want to design a large font, what size should I design it in, and what units should I use

Also:

1. text-whiteWhat’s the color value of white again?
2. ring: I want to put a circle around this button.
3. animate-spin: How to make an animation?

3. Constraints:bg-gray-500,text-lg,p-4

It’s easy for newcomers to create a red and green newbie style, and with some constraints it’s hard to have this kind of bad color control

Plus, with text-LG and the like, there aren’t dozens of different font sizes on a page

4. Response:

Let’s take a look at one of the most responsive layout problems I’ve ever encountered in my last headline interview

Responsive layout, a bunch of sub-elements, tripartite on the big screen, tripartite on the medium screen, tripartite on the small screen?

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
Copy the code

Grid layout is easy to implement, but cumbersome

@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(3.minmax(0.1fr)); }}@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2.minmax(0.1fr)); }}.conainer {
  display: grid;
  gap: 1rem;
}
Copy the code

What about using tailwind? Just one line, ask you if you’re efficient

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"></div>
Copy the code

5. The modifier

The prefixes of modifiers such as pseudo-classes, dark patterns, and reactive design are very much in my heart

<div class="focus:ring-2 hover:bg-red-700 dark:bg-gray-800"></div>
Copy the code

See TailwindCSS: Configuration variables for more modifiers

Q2: since TailwindCSS is so good, you can get rid of handwritten CSS

Unfortunately, I can’t. But while you can’t get rid of handwritten CSS, you can’t write more than a few lines. Here are some common cases

1. Complex selector

Style control for child elements while the parent element is hovering

.container:hover .item{}Copy the code

2. CSS function

.body {
  height: calc(100vh - 6rem)}Copy the code

3. Multiple attributes reuse

.item {
  @apply p-2 border-b flex justify-between font-mono;
}
Copy the code

Q3: Creating a new memory burden

The template syntax of Vue is often used in this way. Many people will naturally reject some naming conventions, especially those they don’t like.

In the early days, I did look at documents as I was developing web pages, but with the help of browser plugins and practice makes perfect, I don’t need to flip through documents as much

1. Tailwind CSS IntelliSense

In the early days, I often spent time flipping through documents rather than writing CSS by hand for two reasons:

1. Write a few more letters, it is a bit of trouble, have this time is better to look at the document, global search is not trouble
2. Set a fontSize, padding, margin really do not know how to set the size, tailwindCSS has a large constraint

How long does it take to be like, HMM, that smells good

Q4: Just to implement an atomized CSS, why so many stars?

Because he is more convenient, kind of solved the pain point. And Star has nothing to do with functional complexity

Using Gihub Star count and NPM weekly downloads to indicate the popularity of a library, you’ll find that some libraries have only a few dozen lines and more downloads than React/Vue/Angular combined

1. Mime: Obtains the MIME Type. Dozens of lines of code, 37 million downloads per week, 1.6K Star
2. Classnames: Connects the classnames based on conditions. A hundred lines of code, 5.8 million downloads per week, 13.5K stars
3. Js-cookie: Operates cookies. 100 + lines of code, 2 million downloads per week, 17K Star, but there are hundreds of millions downloads per month at Jsdelivr
4. ms: ms('2 days')Readability time is converted to seconds. Dozens of lines of code, 73 million downloads per week, 3.3K Star
5. IsMobile: checks whether the current web environment isMobile. Dozens of lines of code, 150,000 downloads per week, 2K Star
6. isci

Q5: Very cool in the early stage, but difficult to maintain in the later stage, especially after personnel transfer

I’m a moderate TailwindCSS user, so I don’t have any problems with late maintenance. Even easier to maintain than previous solutions

As for debugging, you can easily use chrome devtools, or can see to the end, and there is no previous various classes have repeated attribute overwriting, causing debugging difficulties, as shown in the following figure can be seen in tailwindcss debugging at a glance

Even if there are too many CSS classes, you can use the little arrows in the Computed panel to find the corresponding Class

Q6: While CSS has been greatly reduced in size, HTML has become much larger

Facebook’s CSS has been reconfigured from 413Kb to 74Kb.

At the heart of Gzip is Deflate, which uses the LZ77 algorithm and Huffman encoding to compress files. The more repetitive a file is, the more space it can compress.

Even if HTML gets bulky with too many class names, gzip will get a large compression ratio because the classes are highly similar.

Three, talk about some problems I have encountered

Q1: PurgeCSS may delete too many classes

Tailwind uses purgecss to remove useless classes, but sometimes deletes useful classes as well. The reason is also very simple, it does not dynamically execute the code, you calculate the class after he does not recognize you delete

Such as:

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
Copy the code

So I highly recommend using classnames

The above paragraph is described in the document: How to write the correct style recognized by PURgecSS

Q2: Style overlay problem

Which of the following red or blue styles will take effect? I can’t be sure.

<div class="red blue"> </div>
Copy the code

The order of the classes in the stylesheet is determined, not the order in the class. This causes problems when extending styles with className, as shown in the following example

import cx from 'classnames'

function Input ({ classname }) {
  // The default center provides the function of extending the outer class
  return <input className={cx('text-center', classname)} / >
}

function ExtendInput () {
  // The extension failed
  return <Input className="text-left" />
}
Copy the code

practice

A few more practical points

Use with classnames

classNames('text-center transition-opacity', showTip ? 'opacity-100' : 'opacity-0')
Copy the code

Used with Styled – JSX

At this point, the style consists of a lot of tailwind and a little styled- JSX. Note that the Styled – JSX postCSS plug-in is used

<style jsx>{` .item { @apply p-2 border-b flex justify-between font-mono; } `}</style>
Copy the code