Basic Guide Of tailwindcss

What is Tailwindcss ?

tailwindcss is a utility-first CSS framework for rapidly building custom user interfaces.

Basically, all the styles utility are defined in class names. and by combining them you can create beautiful components. just like how you use bootstrap.

tailwindcss docs

Example

• make padding top of div 0

<div class="pt-0">Hey Readers</div>

Here as you can see pt-0 as padding-top should be 0. Like that, we can also do p-0 for all sides & for margin, we can do m-0

• change button color from blue to red when hover

<button class="bg-blue-900 hover:bg-red-900">Click Here!</button>

In tailwindcss there are different states like hover focus etc. and you can define property after them like STATE:CLASS to work in an intended way.

• for diffrent screen sizes

<img class="w-16 md:w-32 lg:w-48" src="...">

Here we define that for lg and further width will be 48, from md to lg screen the width will be 32 and base width will be 16.

you can read about what exactly screen sizes are Here

where tailwind shines?

In tailwind you are repeating yourself. so it really shines when you are working with component-based framework like react ,angular , vue etc.

disclamer

If you want to use tailwind I recommend looking into tailwind docs because there are lots of features that might help you.