Reutilización de estilos
Tailwind fomenta el uso de utility-first, en donde los diseños utilizan solo utility classes de bajo nivel. Esta es una forma poderosa de prevenir abstraer prematuramente y evitar el dolor que esto ocasiona.
Conforme un proyecto crece, inevitablemente código se repite una y otra vez, por lo cual se hace necesario un grado de refactorización.
Utilizar un editor y características del lenguaje
Muchas ocasiones, el duplicado de código no es un problema real, debido a que este código se encuentra todo en un solo lugar, o porque el código vive dentro de un arreglo y/o un loop.
Para los casos de código repetido en donde se requieran hacer cambios, se puede usar la opción de edición multi-cursor disponible en editores como Visual Studio Code.
Loops
Antes de asumir que necesitas extraer el código en un nuevo componente o crear una clase personalizada, asegúrate de que esta será utilizado en mas de una plantilla.
En muchas ocasiones, un elemento de diseño se muestra en mas de una ocasión en la página porque forma parte de un loop, por ejemplo en React.
<nav className="">
{[
['Inicio', '/'],
['Promociones', '/promociones'],
['Contacto', '/contacto'],
].map(([title, url]) => (
<a href={url} className="font-bold text-slate-500">
{title}
</a>
))}
</nav>
Cuando los elementos son desplegados en un loop, las clases utilizadas se escriben solo en una ocasión, así que no hay una duplicidad real del código.
Extraer componentes y partials
Si necesitas reutilizar algunos estilos a través de diferentes archivos, la mejor estrategia es crear un componente si estas utilizando un framework como React o Vue, o un partial si estas utilizando un motor de templates como Blade o Twig.
Extraer clases con @apply
La directiva @apply permite extraer el código repetido y moverlo dentro de una hoja de estilo CSS, disminuyendo así la longitud generada en el HTML fruto de la combinación de clases.
<!-- Antes de extraer en una sola clase -->
<button
class="py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75"
>
Save changes
</button>
<!-- Despues de extraer en una sola clase -->
<button class="btn-primary">Save changes</button>
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btn-primary {
@apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}
}
Evita la abstracción prematura
Sin importar lo que hagas, no utilices @apply solo para hacer lucir al código mas limpio. Es cierto que los templates construidos en con clases en Tailwind son algo feos. Hacer cambios en un proyecto con un montón de CSS personalizado es peor.
Si utilizas @apply para todo, básicamente estas escribiendo CSS nuevamente y tirando a la basura el flujo de trabajo y ahorro de tiempo que ofrece Tailwind, por ejemplo:
- Tener que nombrar clases: Evita tener que gastar el tiempo pensando en que nombre darás a las clases.
- Saltar entre archivos para hacer cambios: Mantén en lo posible tus clases y html en un solo lugar.
- Mantén la autonomía de los componentes : Los estilos son globales, un cambio incluso pequeño en un componente puede terminar rompiendo otro de forma inesperada.
- Evita grandes archivos css: Reutiliza las clases de Tailwind manera que no tengas archivos CSS enormes al final del proyecto.