In-depth analysis of Tailwind CSS (summary sharing)

This article brings you relevant knowledge about Tailwind css. TailwindCSS is a CSS framework. Like bootstrap, element ui, Antd, and bulma, it encapsulates some css styles for acceleration. A tool we developed that we hope will be helpful to everyone.

(Learning video sharing: css video tutorial) What is the difference between

and other CSS frameworks?

The development of CSS has basically gone through three stages.

In the first stage, the native writing method

is similar to the process-oriented writing method in programming. What style is needed and what style is written in css. Programmers who are obsessed with code will reuse simple css. But it is just simple reuse. Most of the time, you still write what you need and how you want to write.

The second stage is CSS componentization.

Similar to the object-oriented writing method in programming, the same visual UI is encapsulated into a component. For example, a button is used many times throughout the project and has the same style. Then it can be encapsulated into a button class. Just use this class name directly when using it.

This is also the approach of bootstrap, element ui, Antd, bulma.

The advantage of this framework is that encapsulates a large number of common UI. For example, you need a form, a navigation, a pop-up window, or a card. There are ready-made classes. Just take it and use it to get the effect quickly. No need to write css by hand at all.

This is also the more popular method at present. In recent years, there have been very few projects where I have handwritten styles bit by bit, and more or less some CSS frameworks have been used.

For some projects that need to be delivered quickly, this componentized CSS framework is very suitable for use.

The third stage is CSS componentization.

is also called CSS Atomization. There are similarities with the first and second stages above. They are still components, but each component is a single-function css property.

In the first stage above, we mentioned that some people who are pursuing code will start to reuse CSS.
For example, float:left is used extensively in the page. Then you can encapsulate a class, such as this

.left {float:left}

Then when you need to use float:left, just use .left directly.

But when we write CSS ourselves, we only encapsulate some commonly used simple classes. Most of the CSS requires manual writing of CSS. For example, if you want to write a width of 12 pixels. You have to write width:12px honestly. There is no way to escape it, but I guess no one has thought about it.

Tailwind CSS is the product of the third stage. What does it do?

It encapsulates all css attributes into semantic classes. For example, if you want a float:left, it has already encapsulated it for you. You can just use a float-left.
If you need a width of 12 pixels, just write w-3.

To give a complete example, you may need to achieve the following effect:

According to our normal writing method, you need to write like this

<p>
  </p><p>
    <img  class="chat-notification-logo lazy" src="/static/imghwm/default1.png" data-src="/img/logo.svg" alt="In-depth analysis of Tailwind CSS (summary sharing)" >
  </p>
  <p>
    </p><h4 id="ChitChat">ChitChat</h4>
    <p>You have a new message!</p>
  <style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }</style>

But using Tailwind CSS, you only need to write like this

<p>
  </p><p>
    <img  class="h-12 w-12 lazy" src="/static/imghwm/default1.png" data-src="/img/logo.svg" alt="In-depth analysis of Tailwind CSS (summary sharing)" >
  </p>
  <p>
    </p><p>ChitChat</p>
    <p>You have a new message!</p>
  

It greatly reduces the amount of code.

This way of writing is actually not unusual. As mentioned in the first stage above, when we write CSS ourselves, we will also do things like Tailwind CSS and simply encapsulate some CSS. Attributes.
Sina did this more than ten years ago, and ACSS also has the same principle. It was just sprayed into a sieve by everyone. If you do the right thing at the wrong time, you will inevitably pay the price.

Back to the topic, but what is the difference between it and CSS frameworks such as bootstrap?
The difference is that bootstrap helps you encapsulate some styles, such as cards, forms, buttons, navigation, etc.
Tailwind CSS does not encapsulate any styles, not even a bit.

bootstrap reduces customization. It is difficult for you to rely on bootstrap to customize a class of your own. Although bootstrap also has partially atomized class names, they are only commonly used. Some css properties.

Tailwind CSS is completely free. You can play your own tricks. You can even create your own UI framework like bootstrap through Tailwind CSS.

Tailwind CSS有什么优点？

可定制化程度极高。

你可以随心所欲写出自己的样式。 想怎么折腾怎么折腾。
如果使用bootstrap，你如果想改变一个按钮的样式，就会比较困难。你得用覆盖式的写法，通过自己的样式覆盖掉bootstrap自带的样式。如果框架本身不支持修改，你通过自己的写法去修改框架本身的特性，这是一种很脏的写法。非常别扭。
但是这个问题在Tailwind CSS完全不存在。Tailwind CSS没有自以为是的封装任何样式给你。

不需要在写css。
使用Tailwind CSS，基本可以不用再写css。所有的效果都可以通过class名来完成。我用Tailwind CSS写了几个页面，到目前位置，还没有写过一行css。

不需要再为class取个什么名字而苦恼。
对于经常手写css的程序员来说，最大的噩梦可能就是怎么给class取名了。尤其是在同一个区块里面，区块名称，子元素名称，等等，一个页面动辄几十个几百个类名。非常痛苦。而这其中，真正能复用的class可能就个别几个。

使用Tailwind CSS完全不用为取名字烦恼，因为所有的css属性都被框架语义化封装好了。只需要在class里面引用就好。

响应式设计

Tailwind CSS遵循移动优先的设计模式。断点系统 很灵活。也是目前所有css框架里做的最好的。比如你要实现一个媒体查询，根据不同的屏幕宽度实现不同的图片宽度。
按照之前的写法，你可能得这么干

@media only screen and (max-width:1280px) { 
    .img {     
    width:196px; 
    } }@media only screen and (max-width: 760px) { 
    .img {     
    width:128px; 
    } }

但是在Tailwind CSS，一句话就能搞定：

<img  class="w-16 md:w-32 lg:w-48 lazy" src="/static/imghwm/default1.png" data-src="..." alt="In-depth analysis of Tailwind CSS (summary sharing)" >

超级方便。

一套专业的UI属性值

Tailwind CSS虽然没有封装任何UI，但是他默认提供的一些属性值都是很专业的。比如颜色

还有各种内边距外边距，宽高，文字大小行高颜色等等。即使你不懂设计，按照他内置的属性做出来的东西，也不会太差。

说了半天，Tailwind CSS和内联样式有什么区别？

Tailwind CSS是把所有样式写在class里面。内联样式是把所有样式写在style里面，所以会让很多人造成一个印象：Tailwind CSS和内联样式差不多，大同小异。

其实是有很大的区别，Tailwind CSS相比于内联样式，有以下几点特点：

有约束的设计。

使用内联样式，每个值都是一个随便填写的数字。使用Tailwind CSS类，你要从预先定义好的设计系统中选择样式，这样你开发出来的页面，视觉上会保持一致，不会乱七八糟。

响应式设计。

您不能在内联样式中使用媒体查询，但您可以使用Tailwind的响应式类来轻松开发完全响应式界面。比如你可以在class里写一个sm:text-left,代表的是，在小屏幕上，文字居中的方式是居左显示。但是你在内联样式是不可能做到这些的。

可以直接写鼠标滑过，点击等其他状态的样式。
比如你可以在class里面写一个hover:text-white ,代表的是鼠标滑过的时候，文本是白色。

其他的很多特点，比如可维护性等等。

Tailwind CSS有什么缺点？

类名很长

正如Tailwind CSS官网首页的口号一样，从此让你写样式不再离开html页面。Tailwind CSS将HTML与CSS高度解耦，把本来CSS的一些工作转嫁给了HTML。好处是使用Tailwind CSS你可以从此不再写css。但坏处是你的html标签的类名会很长很长。比如

<a>Start Ticketing</a>

虽然Tailwind CSS也支持把很多属性提取成一个组件，但是对于不会再次复用的class。提取组件也没什么必要。
所以类名很多是我目前遇到的不太舒服的问题。

解决:
使用 @apply 提取类

<button></button>

.btn-primary {
  @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;

熟悉使用有成本

这一点逃避不了，所有的新技术，所有的css框架都有熟悉成本。Tailwind CSS也一样。比如你想做一个圆角，那你得知道Tailwind CSS里面的圆角属性怎么写，边框怎么写，边框样式怎么写等等。你需要不断的去看文档。

我对Tailwind的文档进行了翻译，中文文档见：http://tailwind.wyz.xyz/

所以一开始使用Tailwind CSS，特别是第一个项目，你会用起来比较痛苦。很多不喜欢Tailwind CSS的人可能从第一个项目就会放弃了。

但是只要你用Tailwind CSS做一两个项目，基本明确的告诉你，你以后很难再回到手写css的时候了。大多人都会觉得"很香"。

In addition, the author of Tailwind CSS developed a Tailwind CSS code prompt plug-in specifically for vscode to address this problem. It will effectively improve development efficiency.

Then do I want to learn Tailwind CSS?

Of course, this is must. As an emerging css framework. In the past two years, the growth rate of the Tailwind CSS framework has firmly ranked first. Moreover, this way of writing is superior to any other css framework at present, and it seems that this is also a trend. Unless something weird comes out in the future.

It is recommended that people who are pursuing technology should learn it. All new technologies are difficult to learn but easy to use.

Do you want to refactor your previous projects using Tailwind CSS?

In most cases is not recommended. The main advantage of Tailwind CSS is the improvement of development efficiency. If you have completed a project. There is no need to reuse Tailwind CSS.
But if you had this project before, you would have been ready to refactor it. If you are hesitating about which CSS framework to use, you can try Tailwind CSS.
In addition, if a project updates and iterates the front-end interface every three days, and the previous code is not very good, it is recommended to use Tailwind CSS reconstruction.

Can we give up frameworks like bootstrap in the future?

No, it mainly depends on your scene. In my personal opinion, if a project needs to be delivered quickly or simply, there is no need to use Tailwind CSS. Using frameworks such as bootstrap and bulma can help you complete a project quickly. Don’t get too hung up on the technology.
Tailwind CSS is more suitable for scenarios with high page customization.

I heard that Tailwind CSS files are very large, right?

Yes. Because it needs to encapsulate all css attributes, the css file is huge, more than 3M. Therefore, it is not recommended to directly introduce Tailwind native css files into the page.
Tailwind CSSIn order to solve this problem, the official team proposed a scheme, which introduces the PurgeCSS tool during compilation. When building, it willAutomatically delete all css you don’t use. Only keep the css you use. The css file finally packaged in this way is extremely small. The css file built by a general project will not even exceed 10K when compressed.

Windi CSS

• If you are already familiar with Tailwind CSS, you can consider Windi CSS as a Tailwind alternative that provides more FAST LOADING TIMES

By scanning your HTML and CSS and generating utilities on demand, Windi CSS delivers faster loading times and fast HMR in development, without the need for production To clear.

• Windi CSS supports all utilities of Tailwind CSS without any additional configuration.
• Windi CSS You can add the prefix ! to any utility class to make them !important. When you want to override a specific This can be useful when specifying a previous style rule for an attribute.
• Windi CSS Simpler responsive design.
• Windi CSS Supports attribute mode, you can write windi classes in html attributes
• Windi CSS Has out-of-the-box dark mode support .
• Windi CSS Apply utilities to identical variations by grouping them with brackets.
• Visual analysis tool for Windi CSS. Browse your utility usage, understand your design system, identify "bad practices" and more!
• Windi CSS also offers first-class integration.

Build tools

Framework

Editor

##API

##Command

@apply
• : Inline any existing utility classes into your style block.
@variants
• : You can generate screen variants, state variants, theme variants of your own utility by wrapping their definitions in directives.
@screen
• : Allows you to create media queries that reference breakpoints by name.
@layer
• : Set the application order of each class.
theme()
• : This function allows you to access your configuration values ​​using dot notation.
(Learning video sharing:

css video tutorial

)

The above is the detailed content of In-depth analysis of Tailwind CSS (summary sharing). For more information, please follow other related articles on the PHP Chinese website!