Tailwind CSS es una herramienta potente para diseñar estilos en tus proyectos web. Al conocer sus directivas, puedes optimizar tu código y personalizar los estilos de manera eficiente. Estas directivas incluyen instrucciones que integran código CSS en tu archivo final. Las principales directivas en Tailwind son: Tailwind Base, Tailwind Component y Tailwind Utilities.
¿Qué hace cada directiva principal?
Tailwind Base: Inicia todos los elementos HTML sin estilos, proporcionando una base neutral sobre la cual construir.
Tailwind Component: Permite acceder a clases específicas para dar estilo a componentes individuales de tu proyecto.
Tailwind Utilities: Añade utilidades que amplían las opciones de estilo, facilitando el acceso a dichas herramientas.
¿Cuáles son otras directivas y funciones en Tailwind CSS?
Además de las directivas básicas, Tailwind CSS ofrece una gama de funciones avanzadas, cada una identificada por un símbolo de arroba (@) al inicio:
Layer: Permite definir bloques de código específico para estilos, ordenándolos por capas como Base o componentes individuales.
Variants: Añade variantes reactivas a eventos, como hover, focus, o active, permitiendo estilos dinámicos.
Responsive: Facilita la creación de clases responsivas adaptadas a diferentes dispositivos sin necesidad de alterar el CSS principal.
Screens: Modifica y personaliza breakpoints predefinidos para distintos dispositivos (móvil, tablet, computadora y 4K).
Theme: Proporciona acceso a los valores iniciales de configuración de Tailwind para personalizaciones más profundas.
¿Cuáles son los breakpoints en Tailwind?
Tailwind CSS tiene breakpoints predeterminados que corresponden a distintos tipos de dispositivos, lo que permite que el diseño sea responsive y visualmente atractivo en cualquier tamaño de pantalla:
Small (sm): Diseñado para dispositivos móviles.
Medium (md): Diseñado para tablets.
Large (lg): Dirigido a pantallas de computadoras comunes.
Extra Large (xl): Ideal para layouts más extensos, como pantallas 4K.
¿Cómo explorar más las funciones y directivas de Tailwind?
Explorar la documentación oficial de Tailwind CSS es fundamental para un entendimiento más profundo y para descubrir la flexibilidad que estos comandos ofrecen. A medida que Tailwind evoluciona, como en su versión 2.0 con una paleta de colores extendida, estar al tanto de las actualizaciones es clave para maximizar su potencial en el diseño web.
Aprender y experimentar con Tailwind CSS te dota de las herramientas para crear diseños sofisticados y eficientes. ¡Te animo a seguir explorando y aplicando estos conocimientos en tus proyectos!
Para intentar explicar un poco más claro esta clase.
Recordar que @tailwind base maneja los elementos HTML (div, span, ul, p, h1, etc), @tailwind components maneja las clases y finalmente @tailwind utilities maneja las utilidades (que son todas aquellas propiedades referentes a los atributos CSS) (filter: grayscale(100%)).
Entonces cuando hablamos de la directiva @layer lo que hacemos es sobreescribir o definir nuestros propios estilos, componentes o configuraciones para cualquiera de estas 3 categorías.
Recuerden que Tailwind ya tiene estilos predefinidos en sus clases entonces puede que exista text-small y supongamos que eso hace que un texto sea de tamaño 12px PERO que sucede si tu quieres que ese texto sea de 11px y no de 12px?
Pues justo para eso puedes usar @layer components y modificas ese valor en una clase especifica. O si quieres que todos los li tengan un text-underline pues defines con @layer base que tus li van a tener x características.
Así mismo puedes crear tus propias clases y definir un conjunto de propiedades.
Ejemplo crear una clase .card y le defines:
@layer components {
.card {
background-color: theme('colors.white');
border-radius: theme('borderRadius.lg');
padding: theme('spacing.6');
box-shadow: theme('boxShadow.xl');
}
}
Después dentro de tu HTML solo llamas a la clase .card y listo.
Excelente aporte, me ayudó a comprender mejor esta parte
Gracias por la explicación.
Directivas Tailwind CSS v3.0
Una directiva es una instrucción que nos sirve para insertar código a nuestro archivo final CSS.
@tailwind base → Inicializa todos los elementos de nuestro HTML sin estilo.
@tailwind components → Nos permite acceder a todas las clases de tailwind.
@tailwind utilities → Agrega todas las utilidades al proyecto y nos permite acceder a ellas.
Otras directivas:
@tailwind → Inserta las directivas base, components, utilities y variants.
@layer → Le dice a tailwind a qué bloque de código pertenece un conjunto de estilos personalizados. Las capas válidas son base, componentes y utilidades.
@apply → Incorpora cualquier clase de Tailwind en el CSS personalizado, es útil cuando se necesita escribir CSS personalizado.
@variants → Es útil para controlar dónde Tailwind inyecta el hover, focus, responsive u otras variantes de cada clase.
Las directivas se diferencian por un @ al inicio, también se tienen las funciones screen() y theme().
perfecto💚
Se debería poder puntuar por clases. Esta, por ejemplo, no me gustó nada. Sigue teniendo el problema de la velocidad en la que quieren abordar un tema. No se entiende completamente los temas que explica la profe :(. Porque debo ir a la documentación para entender lo que acabo de ver en clases y no para profundizar en el tema? para eso no sería mejor simplemente ver la documentación?. Pienso que hace falta un cambio en el estilo de videos. es sugerencia nada mas
Pienso que si de plano la explicación va a ser muy vaga o escueta, en vez de hacer un video sería mucho mejor, dejar un resumen con la explicación y con algún ejemplo. En otros cursos, si se dejan resúmenes en los recursos, eso debería ser un estándar en todas las clases.
De acuerdo, no he logrado comprender que es lo que voy a hacer con Tailwind. Se manejan muchos conceptos y no logro entender que es lo que me explica la profesora. Buscaré información fuera de Platzi para lograr algo.
Documentación oficial de Tailwind CSS
Breakpoints:
sm 640px
md 768px
lg 1024px
xl 1280px
2xl 1536px
Directivas de Tailwind 2022:
**@tailwind **(Para customizar los breakpoints anteriores)
@layer (Elegir a qué bloques de código pertenecen nuestros estilos).
@apply (Permite customizar el CSS de un elemento en concreto).
La profesora comete un error cuando quiere referirse a @apply diciendo de nuevo Tailwind (la anterior directiva), no obstante esta directiva dice que se verá más adelante.
Funciones de Tailwind 2022:
theme() Accede a las configuraciones por defecto de Tailwind pero no es algo que vayamos a tocar
screen()
📝 Mis apuntes:
.
Directiva es una instrucción que utiliza tailwind para insertar código en el archivo final de css que genera. Esto inyecta los estilos base de Tailwind y cualquier estilo base registrado por plugins, también inyecta las clases de componentes de Tailwind y cualquier clase de componente registrado por los plugins.
.
Base y componentes
@tailwind base
Es la encargada de inicializar todos los elementos de nuestro HTML sin estilo.
@tailwind component
Nos permite acceder a todas las clases de tailwind.
@tailwind utilities
Agrega todas las utilidades al proyecto y nos permite acceder a ellas
.
Las directivas las podemos identificar facilmente ya que llevan un @ antes del nombre, revisando la documentación de Tailwind nos encontramos con:
@tailwind screens
Nos va a servir para modificar esos breakpoints y customizarlos como nosotros queramos, sin embargo Tailwind ya cuenta con breakpoints definidos los cuales son:
small: ‘sm’ 640px (Usado para dispositivos móviles)
medium: ‘md’ 768px (Usado para una tablet)
large: ‘lg’ 1024px (Usado para desktop)
extra-large: ‘xl’ 1280px (Usado para pantallas más grandes)
@layer
La directiva @layer nos sirve para decirle a Tailwind a qué "bloque de código" pertenece un conjunto de estilos personalizados. Las capas válidas son a base, componentsy utilities.
.
@variants
Podemos generar responsive, hover, focus, activey otras variantes de nuestras propias utilidades envolviendo sus definiciones en la variante.
.
@responsive
Podemos generar variantes receptivas de nuestras propias clases envolviendo sus definiciones en la directiva.
.
screen()
Esta función acepta un nombre de pantalla como md y genera la expresión de característica de medios correspondiente
.
theme()
Esta función se utiliza para acceder a los valores de configuración de Tailwind mediante la notación de puntos.
Directivas de Tailwind
@tailwind base:
Inicializa todos los elementos de nuestro HTML sin estilo
@tailwind component:
Nos permite acceder a todas las clases de tailwind
@tailwind utilities :
Agrega todas las utilidades al proyecto y nos permite
acceder a ellas
@tailwind layer :
Nos permite decir justamente el bloque al que pertenencen los estilos
@responsive: Permite generar el responsive en nuestras clases
Es importante que veas esto si estás viendo el curso con la versión 3 porque mucha de la documentación que vemos en esta parte no existe y además no se profundizó demasiado o a mi parecer no estuvo muy claro, es por ello que les dejo esta explicación.
Directivas de Tailwind CSS
@tailwind base
Se encarga de inicializar todos los elementos HTML sin estilos, Es decir que un botón no va a tener estilos de botón y solo va a parecerse a un texto, o que un hipervínculo no va a tener decoraciones, entre otras cosas
@tailwind component
Permite acceder a todas las clases de tailwind enfocadas a componentes, por ejemplo para un botón o similares.
@tailwind utilities
Son todos los estilos de tailwind y el núcleo del mismo, nos permite accede a clases como bg-red-500.
@apply
Se utiliza para aplicar una serie de utilidades tailwind en un selector css específico. En este caso podemos aplicar una serie de utilidades para una clase botón.
Permite decir a que directiva o capa de tailwind(base,component,utilities) pertenecen las utilidades tailwind que fueron seleccionadas con la directiva apply. Por ejemplo, si queremos que por defecto nuestros headers tengan un cierto estilo cuando usamos tailwind, puede verse de esta forma.
Esta directiva permite especificar cual es el archivo de configuración que tailwind utilizará para compilar el archivo CSS. Esto es muy útil cuando usamos proyectos que necesitan varios archivos de configuración para diferentes archivos CSS. Por ejemplo si tenemos estilos distintos en la vista de un admin y del sitio base. Algo muy importante es no poner esta directiva antes de las declaraciones de importación porque es posible que no se apliquen estilos correctamente debido a que si estás usando postcss-import, tus declaraciones @import deben venir antes de @config para que todo funcione correctamente, ya que postcss-import sigue estrictamente las especificaciones CSS que requieren que las declaraciones @import precedan a cualquier otra regla en el archivo.
"Una referencia para las funciones y directivas personalizadas que Tailwind expone a tu CSS"
.
Directives
"Las directivas son reglas personalizadas específicas de Tailwind que puedes utilizar en tu CSS y que ofrecen funcionalidades especiales para proyectos de Tailwind CSS."
Directiva es una instrucción que utiliza tailwind para insertar código en el archivo final de css que genera. Esto inyecta los estilos base de Tailwind y cualquier estilo base registrado por plugins, también inyecta las clases de componentes de Tailwind y cualquier clase de componente registrado por los plugins.
.
@tailwind
"Utiliza la directiva @tailwind para insertar los estilos base, components, utilities y variants de Tailwind en tu CSS."
/**
* Esto inyecta los estilos base de Tailwind y cualquier estilo base registrado por los plugins. Es la encargada de inicializar todos los elementos (div, span, ul, p, etc) de nuestro HTML sin estilo.
*/@tailwind base;/**
* Esto inyecta las clases de componentes de Tailwind y cualquier clase de componente registrada por los plugins. Nos permite acceder a todas las clases de tailwind.
*/@tailwind components;/**
* Esto inyecta las clases de utilidad de Tailwind y cualquier clase de utilidad registrada por los plugins.
*/@tailwind utilities;/**
* Utiliza esta directiva para controlar dónde Tailwind inyecta las variantes de cada clase, como hover, focus, responsive, dark mode, entre otras.
*
* Si se omite, Tailwind por defecto agregará estas clases al final de la hoja de estilos.
*/@tailwind variants;
.
@layer
Utiliza la directiva @layer para indicar a Tailwind en qué "contenedor" pertenece un conjunto de estilos personalizados. Las capas válidas son base, components, y utilities.
Tailwind moverá automáticamente el CSS dentro de cualquier directiva @layer al mismo lugar que la regla @tailwind correspondiente, por lo que no es necesario preocuparse por escribir el CSS en un orden específico para evitar problemas de especificidad.
Cualquier CSS personalizado agregado a una capa solo se incluirá en la compilación final si ese CSS se utiliza realmente en el HTML, al igual que todas las clases integradas en Tailwind por defecto.
Envolver cualquier CSS personalizado con @layer también permite utilizar modificadores con esas reglas, como hover: y focus:, o modificadores responsivos como md: y lg:.
.
@apply
Utiliza @apply para insertar cualquier clase de utilidad existente en tu propio CSS personalizado.
Esto es útil cuando necesitas escribir CSS personalizado (como para anular los estilos en una biblioteca de terceros), pero aún deseas trabajar con tus tokens de diseño y utilizar la misma sintaxis que estás acostumbrado a utilizar en tu HTML.
Los frameworks de componentes como Vue y Svelte admiten la adición de estilos por componente dentro de un bloque <style> que se encuentra en cada archivo de componente.
Si intentas utilizar @apply con una clase personalizada que has definido en tu CSS global, dentro de uno de estos bloques <style> por componente, obtendrás un error indicando que la clase no existe.
<div> <slot></slot></div><style> div{/* Won't work because this file and main.css are processed separately */@apply card;}</style>
Esto se debe a que, en los frameworks como Vue y Svelte, se procesa cada bloque <style> de manera independiente y se ejecuta la cadena de plugins de PostCSS en cada uno de ellos de forma aislada.
Esto significa que si tienes 10 componentes, cada uno con un bloque <style>, Tailwind se ejecuta 10 veces por separado y cada ejecución no tiene conocimiento de las otras. Debido a esto, cuando intentas utilizar @apply card en Card.svelte, falla, porque Tailwind no tiene idea de que la clase card existe, ya que Svelte procesó Card.svelte y main.css de manera completamente aislada.
La solución a este problema es definir cualquier estilo personalizado que desees @apply en tus componentes utilizando el sistema de plugins en su lugar:
De esta manera, cualquier archivo procesado por Tailwind que utilice este archivo de configuración tendrá acceso a esos estilos.
Sin embargo, sinceramente, la mejor solución es simplemente no hacer cosas raras como esta. Utiliza las utilidades de Tailwind directamente en tu marcado de la forma en que se supone que deben ser utilizadas, y no abuses de la función @apply para hacer cosas como esta, y tendrás una experiencia mucho mejor.
.
@config
Utiliza la directiva @config para especificar qué archivo de configuración debe usar Tailwind al compilar ese archivo CSS. Esto es útil para proyectos que necesitan utilizar diferentes archivos de configuración para diferentes puntos de entrada CSS.
La ruta que proporcionas a la directiva @config es relativa a ese archivo CSS y tendrá prioridad sobre una ruta definida en tu configuración de PostCSS o en la CLI de Tailwind.
Ten en cuenta que si estás utilizando postcss-import, tus declaraciones @import deben venir antes de @config para que las cosas funcionen correctamente, ya que postcss-import cumple estrictamente con la especificación CSS que requiere que las declaraciones @import precedan a cualquier otra regla en el archivo.
❌ No coloques @config antes de tus declaraciones @import.
En Tailwind, existen tres categorías principales de estilos:
@tailwind base: maneja los elementos HTML (div, span, ul, p, h1, etc).
@tailwind components: maneja las clases.
@tailwind utilities: maneja las utilidades, que son todas aquellas propiedades referentes a los atributos CSS (por ejemplo, filter: grayscale(100%)).
Cuando hablamos de la directiva @layer, lo que hacemos es sobrescribir o definir nuestros propios estilos, componentes o configuraciones para cualquiera de estas tres categorías.
Modificación de clases predefinidas
Tailwind ya tiene estilos predefinidos en sus clases, por ejemplo, text-small puede hacer que un texto sea de tamaño 12px. Pero ¿qué sucede si quieres que ese texto sea de 11px y no de 12px? Para lograr esto, puedes usar @layer components y modificar ese valor en una clase específica.
Creación de tus propias clases
También puedes crear tus propias clases y definir un conjunto de propiedades. Por ejemplo, puedes crear una clase .card y definir sus propiedades en @layer components:
Después, dentro de tu HTML, solo llamas a la clase .card y listo.
Les comparto mis apuntes. 😁
¿Qué es una directiva?
Una directiva es una instrucción especial utilizada en Tailwind CSS para insertar código en el archivo final de CSS. Estas directivas permiten organizar y estructurar mejor los estilos dentro de un proyecto. Básicamente con esto podemos personalizar los estilos pre definidos por tailwind.
Tailwind CSS < v4
Antes de la versión 4 de Tailwind, se utilizaban varias directivas para estructurar el CSS:
@tailwind base
Inicializa todos los elementos del HTML sin estilo predeterminado, aplicando un conjunto de estilos base.
@tailwind component
Nos permite definir y acceder a clases reutilizables en Tailwind CSS.
@tailwind utilities
Agrega todas las utilidades de Tailwind CSS al proyecto, permitiendo su uso en el código.
@tailwind
Permite aplicar estilos específicos según la configuración establecida en Tailwind.
@layer
Permite definir estilos adaptables según los diferentes puntos de quiebre (breakpoints) establecidos en Tailwind CSS.
@responsive
Nos va a permitir generar diferente tipos de adaptabilidad de nuestras clases.
@variant
(Disponible en Tailwind v4) Facilita la creación de variantes de estilos que reaccionan a eventos como hover, focus o active.
Funciones
theme()
En tailwind v4 es solo para mantener la compativilidad con tailwind v3, nos permite acceder a los valores de configuración iniciales de tailwind.
Tailwind v4
A partir de la versión 4 de Tailwind CSS, ya no es necesario utilizar las directivas @tailwind base, @tailwind components y @tailwind utilities. Simplemente importar Tailwind en el archivo CSS es suficiente para utilizar todas sus clases y funcionalidades.
Nota: Las directivas por lo general empizan con @.
Breakpoints en Tailwind CSS
Los breakpoints permiten definir estilos responsivos según el tamaño de la pantalla del dispositivo.
sm(Small): Para dispositivos móviles.
md(Medium): Para tabletas.
lg(Large): Para escritorios.
xl(Extra Large): Para pantallas grandes como monitores 4K o televisores.
2xl(Extra Extra Large): Para resoluciones aún más altas, como pantallas ultra anchas o configuraciones multi-monitor.
Quinta clase y ando más perdido que cuando comencé. Hay muchas palabras técnicas, parece que se está hablando otro idioma.
Viendo que no hay más explicaciones acerca de Tailwind tendré que buscar información por fuera de Platzi para poder entender.
En Tailwind 3 solo existen las siguientes directivas:
@tailwind
@layer
@apply
Las funciones theme() y screen() se mantienen.
Si, en efecto creo que el curso esta un poco desactualizado con tailwind 3, y la documentacion
👀 A TENER EN CUENTA:
Los framewroks como Vue y Svelte admiten la adición de estilos por componente dentro de un bloque <style> que vive en cada archivo de componente.
Si intentas hacer un @apply de una clase personalizada que has definido en tu CSS global en uno de estos bloques de <style> por componente, obtendrás un error sobre la clase que no existe:
/* Card.vue */
<template>
<div>
<slot></slot>
</div>
</template>
<style scoped>
div {
/* No funcionará porque este archivo y main.css se procesan por separado */
@apply card;
}
</style>
Esto se debe a que, en segundo plano, los frameworks como Vue y Svelte procesan cada bloque <style> de forma independiente y ejecutan su cadena de complementos PostCSS contra cada uno de forma aislada.
Eso significa que si tienes 10 componentes y cada uno tiene un bloque <style>, Tailwind se ejecuta 10 veces por separado, y cada ejecución no tiene conocimiento sobre las otras ejecuciones. Debido a esto, cuando intenta hacer @apply card en Card.vue falla, porque Tailwind no tiene idea de que la clase card existe ya que Vue procesó Card.vue y main.css en total aislamiento entre sí.
La solución a este problema es definir cualquier estilo personalizado que desees usar con @apply en tus componentes utilizando el sistema de complementos (plugin system):
De esta forma, cualquier archivo procesado por Tailwind que use este archivo de configuración tendrá acceso a esos estilos.
Honestamente, aunque la mejor solución es simplemente no hacer cosas raras como esta. Usa las utilidades de Tailwind directamente en tu diseño de la forma en que deben usarse, y no abuses de la función @apply para hacer cosas como esta y tendrás una experiencia mucho mejor.
Vamos que ya está a la puerta Tailwind 4 !
@apply Permite agrupar varias clases de utilidades una custom clase de CSS
@layer Permite definir el bloque de código al que pertenecen los estilos.
@variants Permite agregar elementos responsivos, y variantes que reaccionan a eventos, como un hover o un focus.
@responsive Nos permite generar distinto tipo de responsividad en nuestras clases
A parte tenemos las funciones:
screen() Esta se utiliza con la directiva @screen.
theme() Nos permite acceder a los valores de iniciales de configuración de tailwind
No me gusto
están bien las clases con esta profesora pero siento que le falta ser un poco mas como diego como teff que ellos siempre nos dan una ayuda vidual con alguna imagen que muestre que hace cada cosa, del resto muy bien
