Getting started with tailwindcss

tailwind is a utility based framework with minimal code which let you focus on the main instead of wasting time on utilities to help your design.

Today i will be talking about tailwind CSS and how you can use it, grab your coffee, hoop on and let's ride.

Tailwind CSS have been around for quit sometimes now and since it's launch it has been gaining popularity more and more, i personally use this for my personal project i work on.

Before

before the launch of tailwindcss many CSS frameworks like Bootstrap and Material UI have been using predefined component.

In which this libraries reduce the stress of designing all UI from the start and most of this libraries enable users to add their own feature and customize this to their own thirst.

However, this customization most of the time involves overwriting. For example, creating new classes to overwrite the existing styles provided by the library.

this is where tailwindcss comes in

Tailwindcss

Tailwind is utility based CSS framework which focus on utility and it take a lot of work off your head.
with this utility frame work you can build anything in matter of minutes this has utilities like, color, background, margin, padding and so on.

So lets div into examples to see what am talking about.
here is a link to tailwindcss

Installation

unfortunately tailwindcss is not hosted online in which you can just link to your html file but that's where the Syntactic sugar comes in.

all you have to do is to install it via npm in your project then configure the package which tailwindcss has already done for you.

process
using npm install tailwind.css
this will automatically install tailwind in your project then you now go to your project folder the create a file input.css and the other folder output.css then open input.css and put the following code

@tailwind base;
@tailwind components;
@tailwind utilities;

now go to your package.json file and the following code on your script input.css -o public/style.css that's it welcome to the world of tailwindcss.

examples of tailwind utility classes

Tailwind class	Css
.w-1/2	width: 50%
.w-0	width: 0;

you can browse through their website to know more about this utilities

Conculsion

so far so good we've seen how we can install and work with tailwindcss feel free to checkout my github which can also help you in your way of becoming a good developer.

check it out now !! @binismail

have a lovely day.