Curso de Tailwind CSS 1
Curso de Tailwind CSS 1

Introducción, instalación y ambiente de desarrollo

1

¿Qué es Tailwind CSS?

2

Instalación y ambiente de desarrollo

3

Directivas de Tailwind

Conceptos básicos

4

Personalización y configuración

5

Responsive Design, Mobile First y Utility First

Utilerías

6

Colores

7

Cómo crear grids o columnas en Tailwind CSS

8

Dimensiones y Espacios

9

Cambiando las propiedades de la tipografía

10

Ajustando el espaciado entre letras y líneas

11

Display

12

Flexbox

13

Crea tus propias utilerías

14

Entendiendo las variantes y las pseudo-clases

15

¡Es hora de practicar!

Proyecto: PlatziFood

16

Creando una card

17

Aplicando formato a la card

18

Responsive design en la card

19

Construye el header

20

Crea el footer

21

Crea un banner

22

Cómo integrar una card

23

Forms

24

Directivas de Apply

25

Extraer componentes

26

Navbar

27

Alpine JS

28

Optimiza tu archivo: PurgeCSS y NanoCSS

Conclusiones

29

Conclusiones y qué sigue

Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.

Antes: $249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

15 Días
5 Hrs
3 Min
59 Seg
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?

fernandomunoz

fernandomunoz

Profe Platzi

hace 5 años

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.

Marco Antonio Alducin Garcia

Marco Antonio Alducin Garcia

hace 2 años

siento que esta clase esta incompleta.

andrés eduardo betancourt bescanza

andrés eduardo betancourt bescanza

hace 4 años

se puede por ejemplo utilizar tailwind con sasss?

Abner Batz

Abner Batz

hace 5 años

@tailwind base;
ayuda para inicializar elementos de html

@ tailwind utilities
genera código de utilerias

Javier Amaya Patricio

Javier Amaya Patricio

hace 4 años

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.

Nathaly Stefani Riaño Bejarano

Nathaly Stefani Riaño Bejarano

hace 5 años

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>
Angélica Rocha

Angélica Rocha

hace 5 años

Muchas gracias profe 😃

JOSÉ REYES PALACIO

JOSÉ REYES PALACIO

hace 5 años

No puedo visualizar los colores …

Christian Andres Moreno Ceballos

Christian Andres Moreno Ceballos

hace 4 años

Genial, le tengo fe a este curso jajaj es decir no me convencieron ni foundation ni materialize, espero que este sea el mio 🤷‍♂️

Jose Morales Varon

Jose Morales Varon

hace 4 años

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  */>
Miguel Ángel Reyes Moreno

Miguel Ángel Reyes Moreno

hace 4 años
<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*/