About Tailwind CSS, usage, features and why to use it - 37

Let's talk about Tailwind, its main features and why we are going to use it.

As we have seen we have been able to build a pretty decent application you could say since we are reusing existing components But the visual part is still missing something, that is to say there are always small classes missing to give it the touch that we want and that is why I quite like oruga UI since it is not like Bootstrap which always forces you to automatically place when you use some components it automatically injects a lot of margins, paddings, spaced and so on. This is a little more sober as I was telling you before. The style part is completely optional, that is to say, even at this point if I wanted to replace the entire style which is not what I want. What I am saying with these words is that I see it as staying in a middle point between what is not having style, having a style like that but the minimum necessary which is exactly what we have with oruga and already having a basically complete style with margin and so on for our application, which happens for example with Bootstrap. So that is why I quite like Oruga UI for that reason. Since it allows us, as they say, to customize our page more without much problem. Here what I am telling you about the style here you could perfectly comment on this and you will see that the whole style is broken Then this adapts In case you want to customize it 100% and here you will see that you still have your table and in this case if you had to customize the responsive part as well but you have your table there what you want to do is up to you

Custom style or use Tailwind for the finer details

Create a custom style perfectly, I'm not really working much with styles from scratch, I always use obrat if it's for a prototype or something like that or directly telwin which is my best friend in this case we are going to use Tailwind although be careful, for this type of applications that are small it could be interesting to use a custom style but again for course reasons also because we can and also here I make a small, a small pause, a small clarification, really we can almost always use Tailwind

Tailwind, unlike Bootstrap although it is also a framework for ccs, is based on classes, that is to say, we build our components, so we can have it as is, you can see here the image, adding some classes here and you see that it changes as if the structure

Tailwind is nothing more than a bunch of classes

This bunch of classes is also a bit like the weak point although it depends on how you want to implement it since these classes can also be defined in a file based on creating a component as would happen with Bootstrap but in the first instance we have this in which we define a bunch of classes basically

<div class="flex flex-col items-center rounded-2xl">
  <div>
    <img class="size-48 shadow-xl" alt="" src="/img/cover.png" />
  </div>
  <div class="flex">
    <span>Class Warfare</span>
    <span>The Anti-Patterns</span>
    <span class="flex">
      <span>No. 4</span>
      <span>·</span>
      <span>2025</span>
    </span>
  </div>
</div>

It's a bit like the advantage I was telling you at the beginning, Tailwind is going to scan our project and only in the final build will the classes we are using be there and that's why I would practically always use Tailwind since in the end the size of the application doesn't matter if the application is small and with this you don't use many classes as would be our case, you are simply going to use a handful of classes in the final solution therefore the style sheet would be quite small.

17-02-2025 - Andrés Cruz

En español

• Category
• /
• Vue
• /
• About Tailwind CSS, usage, features and why to use it - 37