Sobre Tailwind CSS, uso, caracteristicas y porqué usar - 37

Vamos a hablar sobre Tailwind, sus características principales y porqué vamos a usarlo.

Como hemos visto hemos podido construir una aplicación bastante decente se pudiera decir ya que estamos reutilizando componentes existentes Pero todavía la parte visual como que le falta algo es decir siempre faltan pequeñas clases para darle el toque que nosotros queremos y es por eso que a mí me gusta bastante oruga UI ya que no es como Bootstrap a la cual siempre te obliga a colocar automáticamente cuando empleas algunos componentes ya automáticamente inyecta un montón de márgenes paddings espaciados y demás esto es un poco más sobrio tal cual te comentaba antes la parte del estilo es completamente opcional es decir inclusive en este punto si quisiera reemplazar todo el estilo que no es lo que yo quiero lo que yo estoy diciendo con estas palabras Es que yo lo veo como que se queda en un punto medio entre lo que es no tener estilo tener un estilo como que pero lo mínimo necesario que es justamente lo que tenemos con oruga y tener ya un estilo básicamente completo con margen y demás para nuestra aplicación cosa que sucede por ejemplo con Bootstrap entonces por eso me gusta bastante Oruga UI por ese motivo Ya que nos permite como quien dice personalizar más nuestra página sin mucho problema aquí lo que te comento del estilo aquí perfectamente pudieras comentar esto y vas a ver que todo el estilo se rompe Entonces esto se adapta En caso de que lo quieras personalizar al 100% y por aquí vas a ver que tienes tu tabla todavía y en este caso si tuvieras que personalizar ya la parte también de responsive pero tienes tu tabla ahí lo que quieras hacer ya depende de ti 

Estilo personalizado o emplear Tailwind para los detalles puntuales

Crear perfectamente un estilo personalizado ya yo realmente no estoy trabajando mucho con estilos desde cero siempre empleo obrat si es para un prototipado o algo por el estilo o directamente telwin que es mi mejor amigo en este caso vamos a emplear Tailwind aunque ojo yo para este tipo de aplicaciones que son chiquiticas pudiera ser interesante emplear un estilo personalizado pero otra vez por cuestiones de curso también por que podemos y también aquí hago una pequeña una pequeña pausa una pequeña aclaratoria realmente Tailwind casi siempre lo podemos emplear

Tailwind a diferencia de Bootstrap aunque también es un framework para ccs es base a clases es decir nosotros armamos nuestros componentes Así que podemos tener tal cual puedes ver aquí la imagen va agregando aquí algunas clases y vas viendo que va cambiando como que la estructura

Tailwind no es más que un montón de clases 

Este monton de clases también un poquito como que el punto débil aunque depende de cómo lo quieras implementar ya que estas clases también puedes definirlas en un archivo en base a crear un componente como sucedería con Bootstrap pero en primera instancia tenemos esto en la cual definimos un montón de clases básicamente

<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>

Es un poco la ventaja que te indicaba al inicio, Tailwind va a escanear nuestro proyecto y solamente en el build final van a estar las clases que estamos usando y es por eso que yo prácticamente siempre emplearía Tailwind ya que a la final no importa el tamaño de la aplicación si la aplicación es pequeña y con esto no empleas muchas clases como sería nuestro caso simplemente vas a emplear un puñado de clases en la solución final por lo tanto la hoja de estilo sería bastante pequeña.

17-02-2025 - Andrés Cruz

In english

• Categoría
• /
• Vue
• /
• Sobre Tailwind CSS, uso, caracteristicas y porqué usar - 37