Curso de Tailwind CSS 2020

Curso de Tailwind CSS 2020

V铆ctor Yoalli Dom铆nguez

V铆ctor Yoalli Dom铆nguez

Directivas de Tailwind

3/29
Recursos
Transcripci贸n

Aportes 10

Preguntas 3

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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.

@tailwind base;
ayuda para inicializar elementos de html

@ tailwind utilities
genera c贸digo de utilerias

se puede por ejemplo utilizar tailwind con sasss?

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*/