Tailwind CSS
Tailwind CSS es un framework de CSS que apunta a ser altamente personalizable, ofreciendo clases atómicas para armar cualquier tipo de interfaz sin tener que pelear con estilos pre-definidos como pasa con frameworks de componentes.

¿Por qué lo usamos?

Este framework ofrece el equilibro perfecto entre partir de cero y el usar un framework tipo Bootstrap que tal vez no se adecua 100% a las necesidades de cada proyecto.
Mientras su implementación se puede ver "fea" al tener clases genéricas en el html, tiene la ventaja de ser altamente flexible dentro de las restricciones de un design system configurable, permitiendo la estandarización de como se trabaja en proyectos diferentes sin que todos los proyectos se vean iguales.

¿Cómo lo usamos?

Instalación

TailwindCSS ya viene configurado en Potassium. En proyectos más antiguos se puede usar potassium install front_end [--force] con el cuidado de revisar los cambios en Git para eliminar los cambios innecesarios.
Si el proyecto no fue creado con Potassium, en general se puede instalar siguiendo las instrucciones en la documentación.

Un ejemplo básico

1
<div class="flex w-1/2 p-3 bg-white rounded shadow-xl box-shadow">
2
<img
3
src="https://source.unsplash.com/random/100x100"
4
class="mr-4 rounded-full"
5
/>
6
<div>
7
<h1 class="text-lg font-bold">Lorem Ipsum</h1>
8
<p>
9
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro neque
10
consequatur cumque nihil iusto minima accusamus eligendi.
11
</p>
12
<div class="flex justify-end">
13
<img
14
src="https://source.unsplash.com/random/20x20"
15
class="border rounded-full"
16
/>
17
<img
18
src="https://source.unsplash.com/random/20x20"
19
class="-ml-2 border rounded-full"
20
/>
21
<img
22
src="https://source.unsplash.com/random/20x20"
23
class="-ml-2 border rounded-full"
24
/>
25
<img
26
src="https://source.unsplash.com/random/20x20"
27
class="mr-2 -ml-2 border rounded-full"
28
/>
29
y 4 personas más.
30
</div>
31
</div>
32
</div>
Copied!

Un ejemplo con elementos repetidos

TailwindCSS se describe como un framework utility-first, en otras palabras mientras se recomienda usar sus clases para todo, hay casos en que hace sentido extraer html a componentes de Vue o partials de Rails. En casos especiales o muy simples (como botones) también se pueden extraer solo las clases a CSS usando la directiva @apply de Tailwind.
Hay que tener cuidado y aplicar criterio para extraer solo componentes que se repiten muchas veces (si es que la razón para extraerlo es solo la repetición de clases). Para mantener el orden del CSS, se recomienda usar BEM como en el siguiente ejemplo.
1
<button class="mr-2 btn btn--secondary">Cancelar</button>
2
<button class="btn btn--primary">Aceptar</button>
Copied!
1
.btn {
2
@apply text-md rounded p-2;
3
}
4
5
.btn:focus {
6
@apply outline-none;
7
}
8
9
.btn--primary {
10
@apply bg-blue-400 text-white;
11
}
12
13
.btn--primary:focus {
14
@apply bg-blue-500;
15
}
16
17
.btn--secondary {
18
@apply bg-gray-500 text-white;
19
}
20
21
.btn--secondary:focus {
22
@apply bg-gray-600;
23
}
Copied!

Recursos Útiles

    Component Library: Tenemos una librería de componentes frecuentemente usados hechos en Tailwind y Vue, además de incluir sugerencias de librerías.
    Documentación oficial: La documentación es excelente y cubre casi cualquier duda que puedas tener.
    Tailwind CSS Intellisense (VS Code): Agrega autocompletado de clases al escribir HTML.
    Tailwind Docs (VS Code): Permite buscar la documentación de Tailwind directamente desde el editor.
    Headwind (VS Code): Estandariza el orden de las clases de Tailwind al guardar.
    Por defecto Headwind no detecta las clases que se agregan a helpers de rails en un .erb usando class:. Para permitir esto se puede editar la configuración de la extensión en el settings.json de VSCode y poner el siguiente regex en la sección de html:
    \\bclass\\s*[=:]\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\']
Última actualización 1d ago