Curso de Tailwind CSS

Clases del Curso de Tailwind CSS

Instruido por:
Víctor Yoalli Domínguez
Víctor Yoalli Domínguez
Básico
3 horas de contenido
Ver la ruta de aprendizaje
PlatziFood
Proyecto del curso
PlatziFood

Crearemos Platzi Food, el sitio web de un negocio de comida . Con Tailwind, seguiremos las mejores prácticas, como diseñar primero para móviles y optimizar la página para cualquier dispositivo.

Curso de Tailwind CSS

Curso de Tailwind CSS

Progreso del curso:0/29contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/29contenidos(0%)

Introducción, instalación y ambiente de desarrollo

Material Thumbnail

¿Qué es Tailwind CSS?

02:24 min

Material Thumbnail

Instalación y ambiente de desarrollo

08:26 min

Material Thumbnail

Directivas de Tailwind

01:59 min

Conceptos básicos

Material Thumbnail

Personalización y configuración

01:57 min

Material Thumbnail

Responsive Design, Mobile First y Utility First

03:55 min

Utilerías

Cómo crear grids o columnas en Tailwind CSS

04:41 min

Material Thumbnail

Dimensiones y Espacios

08:57 min

Material Thumbnail

Cambiando las propiedades de la tipografía

04:59 min

Material Thumbnail

Ajustando el espaciado entre letras y líneas

04:37 min

Crea tus propias utilerías

04:04 min

Material Thumbnail

Entendiendo las variantes y las pseudo-clases

04:05 min

¡Es hora de practicar!

01:38 min

Proyecto: PlatziFood

Material Thumbnail

Aplicando formato a la card

09:06 min

Material Thumbnail

Responsive design en la card

05:41 min

Material Thumbnail

Construye el header

07:32 min

Material Thumbnail

Cómo integrar una card

08:47 min

Material Thumbnail

Directivas de Apply

02:57 min

Material Thumbnail

Extraer componentes

08:11 min

Material Thumbnail

Optimiza tu archivo: PurgeCSS y NanoCSS

03:56 min

Conclusiones

Material Thumbnail

Conclusiones y qué sigue

00:54 min

nuevosmás votadossin responder
Andres Alvarez Becerra
Andres Alvarez Becerra
Estudiante

Hola, una pregunta ¿los estilos en tailwind se heredan?

1
José Eduardo Reyes Yol
José Eduardo Reyes Yol
Estudiante

¿Para Tailwind (PostCSS) existe algún @extend?
Por ejemplo si vamos a crear varios alerts ¿No seria mejor crear un solo alert y luego crear sus derivados siempre usando las mismas reglas del base?

2
Christian Alvarenga
Christian Alvarenga
Estudiante

Al ejecutar el run build solamente me deja estos códigos y nada mas:

@tailwind base;
@tailwind components;
@tailwind utilities;

.form-control {
  @apply w-full leading-snug placeholder-secondary text-gray-800 py-1 px-4 rounded bg-gray-300 border border-blue-300hover:bg-white focus:outline-none focus:ring-2focus:ring-blue-600focus:border-transparent;
}

.btn-enviar {
  @apply shadow-xl rounded py-1 px-4 bg-primary block hover:shadow-none hover:bg-gray-700hover:text-white;
}

Alguien sabría como hacer para que también me deje los demás estilos utilizados?

1
Christian Alvarenga
Christian Alvarenga
Estudiante

Alguien sabría por que me sale este error?

error.png
1
Christian Alvarenga
Christian Alvarenga
Estudiante

A mi no me funciono nada de lo que hace el profesor, capaz ya habrá otra manera de hacer pero no pude encontrar información al respecto. ¿Alguien sabría cómo se hace lo de crear nuestras propias utilerías?

1
Iris Valentina Gil Barrios
Iris Valentina Gil Barrios
Estudiante

Hola, al correr el comando, me sale este error. ¿Qué podría ser?
error.JPG

1
Cesar Arion Espinosa Méndez
Cesar Arion Espinosa Méndez
Estudiante

¿Cada vez que necesite utilizar tailwind.css
necesitare preparar este entorno?

0
Cecilia Riveros
Cecilia Riveros
Estudiante

Que comando uso para pasar de una todo el texto a mayúscula en el minuto 4:18?

1
gasparnd
gasparnd
Estudiante

Tengo un problema, hice todo lo que de la clas, a la corro el comando de Build y me genera el bundle. Pero HTML no me ejecuta el css, cambien el link por otro y tampoco me lo carga.

<link href="css/styles.css"rel="stylesheet" />
1
Oscar Eduardo Gonzalez
Oscar Eduardo Gonzalez
Estudiante

No se si alguien me pueda ayudar con esto, similar algunos comentarios anteriores, no se configuran los colores de la misma manera que en la clase.
No se si sea por la versión del tailwind.config.full.js que se genera, en la clase se crea la tailwindcss 1.1.4 , mientras que a mi se me genera así:

tailwindcss 2.1.2
✅ Created Tailwind config file: tailwind.config.full.js
2