Tema y colores
Colores
Tailwind tiene una serie de colores predefinidos con nombres como red, orange, blue, teal, etc. A su vez cada color tiene 11 variaciones que van desde el 50 al 950 (entre el 100 y el 900 saltan de 100 en 100).
A su vez podemos poner colores con utility classes de texto, borde o fondo. Por ejemplo:
<body class="p-4 flex flex-col gap-2">
<div class="p-4 bg-blue-600 text-white rounded-lg text-center font-bold">
Elemento con fondo
</div>
<div class="p-4 border-4 border-emerald-500 rounded-lg text-emerald-700 text-center">
Caja con borde
</div>
<div class="p-2">
<input type="checkbox" checked class="w-4 h-4 accent-pink-500" />
<label class="text-pink-500 text-lg ml-2">Checkbox rosa</label>
</div>
<p class="text-gray-700 text-lg underline decoration-teal-500 decoration-4 underline-offset-4">
Texto subrayado con color de decoración
</p>
</body>
Colores semitranparentes
Para ponerle transparecia a un color, basta con añadir una barra '/' detrás de la definición con un porcentaje de opacidad del 0 (transparente) al 100 (sólido), como por ejemplo "text-red-600/50".
Tema y variables
En Tailwind podemos añadir nuevos colores, tamaños, etc definiendo variables dentro de la directiva @theme. A diferencia de las variables normales dentro de :root o cualquier otro selector, estas variables le indican al framework que se deben crear nuevas utility classes alrededor de la misma.
Por ejemplo, si queremos crear un nuevo color, bastaría con hacer lo siguiente:
@import "tailwindcss";
@theme {
--color-brand: oklch(0.58 0.12 240.71);
}A partir de aquí, ya podríamos usar el color brand para texto, bordes, fondos, etc.
<p class="text-brand border-2 border-brand w-fit rounded-xl p-2">Hola mundo</p>
También se pueden crear variables para el tema utilizando otros espacios de nombres además del color como pueden ser la fuente, tamaños, sombras, etc.
@import "tailwindcss";
@theme {
--color-brand: oklch(0.58 0.12 240.71);
--font-script: Great Vibes, cursive;
--spacing-16px: 16px;
}Sobrescribir variables del tema
Para sobrescribir una variable es tan sencillo como volver a declararla dentro de @theme con un nuevo valor. Por ejemplo, si queremos cambiar el tamaño de pantalla para cambiar del tamaño más pequeño (por defecto) a pantalla pequeña (sm):
@import "tailwindcss";
@theme {
--breakpoint-sm: 30rem; /* Por defecto es 40rem */
}