Short Read: Why use WindiCSS or Tailwind

#css #webdev #html #productivity

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: