Crea una cuenta o inicia sesi贸n

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

Curso de Tailwind CSS 1

Curso de Tailwind CSS 1

V铆ctor Yoalli Dom铆nguez

V铆ctor Yoalli Dom铆nguez

Directivas de Tailwind

3/29
Recursos

Aportes 11

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Mis apuntes de esta clase:

<h1>1.3 Directivas de Tailwind</h1>

Directiva es una instrucci贸n que utiliza tailwind para insertar c贸digo en el archivo final de css que genera.

@tailwind base
Esto inyecta los estilos base de Tailwind y cualquier estilo base registrado por plugins.

@tailwind components
Esto inyecta las clases de componentes de Tailwind y cualquier clase de componente registrado por los plugins.

@tailwind utilities
Esto inyecta las clases de utilidad de Tailwind y cualquier clase de utilidad registrada por los plugins.

@tailwind screens
Esta directiva sirve para controlar donde Tailwind inyecta las variaciones responsivas de cada utilidad. Si se omite, Tailwind a帽adir谩 estas clases al final de tu css, por defecto.

siento que esta clase esta incompleta.

se puede por ejemplo utilizar tailwind con sasss?

@tailwind base;
ayuda para inicializar elementos de html

@ tailwind utilities
genera c贸digo de utilerias

Las directivas de tailwind sirven para insertar c贸digo en el archivo css final que genera.

@tailwind base -> Inicializa mis elementos de html para que no tengan estilos.

@tailwind utilities -> Nos ayuda a generar c贸digo de las utilidades.

Las directivas son instrucciones que permiten que Tailwind agregue los estilos definidos a nuestro archivo de css, lo cual permite utilizar las clases que nos provee 茅ste framework para dar estilo a los elementos del HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TailWind CSS Course</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <div class="h-64">
      <div class="p-4 m-4 bg-green-600">
        <h1 class="text-2xl font-bold text-white">Tailwind CSS Demo</h1>
      </div>
      <div class="p-4 m-4 bg-green-300 h-full">
        <h2 class="text-green-900">Have much fun using Tailwind CSS</h2>
      </div>
    </div>
  </body>
</html>

Muchas gracias profe 馃槂

No puedo visualizar los colores 鈥

Genial, le tengo fe a este curso jajaj es decir no me convencieron ni foundation ni materialize, espero que este sea el mio 馃し鈥嶁檪锔

Les comparto mis apuntes 馃憣|

</* las directivas de 
tailwind son formas de 
agregar los elementos 
al erchivo final de 
css que se est茅 
manejando */

/* Tailwind BASE crea 
todos los elementos de 
html por defecto */

/* Tailwind UTILITIES 
crea todo el contenido 
de utilidades  */>
<h4>Directivas de Tailwind</h4>

La directiva es una instrucci贸n que utiliza Tailwind para insertar c贸digo en el archivo final de CSS que genera.

@tailwind base;
/*Nos ayuda a inicilizar los elementos de nuestro HTML*/

@tailwind utilities;
/*Genera el c贸digo de utilerias*/