What is Tailwind CSS

Tailwind Is a new CSS Framework for rapid UI development, first released since October 2019, original project developed by Adam Wathan. When it comes to css frameworks, we all think of Bootstrap, Foundation, Material Design … but Tailwind differs from those frameworks in its approach.

Most css frameworks choose the “Component first” approach, which is the instant noodle approach, they create ready-made components for the programmer to use only to improve the product quickly but because that brings but the downside is that it is difficult to Override those components, while Tailwind CSS uses “Utility-first Framework” approach,

Tailwind’s Strengths

With the “Utility-first Framework” approach, Tailwind has the following strengths:

• Easy to manage and modify in large projects.
• Use predefined classes that are highly customizable and extensible.
• Class names are easy to understand and friendly, look at the class and know what this class is styling
• Using Flex is very easy to divide Layout
• Easy to install, easy to use, Tailwind’s documentation is easy to understand.
• Optimized for mobile environments and easy to support responsive.
• Ability to extract common, repetitive patterns into custom elements that can be reused in most cases without writing a single line of custom CSS.

Through the above strengths, we also have the answer to the question of why many projects use tailwinds, for projects that need a highly customizable and extensible interface, Tailwind is a suitable choice. well suited

The downside of Tailwind

The biggest downside is that when using Tailwind, our tags need a lot of classes, each attribute is a class then the code will be very long and complicated.

install Tailwind

1. Use direct link in html

2. We install via npm

We create the file styles.css, which will contain the style frameworks using the @tailwind directive:

Then run the npx tailwind init command This command creates an empty tailwind.config.js file, in which we will set the custom options during development. The generated file contains only:

The next step is to build styles to use them:

Finally, let’s link the generated output.css file and Font Awesome in the HTML.

Using utility classes to build interfaces

We build the above chat box interface with this code

In the above example we use classes:

• (flex, flex-shrink-0, and p-6): to control card wrapping
• (max-w-sm and mx-auto): to limit the width and center horizontally
• (bg-white, rounded-xl, and shadow-md) css background, border, shadow for the tag
• (w-12 and h-12): width and height for the photo
• (space-x-4): space between logo and text
• (text-xl, text-black, font-medium, etc.): font size, text color, and font-weight Through the above example classes we see how class names are easy to understand, the name is exactly like its function. , you can see through the examples below similar

For example:

We only need a simple code like this to create the above interface

Or you need to create the box as above, then using the tailwind with the available classes is very simple with this code

End

Through this article we also see the strengths and weaknesses and the basic usage of the css tailwind framework from which we can also consider using.