Curso de Tailwind CSS

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

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

Cómo crear grids o columnas en Tailwind CSS

04:41 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
Aldo de J. Rodriguez Ronquillo
Aldo de J. Rodriguez Ronquillo
Estudiante
Captura de Pantalla 2021-04-20 a la(s) 12.57.25.png
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Inicio</title><linkrel="stylesheet"href="css/style.css"></head><body><h1class="bg-yellow-500">hello Tailwind</h1><spanclass="bg-red-400">Que mamadas las Cookies</span></body></html>```
1
Aldo de J. Rodriguez Ronquillo
Aldo de J. Rodriguez Ronquillo
Estudiante

pues no mi aparecen los cambios tengo corriendo el servidor y nada pense que eran las cookies y no es eso Captura de Pantalla 2021-04-20 a la(s) 12.57.25.png

0
M. Ray Medina Salcedo
M. Ray Medina Salcedo
Estudiante

Como se pueden usar los iconos del nuevo link de Font Awesome?
https://www.bootstrapcdn.com/fontawesome/
Porque hago el mismo procedimiento con este comando y en el navegador salen caracteres que no se reconocen

1
Luis Alejandro Vera Hernandez
Luis Alejandro Vera Hernandez
Estudiante

No pude ninguna de las dos :c Me rindo

postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss');

module.exports = { 
    plugins: [
        require('tailwindcss'), 
        require('autoprefixer'),
        purgecss({
            content: ['./**/*.html'],
            //Para agregar soporte para otro tipo de archivos.// './**/*.js',// './**/*.vue'//IMPORTANTE: Para soportar pseudo-clasesdefaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
            }),
            require('cssnano')({
                preset: 'default',
            
            }),
    ],

};

package.json

{
  "name": "Curso-Tailwinds",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "postcss css/tailwind.css -o public/css/style.css -w"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^10.2.5",
    "postcss-cli": "^8.3.1",
    "tailwindcss": "^2.1.1",
    "tailwindscss": "^0.3.0"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^4.0.3",
    "cssnano": "^5.0.1",
    "postcss": "^8.2.10"
  }
}

0
Luis Alejandro Vera Hernandez
Luis Alejandro Vera Hernandez
Estudiante

Ayuda no se me aplican los estilos

Archivo tailwind.css

@tailwind base; 

@tailwind components;

@tailwind utilities;

@layer components {
    .form-control {
        @apply w-full leading-snug text-gray-800 py-1 px-4 rounded border border-blue-300 bg-gray-200hover:bg-white focus:outline-none focus:shadow-outline;
    }
}

html

<div><div>Nombre</div><inputclass="form-control placeholder-secondary"type="text"placeholder="Nombre"><!-- leading snug controla el espacio entre lineas --></div>
0
Francisco Javier Saavedra Alcalá
Francisco Javier Saavedra Alcalá
Estudiante

Entonces esta es la forma como se crean componentes en tailwind? ó hay más maneras? …

2
Jose Mario Carreazo Saldarriaga
Jose Mario Carreazo Saldarriaga
Estudiante

Alguien mas tiene este error?

1
Nahuel Lezcano
Nahuel Lezcano
Estudiante

Hay una opcion para usar sass o siempre la configuracion de package se hace con css?

1
Condor Labs Pasto
Condor Labs Pasto
Estudiante

como se llama la extensión para ver los colores de esa manera ?

0
Yael Diez
Yael Diez
Estudiante

Se puede ver en algún lado de que fecha es el curso?

1