---
# System prepended metadata

title: Tailwindcss

---

Tailwindcss
Learning is a building block.Small pieces build up the ocean. Tailwindcss is a build up css from the knowledge of normal or vanilla css.
Tailwindcss is a utility-first Css(Cascading Style Sheet) frame work that allows you to write more concise and maintanable CSS. It makes use of simple acronym from vanila css for consumption of less space and modification. Its a form of in-line styling in which you style directly on the element you're working on. examples include;
`<h1> ` to style this element on tailwind
```
<h1 class="bg-red-100 font-bold ">
    hello world!
</h1>
```
    bg represents background-color,font:font family which is font weight in css
`<p class="p-4 m-2 ">Learning has no time frame. We learn every day and consistently.</p>`
 From the above example, p=padding, m=margin. Other examples of p and m includes: pt-padding top, ml-margin left, my-margin horzontal i.e.,left and right
 or px-paddind vertical i.e.,top and bottom.
  In flex, where we have display: flex, justify content: center, align items:center. Tailwindcss will just be
  
 ```
<div class="flex flex-col justify-center">
    <h1>
        Visitation
    </h1>
    <p>
        My people are coming over.
    </p>
</div>
```
In summary Tailwind is very interesting and easy to use. one can easily dictate wrong and fix it within a short period.
All you need to do is to install tailwind and link it to your html.

if you want to give a try just type tailwindcss.com on your browser and follow the the setting guide and you'll be good to go.