Introduction to Tailwind CSS

on

Introduction

Styling and maintaining your web components are requiring bunch of time. With the help of prebuilt css utility framework like bootstrap and tailwind will ease your challenges on doing your own styles for your components for you to build very fast. It offers a ready to use styles and components that you can use in your web applications right away. In this article you will learn the foundation of tailwind css.


Before you begin you should know 

  • HTML
  • CSS
  • Angular (optional)

 

What is Tailwind?

Tailwind is a utility first CSS Framework designed to enable developers to create web applications faster and easier. It has set of utility classes which you can use to manage the layout, spacing, colors, typography, shadows, mobile responsiveness and many more. Allowing developers to use it without writing any single line of CSS.

Who created Tailwind?

It was developed by Adam Wathan, the goal of this framework is to provide more flexible and customizable approach on applying styles into web applications compared to traditional css framework like bootstrap.


Why it's name is Tailwind ?

The name “Tailwind CSS” is inspired by the concept of a “tailwind,” which is a wind that blows in the direction of travel, helping to move things along faster and more efficiently. Same thing with Tailwind CSS is designed to help developers build and customize applications quickly and easily .

 

Why you need to use Tailwind ?

  1.  Utility Classes
    • Tailwind provides bunch of utility classes that you can use. It helps developers to combined these classes to build unique output or styles. It is the same concept when you are trying to build a lego house. 

  2.  Rapid Development
    • As tailwind has ready defined utility classes. Developers will not spend so much time on creating styles from scratch and it will speed up development process.

  3.  Reusability
    • You can use tailwind classes anytime and any component, mixed and match. It doesnt allow you to maintain even single css file. unlike other framework you still need to touch or write your own styles.css

  4.  Everything is Responsive  
    • You an use tailwind to easily customized your styles in mobile, tablet, desktop views to be responsive in any devices(small to large devices)

  5.  Modern Frontend Framework and Library
    • You an use tailwind to modern single page applications and libraries like Angular, React, Vue and even in HTML CSS alone.



Comments

Post a Comment