TailwindCSS is officially a framework that allows you to modify styles in HTML directly through class without using CSS files.

But TailwindCSS has always been a controversial CSS scheme. The first question is how is this different from writing style CSS?

The four granularity of the CSS

First of all, we will use some of the 4 methods in our CSS style modification method

<div style=" borderRadius: '0.5rem', padding: '1rem'}">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.

The first layer is hard to reuse, so TailwindCSS chose the second layer.

Benefits of using TailwindCSS

Not long ago, Facebook’s CSS was reconfigured to shrink from 413KB to 74KB.

But a lot of developers, very confused. My CSS file is down, but my HTML and component files are getting really big, don’t know what the benefit is here?

First of all, the current development model is component development, even if you are doing a CSS for maintenance. In fact, many of the style properties that this component has, that component has reuse. This is not necessary; the component styles here are left to the component to maintain.

The second point is to think of this doubt, it is estimated that did not go to understand nginx gzip. I just knew it was happening.

Deflate, the core of Gzip, uses the LZ77 algorithm and Huffman encoding to compress files, with more repeatable files having more space to compress.

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

This is what TailwindCSS wants

Response:

The first time I used the Tailwind UI framework, I saw a lot of things like this.

class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4"
Copy the code
<! -- This example requires Tailwind CSS V2.0 + -->
<div class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
  <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
    <! -- Background overlay, show/hide based on modal state. Entering: "ease-out duration-300" From: "opacity-0" To: "opacity-100" Leaving: "ease-in duration-200" From: "opacity-100" To: "opacity-0" -->
    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>

    <! -- This element is to trick the browser into centering the modal contents. -->
    <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">The & # 8203;</span>

    <! -- Modal panel, show/hide based on modal state. Entering: "ease-out duration-300" From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" To: "opacity-100 translate-y-0 sm:scale-100" Leaving: "ease-in duration-200" From: "opacity-100 translate-y-0 sm:scale-100" To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" -->
    <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
      <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
        <div class="sm:flex sm:items-start">
          <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
            <! -- Heroicon name: outline/exclamation -->
            <svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox=24 24 "0 0" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3l13.732 4c-.77-1.333-2.694-1.333-3.464 0l3.34 16c-.77 1.333.192 3 1.732 3 z" />
            </svg>
          </div>
          <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
            <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
              Deactivate account
            </h3>
            <div class="mt-2">
              <p class="text-sm text-gray-500">
                Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
        <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
          Deactivate
        </button>
        <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
          Cancel
        </button>
      </div>
    </div>
  </div>
</div>
Copy the code

Whatever number you want, just write it down.

And then there’s the corresponding response

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

Who are you more comfortable with than the @media you use?

@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

Having said that, what’s the downside of TailwindCSS? Let me tell you what I think.

You can’t use TailwindCSS directly for the first complex CSS operation

.container:hover .drowload{
    display: block;
}
Copy the code

In the case above, you need to write CSS to manipulate the display of child elements, unless you are bored and want to use JS, which is fine.

The second is to increase the memory burden, its name is not the same as you know how to use, early need to consult the document, or download TailwindCSS prompt plug-in. Or you don’t know where to start.

But once you get used to it and get conditioned, that’s another thing, you scream.

conclusion

If you are doing code acceleration optimization, you can try TailwindCSS. Because after gzip is really small.

If you’re a fussy person, try TailwindCSS.

If you feel that your component is ready to use a single CSS on its own, TailwindCSS can be used to create the component. When you want to change code later, you only need to go to this component and do not worry about your class affecting other components.