Tailwind

Introduction to Tailwind CSS


Introduction

Tailwind CSS is a utility first CSS library, which means it helps developers style their websites and web applications without creating a class name, writing their own CSS or creating CSS files, they also can use this in any technology

Why use Tailwind ?

It was created to be highly customizable and more useable than any other CSS framework like Bootstrap. Its class names are compact and easy to understand and write or read and also helps to other developers to understand. We can also create our own classes in this using multiple classes of Tailwind or write our custom classes or CSS in Tailwind. It will compile at run time, so its property is also capable of rewriting any other CSS.

1. Better than custom CSS

  • any component created with tailwind CSS we can reuse multiple times because in this every class is global, they don't have their parent element dependencies.
  • In tailwind CSS there is one property written only one time, but if we use custom CSS there is more chance to write the same property multiple times which means its also lightweight and smaller than custom CSS.
  • It runs time compilable library so that the classes we use only that class come in our browser, not any unnecessary classes.

2.  Better to inline CSS 

The major discussion people have with this approach is, "Isn’t this just inline styles?" In a way, you were applying styles directly to elements and not bothering to give them a class to which you then apply styles.

  • Most people say this is just like inline CSS, why we don't use inline CSS instead of tailwind?
  • here is a point it's far way better than inline CSS If we use inline CSS instead of tailwind CSS that means we write more CSS properties, but in tailwind, there is one property written only once a time. in vs code or many more IDE has tools to suggest for tailwind class that helps to style our component or element.
  • while using inline CSS we need to write CSS property and value both but in a tailwind, we write the only class name that is also more compact than inline CSS.
  • in inline CSS very difficult to write responsive CSS but in a tailwind, it's very easy.
  • in Inline CSS we can't write hover, focus, after or before but in Tailwind it's very easy.

<button className="relative text-white bg-blue-500 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 px-4 py-2 rounded"> <span className="before:content-['💡'] after:content-['✏️'] before:pr-1 after:pl-1"> Hover & Focus Button </span> <div className="mt-2 text-sm text-gray-700"> * applies to all child elements </div> </button>

 

Ready to transform your business with our technology solutions? Contact Us today to Leverage Our Tailwind Expertise.

0

Tailwind

Related Center Of Excellence