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.
Top comments (0)