Creación del proyecto e instalación de Tailwind

Clase 5 de 29 • Curso Básico de Tailwind 2 y 3

Clase anteriorSiguiente clase

Juan Jiménez

student•

Iniciar proyecto usando Tailwind CSS v3.0 (Enero/2022)

Iniciar proyecto npm: npm init
Instalar Tailwind como un plugin de PostCSS: npm install -D tailwindcss postcss autoprefixer

Documentación de instalación:

Se ejecuta el siguiente comando npx tailwindcss init para crear el archivo de plantillas tailwind.config.js colocando la siguiente configuración:

module.exports = {
  content: ["./public/index.html", "./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Incluir Tailwind en el CSS agregando las directivas a src/css/tailwind.css:

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

Para correr los estilos de Tailwind se necesita ejecutar el siguiente comando: npx tailwindcss -i ./src/css/tailwind.css -o ./public/css/tailwind.css --watch donde estamos indicando que nuestro archivo tailwind.css que proviene de src haga un build en la carpeta de public al archivo tailwind.css.

Con esto ya se puede trabajar con Tailwind en nuestro index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../public/css/tailwind.css">
    <title>Gogo Travel</title>
</head>
<body>
    <p>Hello, world</p>
    <div class="w-64 h-64 bg-red-900"></div>
</body>
</html>

Joan Sebastian Camacho Ardia

student•

Muchas gracias. Muy bueno tu aporte

Franklin Peñafiel

student•

Tengo problemas, no me funciona correctamente, vi el css del dist y noté que los cambios que hago en el html no se agregan. vengo del video de los colores porque pensé que la instalación hice mal pero tengo todo igual. Lo mismo me pasó con la versión 2 que no funcionó. se crea el div pero el css aunque le ponga --watch

Juan David Camayo Sastoque

student•

A mi no funciono, tal vez pueda ser que la versión de tailwind actual es la 3. Así que fui a la documentación y pude configurar el proyecto de la siguiente forma.

Iniciar el proyecto

    npm init -y

Crear las carpetas

    mkdir src public src/css public/css

Crear los archivos ***este comando no funciona en la consola de windows

    touch src/css/index.css public/index.html public/css/index.css

Instalar las dependencias

    npm install -D tailwindcss

Inicializar un proyecto tailwind

    npx tailwindcss init

Reemplazar en el archivo tailwind.config.js

    module.exports = {
        content: [],
        theme: {
            extend: {},
        },
        plugins: [],
    };

Por esto...

    module.exports = {
        content: ['./public/index.html', './src/**/*.{html,js}'],
        theme: {
            extend: {},
        },
        plugins: [],
    };

Agregar al archivo src/css/index.css

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

Agregar contenido al archivo public/index.html

    <!doctype html>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="./css/index.css" rel="stylesheet">
    </head>
    <body>
      <h1 class="text-3xl font-bold underline">
        Hello world!
      </h2>
      <div class="w-64 h-64 bg-red-200">
      </div>
    </body>
    </html>

Ejecutar este comando..

    npx tailwindcss -i ./src/css/index.css -o ./public/css/index.css --watch

Luis Berenguer

student•

Perfecto, seguí tus pasos y me funcionó!

Sergio Camilo Castillo Nuñez

student•

también me funciono así, ojala se ajuste también en el vídeo estas configuraciones

Usuario anónimo

user•

se publico hace menos de 24hs y el procedimiento explicado ya quedo antiguo !!! increible...

Juan Ignacio Portilla Kitroser

student•

Por que lo decis?

Luis Berenguer

student•

Juan porque han cambiado el contenido en la página de instalación.

Fernando Molano Castrillón

student•

Perdón a los que están molestos porque la instalación está desactualizada pero EMPATIA por favor. si recuerdan que esto es Platzi, no?

Es decir, hay una planeacion del curso, los contenidos, etc. El curso no se grabó el día antes de publicarse. Muy seguramente lo grabaron hasta 3 semanas antes quizás porque debe haber un marketing que se tiene que hacer para promocionar los cursos que se vienen, etc.

Es decir, no es como que hoy dijeron hagamos este curso, pusieron a Ana en vivo a mirar que creaba con código, grabaron hoy y mañana Boom listo a publicarse el video.

Por supuesto que pasó tiempo y algunas cosas cambiaron. Incluso si es error de Platzi, igual y somos (o queremos ser) developers y eso incluye leer documentación y ajustarnos a las situaciones.

Un poco más de empatía.

Fernando Molano Castrillón

student•

Ninguna de las 2. Puedes reclamar y/o puedes sugerir una mejora... con empatía. Intenten ir por la vida pidiendo cosas con comentarios groseros, con gritos (en el face to face), con ira y mala comunicación a ver cómo les va.

Empatía no significa conformismo ni bajar la cabeza.

PS: Cuando lleguen a un equipo de trabajo (programación, restaurante, hotel, contaduría) y vean que el empleado anterior dejó todo vuelto nada, no documentó, no hay una guía y muchísimos cambios... que crees que debes hacer como empleado? "Exigirle" a la empresa que te entreguen todo en bandeja de oro para poder hacer tu trabajo o mirar como lo resuelves? (Casos diarios de la vida real)

Saludos.

oscar hernandez

student•

por eso estamos pagando la suscripcion, para estar actualizados.

Usuario anónimo

user•

Yo les recomiendo que una vez instalado Tailwind CSS, en el archivo package.json añadan estos scripts que les permitirán ser más rápidos al trabajar con el generador de CSS en tiempo real (JIT) y con el modo producción (minificación de CSS):

*Nota: suponiendo que la estructura del proyecto tiene una carpeta SRC dónde estará el código CSS (@tailwind; base @tailwind components; @tailwind utilities;) y una carpeta DIST (con un index.html y un tailwind.css).

{
  "scripts": {
    "dev": "npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css --watch",
    "prod": "npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css --minify"
  },
  "devDependencies": {
    "tailwindcss": "^3.0.12"
  }
}

Cada que editen el proyecto localmente en su terminal escriban el comando:

npm run dev

Y cuando hayan terminado y necesiten subir los cambios a producción ahora podrán teclear el comando:

nom run prod

Cualquier cosa no olviden hacer el curso de NPM 💚

Chrystian Fabian Lozano Ramirez

student•

gracias

Obed Paz

student•

Chavos, les recomiendo encarecidamente que aprendan a leer documentaciones por su cuenta, aveces los cursos no pueden estar 100% a la vanguardia en todo, esta industria se mueve bastante rapido. Y entonces se preguntaran... ¿Si ya se leer la doc para que me veo un curso? La realidad es que siempre hay pequeños detalles que aprendemos de otros, la profesora se ve que tiene un carisma y talento enorme, podemos compartir conocimiento en comunidad, etc.

. Y enserio, aprendan a googlear y serán grandes Software Engineers, nomas fijense en ella, no tiene memorizado ningun de esos comandos, porque en realidad no se necesita, pero sabe exactamente donde encontrarlos y como usarlos.

oscar hernandez

student•

si se nota que es nueva impartiendo cursos

Himar Del rio plata

student•

Totalmente de acuerdo!

Irving Juárez

student•

Setup para trabajar tailwind con React

Una vez que hayamos instalado React, ya sea mediante Create React App o de manera manual, entonces así podemos instalar tailwind con el siguiente comando

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Una vez aquí, modificamos nuestro archivo tailwind.config.js por lo siguiente

module.exports = {
  // La parte mas importante es la seccion de content
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Importamos tailwind a nuestro archivo ./src/index.css

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

Finalmente podemos correr npm run start y empezar a usar tailwind en nuestros componentes

Alex hernandez mitre

student•

esto es lo que necesitaba

Irving Juárez

student•

Ahora ademas de content, vas a necesitar agregar purge en el tailwind.config.js

purge: ["./src/**/*.{js,jsx,ts,tsx}"]

De otra forma no funciona

Chrystian Fabian Lozano Ramirez

student•

Incredible que aprendo mas por los APORTES que por el curso

Benjamin Allen Ramirez Horna

student•

acostumbrate amigo..

Ezequiel Magi

student•

(Abril 2023) Después de 2 días luchando contra errores y frustraciones dejo mi propio PASO A PASO: https://nonchalant-decision-7e5.notion.site/Clase-TailwindCSS-de80835199294a6ba4b5417a327836a7

Creamos el proyecto

iniciamos el proyecto creando la carpeta local

inicializamos GIT

inicializamos NPM

seguimos los pasos desde

Primero ejecutamos

npm install -D tailwindcss

para instalar la dependencia en nuestro proyecto. Luego inicializamos tailwind con el comando:

npx tailwindcss init

eso nos va a crear el archivo tailwind.config.css en la raiz de nuestro proyecto.

Creamos la carpeta src en la raiz de nuestro proyecto y dentro creamos el archivo input.css que va a servir de base para aplicar los estilos.

Una vez creado el archivo, vamos a copiar el siguiente contenido:

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

Tambien creamos el archivo index.html en la misma carpeta.

AHORA algo mucho muy importante: Indicarle a tailwind donde va a alojar los estilos que se van a mostrar en nuestro html. Para ello ejecutamos el siguiente comando:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

El anterior comando corre el CLI (Command Line Interface). le indica a tailwind que debe tomar los estilos que elegimos y lo minifica en el archivo “output.css” dentro de la carpeta “dist” (todo esto lo crea el comando).

Ahora debemos linkear en nuestro html el archivo de donde tomaremos los estilos (output.css)

<link rel="stylesheet" href="../dist/output.css">

Ezequiel Magi

student•

PD: El proyecto es sin utilizar nada mas que html y css. PD 2: Para ver los cambios despues de guardar, hay que refrescar el navegador.

Oscar Rabadan Martinez

student•

Para evitar posibles errores simplemente sigan los pasos que les indica la documentación oficial de Tailwind CSS. Si lo hacen como ahí les indica se aseguran de hacerlo correctamente según la última versión y se evitarán problemas. Los pasos son muy sencillos.

Code Conqueror7

student•

Stephanny Sanchez

student•

Hola amigos, en el minuto 6:57 va este comando

npx tailwindcss -i ./public/css/tailwind.css -o ./src/css/tailwind.css --watch

Robert Alexander Machado Espinoza

student•

gracias :)

César Palma

student•

me parece que ella colocó el public despues del src.

Rubén Ernesto Aragón Gil

student•

Sí les aparece el siguiente error como a mí:

Agreguen esto en su tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Henry Jeffersson Salinas Arenas

student•

gracias, me ayudo!!!

Miguel Atencia Canoles

student•

Instalar tailwind de manera rapida y clara 2022 - noviembre

https://www.youtube.com/watch?v=-K5h7ycTM-M

Juan José ospina betancur

student•

para los que queden con dudas de la instalación, a mi me sirvió este video https://www.youtube.com/watch?v=YpIRCIVtovk

FERNANDA CAROLINA RODRIGUEZ GUERRERO

student•

Muy bueno, mi error se generaba en la especificación de la ruta en el archivo tailwind.config.js - content... en el vídeo muestran la craeción de carpetas, archivos y la ruta. Gracias por el aporte!

Paula Andrea Gardeazábal

student•

Mi recomendacion es seguir la instrucciones de este vinculo sección Tailwind CLI, desde la carpeta vacia (Cero archivos) donde van a guardar el proyecto.

Asi no toca crear las carpetas que dice la profe, y el procedimientos para inciar Tailwind es mucho más claro.

Marcelo Vinicio Chavarría Ugalde

student•

¿Alguien tuvo este error?

Jason Sepulveda

student•

**Octubre 2023 - Si no te funciona, debes seguir los siguientes pasos ** Documentación

Iniciar el proyecto, en la terminal ingresa el siguiente comando

npm init

Instalar Tailwind, en la terminal ingresa el siguiente comando

npm install -D tailwindcss postcss autoprefixer

Sus dependencias, en la terminal ingresa el siguiente comando, se creará el archivo tailwind.config.js

npx tailwindcss init

En el archivo tailwind.config.js cambia el codigo por el siguiente

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./public/index.html', './src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Crea las carpetas con las rutas correspondientes, puedes hacerlo directamente en la terminal o en VS Code, te dejo los comandos de la terminal.

mkdir src public src/css public/css

Crea los archivos con las rutas correspondientes, puedes hacerlo desde la terminal o vs code, te dejo los comandos para la terminal

touch src/css/tailwind.css public/index.html public/css/tailwind.css

en VS Code, en el archivo package.json, agrega el comando "dev" dentro el objeto "scripts"

"scripts": {
    "dev": "npx tailwindcss -i ./src/css/tailwind.css -o ./public/css/tailwind.css --watch",
  },

El comando dev te ayudará a ejecutar los estilos de TailwindCSS

Dirigete al archivo de VS Code llamado index.html e ingresa el siguiente comando y enter

html:5

eso te creará la estructura inicial de tu index

Crea una etiqueta H1 en el archivo index.html para hacer tu primer hello world, agrega una clase de bg-red-600, luego presiona el live server de VS Code

<h1 class="bg-red-600">Hello world! </h2>

Finalmente anda a la terminal y ejecuta el comando

npm run dev

Si ves tu Hello World con un fondo rojo, entonces has instalado los estilos y dependencias con exito.

Espero haber ayudado JS

Felipe Muñoz Caceres

student•

Muchas gracias por la ayuda, estaba teniendo muchos problemas para instalar Tailwind

Henry Alexander Velásquez Rosas

student•

5. Creación del proyecto e instalación de Tailwind

Por favor, agreguen esto en la sección de recursos del curso. ✌😃

Extensión: Tailwind CSS IntelliSense

. Para realizar esta instalación recomiendo saber que es npm para lo cual puedes revisar los apuntes npm-gestion-de-paquetes-y-dependencias o ver el curso aquí Curso de NPM. .

Iniciar proyecto Tailwind CSS v3.0

Documentación de instalación usando CLI (Interfaz de línea de comandos) .

Creamos estructura de carpetas y archivos:
- public
  - index.html
  - css
    - tailwind.css
- src
  - css
    - tailwind.css
Iniciar proyecto
- En la terminal te ubicas en la carpeta del proyecto:
  - pwd
- npm init -y
Instalar Tailwind CSS: Instale tailwindcssa través de npm y cree su archivo tailwind.config.js.
- npm install -D tailwindcss && npx tailwindcss init

. Se debe ver algo así:

.
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── css
│   └── index.html
├── src
│   └── css
└── tailwind.config.js

Configura las rutas de tus plantillas: Agregue las rutas a todos sus archivos de plantilla en su archivo tailwind.config.js.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./public/index.html', './src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Agrega las directivas de Tailwind a tu CSS: Agrega las directivas @tailwind a src/css/tailwind.css para cada una de las capas de Tailwind a tu archivo CSS principal.

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

. Si te aparece algo así, tranquilo, todo está bien.

Inicia el proceso de compilación de Tailwind CLI: Ejecuta la herramienta CLI para escanear tus archivos de plantilla en busca de clases y construir tu CSS. . Nota: La ruta dentro del comando depende de la estructura de tu proyecto.
npx tailwindcss -i ./src/css/tailwind.css -o ./public/css/tailwind.css --watch

. Debe quedar así para empezar a hacer cambios en tu proyecto:

Comienza a usar Tailwind en tu HTML: Agrega tu archivo CSS compilado al elemento <head> y comienza a usar las clases de utilidad de Tailwind para dar estilo a tu contenido.

. index.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../public/css/tailwind.css">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world! ✌😊
  </h2>
  <div class="w-64 h-64 bg-red-200"></div>
</body>
</html>

✨ Clic derecho sobre el archivo index.html y darle a Open with Live Server

Daniel García

student•

al ejecutar el paso de: npx tailwindcss init [origen] -o [destino]

me sucedió el siguiente error:

   _ throw err;
    ^

TypeError: Object.fromEntries is not a function_

era por que tenia la v10.16.0 de Node.js (node --version), actualicé a la última LTS v16.13.2 y listo!

Code Conqueror7

student•

Tal vez si lo haces de nuevo se arregle 🦥

Miguel Negron Garcia

student•

Video de como instalar Tailwind CSS v3.3.1, tambien funciona con la version v3.3.2

(https://youtu.be/EY9tRGqQcT0)

Les recomiendo que lo hagan paso a paso con el y a su manera, veran que ya que les salga a la manera del youtuber, podran tener la capacidad de hacerlo de la misma manera que hace la profe.

Benjamin Allen Ramirez Horna

student•

VEANLOO

Stivenson David Mejia Palacios

student•

Excelente Video me sirvio. llevaba ya casi 1 hora intentando que funcionara Pueden avanzar hasta el minuto 5:50 allí es donde empieza la instalación de tailwind.

Creación del proyecto e instalación de Tailwind

Conociendo Tailwind CSS

Bienvenida al desarrollo con Tailwind

Tailwind 3.0: ¿qué hay de nuevo?

¿Cómo funciona Tailwind? Y otros frameworks de CSS

Mobile First y Utility First

Instalación y directivas

Creación del proyecto e instalación de Tailwind

Directivas de Tailwind

Utilidades

Nueva paleta de colores extendida

Medidas y Breakpoints

Flexbox

Maquetación del proyecto

Plugins

Forms, Typography y Aspect ratio

Personalización

Tailwind como API para la creación de un Design System

Proyecto: Platzi Travel

Construyendo el cuerpo del proyecto

Creando la sección de Home

Diseñando nuestras cards

Extracción de componentes a clases para nuestra card

Creando la sección de Recomendados

Agregando animaciones al proyecto

Creando la sección de Rentas destacadas

Sección de FAQS

Footer

TabBar funcional

Haciendo responsivo nuestro proyecto

Haciendo responsivo nuestro proyecto: rentas destacadas

Creando la navbar

Agregando el Dark Mode

Optimización de nuestro proyecto

Purge CSS

Cómo hacer la migración de tu proyecto a Tailwind 3.0

Conclusiones

Conclusiones y siguientes pasos