Shulou(Shulou.com)06/01 Report--

This article mainly shows you the "sample analysis of Tailwind CSS", which is easy to understand and well-organized. I hope it can help you solve your doubts. Let the editor lead you to study and learn the article "sample Analysis of Tailwind CSS".

TailwindCSS is a CSS framework that encapsulates some css styles like bootstrap, element ui, Antd and bulma to speed up our development of a tool.

How is it different from other CSS frameworks?

Up to now, CSS has basically gone through three stages.

The first stage, the original writing method.

It is similar to the process-oriented writing in programming, what style you need and what style you write in css. Programmers who are addicted to code cleanliness will do simple css reuse. But it's just simple reuse, and 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 in programming, UI with the same vision is encapsulated into a component. Such as a button, this button is used many times throughout the project, and the style is consistent. Then it can be encapsulated into a button class. Use this class name directly when using OK.

This is also what bootstrap,element ui,Antd,bulma does.

The advantage of this framework is that it encapsulates a large number of common UI. For example, you need a form, you need a navigation, you need a pop-up window, you need a Card card. There is a ready-made class. Bring it directly to use, you can quickly complete the effect. There is no need to write css at all.

This is also a popular method at present. Few projects have been handwritten by themselves in recent years, and some css frameworks have been used more or less.

This component-based css framework is well suited for projects that require quick delivery.

The third stage, CSS components.

Also known as CSS atomization. It is similar to the first stage and the second stage above. It is still a component, but each component is a css property of a single function.

In the first phase above, we talked about some people who are interested in code and will start to reuse css.

For example, a large number of pages use float:left. Then you can encapsulate a class, such as this.

.left {float:left}

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

But when we write css ourselves, we only encapsulate some commonly used simple classes, and the vast majority of css need to write css. For example, you have to write a width of 12 pixels. You have to be honest to write width:12px, can not escape, but probably no one wants to escape.

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

It encapsulates all the css attributes into semantic classes, such as if you want a float:left, it has been encapsulated for you, you can use a float-left directly.

Need a width of 12 pixels, just write wmur3.

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

According to our normal way of writing, we need to write like this.

ChitChat You have a new message!

.chat-notification {display: flex; max-width: 24rem.margin: 0 auto; padding: 1.5remr; 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: 3remt;} .chat-notification-content {margin-left: 1.5remt; padding-top: 0.25remt;} .chat-notification-title {color: # 1a202c; font-size: 1.25remr; line-height: 1.25;} .chat-notification-message {color: # 718096; font-size: 1Reme; line-height: 1.5;}

But with Tailwind CSS, you just need to write like this.

ChitChat

You have a new message!

The amount of code is greatly reduced.

In fact, this way of writing is not uncommon, as mentioned in the first stage above, when we write css ourselves, we will do something like Tailwind CSS and simply encapsulate some css attributes.

Sina did this more than a decade ago, and ACSS is also based on this principle. It was just sprayed into a sieve. If you do the right thing at the wrong time, you will inevitably pay the price.

Back to the point, but how is it different from a css framework like bootstrap?

The difference is that bootstrap encapsulates some styles for you, such as cards, forms, buttons, navigation and so on.

Tailwind CSS does not encapsulate any style, none at all.

Bootstrap reduces customization, and it's hard to rely on bootstrap to customize a class of your own. Although bootstrap also has partially atomized class names, those are just some commonly used css attributes.

Tailwind CSS is completely free, you can play your own tricks, and you can even create your own ui framework like bootstrap through Tailwind CSS.

What are the advantages of Tailwind CSS? The degree of customization is very high.

You can write your own style as you like. Do as much as you want.

If you use bootstrap, it will be difficult if you want to change the style of a button. You have to use the overlay style and overwrite the style that comes with bootstrap with your own style. If the framework itself does not support modification, you use your own writing to modify the characteristics of the framework itself, which is a very dirty way to write. Very awkward.

But this problem does not exist at all in Tailwind CSS. Tailwind CSS does not self-righteously encapsulate any style for you.

You don't need to write css anymore.

With Tailwind CSS, you basically don't have to write css. All effects can be done through the class name. I've written a few pages in Tailwind CSS, but I haven't written a line of css so far.

There is no need to worry about the name of class.

For programmers who often write css by hand, the biggest nightmare may be how to name class. Especially in the same block, block name, child element name, and so on, there are dozens of hundreds of class names on a page. Very painful. Among them, there may be only a few class that can be reused.

You don't have to worry about naming Tailwind CSS at all, because all the css attributes are wrapped in the semantics of the framework. Just quote it in class.

Responsive design

Tailwind CSS follows the design pattern of mobility first. The breakpoint system is flexible. It is also the best of all css frameworks so far. For example, you want to implement a media query to achieve different picture widths according to different screen widths.

In the way you wrote it before, you might have to do this.

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

But at Tailwind CSS, it can be done in one sentence:

It's super convenient.

A set of professional UI attribute values

Tailwind CSS doesn't encapsulate any UI, but some of the attribute values he provides by default are professional. Like color.

There are all kinds of inner and outer margins, width and height, text size, line height, color and so on. Even if you don't know how to design, something made according to its built-in properties won't be too bad.

After a long time, what's the difference between Tailwind CSS and inline style?

Tailwind CSS is to write all the styles in class. Inline style is to write all the styles in style, so it will give many people the impression that Tailwind CSS is similar to inline style, more or less the same.

In fact, there is a big difference. Compared with the inline style, Tailwind CSS has the following characteristics:

Constrained design.

Using the inline style, each value is a randomly filled number. With the Tailwind CSS class, you have to choose a style from a predefined design system, so that the pages you develop will be visually consistent and will not be in a mess.

Responsive design.

You cannot use media queries in an inline style, but you can use Tailwind's responsive classes to easily develop a fully responsive interface. For example, you can write a sm:text-left in class, which means that on a small screen, the text is centered and displayed on the left. But you can't do that in the inline style.

You can directly write the style of other states such as mouse over, click and so on.

For example, you can write a hover:text-white in class, which means that when the mouse is over, the text is white.

Many other features, such as maintainability and so on.

What are the disadvantages of Tailwind CSS? The class name is very long

Just like the slogan on the front page of the Tailwind CSS website, let you write styles and never leave the html page. Tailwind CSS decoupled HTML from CSS and transferred some of the work of CSS to HTML. The advantage is that with Tailwind CSS you can never write css again. But the downside is that the class name of your html tag will be very long. such as

Start Ticketing

Although Tailwind CSS also supports the extraction of many attributes into a single component, for class that will not be reused. There is no need to extract components.

So a lot of class names is an uncomfortable problem I have encountered at present.

Resolve:

Use @ apply to extract classes

.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; is familiar with the cost of use

There is no escape from this. All new technologies and all css frameworks have familiar costs. The same goes for Tailwind CSS. For example, if you want to make a fillet, you need to know how to write the fillet attribute in Tailwind CSS, how to write the border, how to write the border style, and so on. You need to keep looking at the documents.

I have translated the Tailwind documents. For Chinese documents, please see http://tailwind.wyz.xyz/.

So it will be painful for you to use Tailwind CSS at first, especially for the first project. Many people who don't like Tailwind CSS may give up from the first project.

But as long as you do one or two projects with Tailwind CSS, it's basically clear that you won't be able to go back to handwriting css in the future. Most people will think "very fragrant".

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

Should I learn Tailwind CSS?

Of course, this is necessary. As a new css framework. In the past year or two, the growth rate of the Tailwind CSS framework has steadily ranked first. And this way of writing, from the current point of view, superior to any other css framework, it also seems to be a trend. Unless something weird comes out in the future.

It is suggested that people who have a pursuit of technology had better learn. All new technologies are hard to learn, but easy to use.

Do you want to ReFactor previous projects with Tailwind CSS?

In most cases, it is not recommended that the main advantage of Tailwind CSS is the improvement of development efficiency. If you have already developed a project. There is no need to re-use Tailwind CSS.

But if you had this previous project, you would have refactored it. If you are hesitant about which css framework to use, you can try Tailwind CSS.

In addition, if a project updates the front-end interface every two days, and the previous code is not well written, it is recommended to use Tailwind CSS refactoring.

Is it possible to give up frameworks like bootstrap in the future?

No, it mainly depends on your scene. I personally feel that if a project needs to be delivered quickly or easily, it is not necessary to use Tailwind CSS. Using a framework such as bootstrap,bulma allows you to finish a project quickly. You don't have to worry too much about technology.

Tailwind CSS is more suitable for scenarios where the page is highly customized.

I heard that Tailwind CSS's file is very large, isn't it?

Right. Because it needs to encapsulate all the css attributes, the css file is huge and more than 3m. Therefore, it is not recommended to introduce Tailwind native css files directly into the page.

In order to solve this problem, the official team of Tailwind CSS has proposed a solution to introduce PurgeCSS as a tool at compile time, and automatically delete all css that you do not use when building. Keep only the css you use. In this way, the final packaged css file is very small, and the css file built by a general project will not even be more than 10K after compression.

Windi CSS

If you are already familiar with Tailwind CSS, you can think of Windi CSS as an alternative to Tailwind, which provides faster load time

By scanning your HTML and CSS and generating utilities on demand, Windi CSS can provide faster load time and faster HMR in development without the need for cleanup in production.

Windi CSS supports all Tailwind CSS utilities without any additional configuration.

You can prefix any utility class in Windi CSS! To set them to! important. This can be useful when you want to override previous style rules for specific properties.

Windi CSS's simpler responsive design.

Windi CSS supports attribute mode, and you can write windi classes in html properties

Windi CSS has dark mode support out of the box.

Windi CSS applies the utility to the same variant by grouping them in parentheses.

Visual analysis tool of Windi CSS. Browse your utility usage, learn about your design system, identify "bad practices", and so on!

Windi CSS also provides best-in-class integration.

Build tool

Frame

Editor

API

Instruction

Apply: inline any existing utility classes into your style block.

Variants: you can generate screen variants, state variants, and theme variants of your own utilities by wrapping their definitions in instructions.

Screen: allows you to create media queries that reference breakpoints by name.

Layer: sets the order in which each class is applied.

Theme (): this function allows you to access your configuration values using dot notation.

The above is all the content of this article "sample Analysis of Tailwind CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.