Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Curso B谩sico de Tailwind

Curso B谩sico de Tailwind

Ana Mar铆a D铆az Solorio

Ana Mar铆a D铆az Solorio

Directivas de Tailwind

6/29
Recursos

Aportes 5

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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(鈥榗olors.white鈥);
border-radius: theme(鈥榖orderRadius.lg鈥);
padding: theme(鈥榮pacing.6鈥);
box-shadow: theme(鈥榖oxShadow.xl鈥);
}
}

Despu茅s dentro de tu HTML solo llamas a la clase .card y listo.

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().

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

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

馃摑 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: 鈥榮m鈥 640px (Usado para dispositivos m贸viles)
    • medium: 鈥榤d鈥 768px (Usado para una tablet)
    • large: 鈥榣g鈥 1024px (Usado para desktop)
    • extra-large: 鈥榵l鈥 1280px (Usado para pantallas m谩s grandes)
  • @layer
    La directiva聽@layer nos sirve para decirle a Tailwind a qu茅 鈥渂loque 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.