Why use WindiCSS or Tailwind
Have you ever tried debugging big amount of CSS files, and large amount of html elements? And when you found the class name then you have to find the CSS file and try to find the style. Even worse if your class is being used in many different CSS files.
Have you ever tried debugging big amount of CSS files, and large amount of html elements? And when you found the class name then you have to find the CSS file and try to find the style. Even worse if your class is being used in many different CSS files.
That is were CSS utility tools like Windi CSS/Tailwind CSS comes into play. When you try to debug on an element, you basically check the class, and change it. that's it, easy done.
So why use WindiCSS/Tailwind CSS
1. Supports Many Browsers
This utilities adds properties that any browser supports.
2. Optimized
This means, the CSS files generated by this framework only contains the classes you used.
3. Debugging style for Large Project is Easy
Its easy because you can easily identify what is wrong with the element by looking at your element class. No more scanning deferent files to find the style properties.
4. Customizable theme ex. light/dark mode
It will easy to setup customized theme for your website.
<!-- If its dark mode, the text will change to light white, and when light it will be dark gray -->
<button class="dark:text-gray-50 text-gray-800">
Button
</button>
5. Styling Process Faster
If you have learned how this utilities work, it will be easy for you to style elements easily.
example using windiCss:
<div class="flex">
<div class="box">
<div class="text-center space-y-2">
<div class="space-y-0.5">
<p class="text-lg text-black dark:text-white font-semibold mb-2">
Erin Lindford
</p>
<p class="text-gray-500 dark:text-gray-300 font-medium pb-3">
Product Engineer
</p>
</div>
<button class="btn">
Message
</button>
</div>
</div>
</div>
.box {
@apply
py-8 px-8 inline-flex mx-auto
bg-white dark:bg-gray-400 dark:bg-opacity-10
rounded-xl shadow-md space-y-2;
}
.btn {
@apply
px-4 py-1 text-sm text-purple-600 font-semibold
rounded-full border border-purple-200 dark:border-purple-800
hover:text-white hover:bg-purple-600 hover:border-transparent
focus:outline-none focus:ring-2 ring-purple-600 ring-opacity-40;
}
Output in dark mode:Output in default/light mode:
To start trying this out check out this Css utilities.
Windi CSS - https://windicss.org/
tailwind CSS - https://tailwindcss.com/
If you enjoy this article and would like to show your support, you can easily do so by buying me a coffee. Your contribution is greatly appreciated!