lets-learn-tailwind-css's Introduction

Lets-learn-Tailwind-CSS

Truely, this is an awesome experience with tailwind Css. An amzing technology to stylize your web and mobile apps. This is just a static website and also compatible with mobile devices. Sharing this readme is to understand, how tailwind works under hood?

I have used some useful classes

`For Background-color:- Please Use bg-white`

`For text-color:- Please Use text-white`

`For hover:- Please Use hover:bg-white`

`For border-radius:- Use rounded with define md or lg etc`

`For box-shadow:- Use shadow with define md or lg etc`

`For font-weight:- Use font with define bold or medium etc`

`For flex:- Use just flex`

`For flex-direction:- Use flex-row or flex-col`

`For gap:- Use gap wirh define 1 or 2 with define md or lg etc`

`For justify-content-center:- Use justify-center and other classes with this way`

`For border:- Declare border then use border with your selective color Such as border-gray-50`

`For duration :- Use duration with your selective duration timing`

`For animation:- Use animation name Such as ease-in`

`For hide: Use hidden`

`What means lg:hidden:- Means that on large screen. Please, hide the respective element`

Before Reading the Tailwind Css breakpoints. Please, remember that Tailwind is using Mobile First Approach (MFS).

For small sized sxreens:- 640px
For medium sized screens: Same as like bootstrap 768px
For large sized screens: 1024px
For extra large sized screens: 1280px
For extra extra large sized screens: 1536px

Recommend Projects