Crea una cuenta o inicia sesión

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

Curso Básico de Tailwind 2 y 3

Curso Básico de Tailwind 2 y 3

Ana María Díaz Solorio

Ana María Díaz Solorio

Creación del proyecto e instalación de Tailwind

5/29
Recursos

Aportes 97

Preguntas 24

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

  1. Iniciar proyecto npm: npm init

  2. Instalar Tailwind como un plugin de PostCSS: npm install -D tailwindcss postcss autoprefixer

Documentación de instalación: https://tailwindcss.com/docs/installation/using-postcss

  1. 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: [],
};
  1. Incluir Tailwind en el CSS agregando las directivas a src/css/tailwind.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. 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>

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!
      </h1>
      <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

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

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.

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 💚

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.

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

Incredible que aprendo mas por los APORTES que por el curso

(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">

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.

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

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

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: [],
}

Instalar tailwind de manera rapida y clara 2022 - noviembre

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

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

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.

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)
.

  1. Creamos estructura de carpetas y archivos:
    • public
      • index.html
      • css
        • tailwind.css
    • src
      • css
        • tailwind.css
  2. Iniciar proyecto
    • En la terminal te ubicas en la carpeta del proyecto:
      • pwd
    • npm init -y
  3. 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
  1. 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: [],
}
  1. Agrega las directivas de Tailwind a tu CSS: Agrega las directivas  @tailwindsrc/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.

  1. 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:

  1. 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! ✌😊
  </h1>
  <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

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!

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.

Teniendo en cuenta que me tiré meses para poder avanzar con este curso y que lo pude hacer gracias a la ayuda de un compañero, os dejo por aquí la que a mi parecer es, actualmente, la manera más sencilla de realizar el procedimiento:

En primer lugar vete a la terminal, crea una carpeta y desplázate hacia ella:

mkdir nombredecarpeta
cd nombredecarpeta

Luego, abre Visual Studio Code desde la carpeta recién creada con el comando:

code . 

Una vez ahí, abre una terminal en el proyecto desde vsc y realiza los siguientes pasos:

npm install -D tailwindcss
npx tailwindcss init

Una vez realizada la instalación, te aparecerá un nuevo archivo llamado “tailwind.config.js”. Haz click en el, y modifica el PATH de tu contenido, es decir, la siguiente línea tal que así:

content: ["./src/**/*.{html,js}"],

(Ten en cuenta que si no estás siguiendo la misma ruta que te comento en este ejemplo, deberás modificar la ruta de tu contenido en función de lo que necesites)

A continuación, crea las carpetas src y dist, al mismo nivel. Por un lado, en la carpeta dist crea el archivo “output.css” y por el lado de la carpeta src, crea dos archivos: uno llamado index.html, con todo el código html y uno llamado input.css, con los estilos.

En el archivo “input.css”, coloca las siguientes líneas de código:

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

Una vez hecho todo esto, debemos hacer el build al proyecto para que comience a funcionar correctamente, corriendo el siguiente comando en la terminal:

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

Nota: para que se lean las hojas de estilo correctamente, en este caso, la ruta que debemos especificar en el link del html es la siguiente:

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

Espero que te sea de ayuda si es que estás atascado o atascada y que nunca pares de aprender🙌🏽💚

Y si consideras que me dejé algo en el tintero, no dudes en añadir tu comentario con tu aporte por favor!

Este aporte va dirigido al equipo de learning, sugiero que actualicen al menos la seccion de recursos informando/explicando como es la instalacion actualizada a la fecha.

Para los que todavia no pudieron instalarlo, en lugar de seguir los pasos del video y crear las carpetas que va mostrando, sigan los pasos de la docu oficial. En 5 minutos ya lo tienen instalado. Es literalmente copiar y pegar lo que dice la pagina. Para que sea todo mas facil sugiero que creen dos directorios:

  • src -> y ahi adentro crean el archivo input.css: /src/ input.css
  • dist -> y dentro crean el archivo output.css: /dist/output.css

LINK Documentacion instalacion Tailwind

Si acaban de llegar como yo hoy 27/04/2022 Tailwind esta en su version 3.0.24, si no les aparece el cuadro rosa que muestra la profesora hagan lo siguiente.
corran el comando: npx tailwindcss init
2. Luego entren a dicho archivo y en la seccion content agreguen "./public/*.{html,js}"
les debería quedar algo así:
content: ["./src/**/*.{html,js}", "./public/*.{html,js}"],

Espero les haya podido ayudar.

Igual lean la documentación de esa versión
https://tailwindcss.com/docs/installation

Si no puedes instalar dentro de VSC, intentalo directo en Ubuntu.

No logre hacer la instalaciòn desde la terminal dentro de ubuntu. Para lograrlo entre a ubuntu e instale directamente dentro de esta terminal y todo salio bien.

**Octubre 2023 - Si no te funciona, debes seguir los siguientes pasos
**
Documentación https://tailwindcss.com/docs/installation/using-postcss

  1. Iniciar el proyecto, en la terminal ingresa el siguiente comando
npm init
  1. Instalar Tailwind, en la terminal ingresa el siguiente comando
npm install -D tailwindcss postcss autoprefixer
  1. Sus dependencias, en la terminal ingresa el siguiente comando, se creará el archivo tailwind.config.js
npx tailwindcss init
  1. 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: [],
}

  1. 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
  1. 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
  1. 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

  1. 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

  1. 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! </h1>
  1. 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

Si a alguno le esta presentando errores al instalarlo por la terminal, usando la nueva documentación y ya han tratado de todas las maneras y no les da les recomiendo que lo usen por CDN para que puedan continuar con el curso.

<code> 
<script src="https://cdn.tailwindcss.com"></script>

Peguen este script en su index.html dentro de la etiqueta <head>

Igual les dejo la documentación aquí

Hola comunidad!! En el caso que a alguien le salga el error “no utility classes were detected in your source files. if this is unexpected, double-check the content option in your tailwind css configuration.” les dejo este enlace donde muestran como resolverlo, a mi me funciono.

Link: https://tooabstractive.com/how-to-tech/no-utility-classes-were-detected-in-your-source-files-fixed/

Nose porque la profe nos hacer instalar tantas cosas con mil errores… para hacerlo mas facil solo es necesario agregar el link de CDN al head de nuestro indext.html

href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.4/tailwind.min.css"

por lo tanto el código quedaría así:

<!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">
    <meta name="description" content=" Esta es una pag de viajes con Tailwind">
    <meta name="robots" content="index,follow">
    <title>Platzi Travel</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.4/tailwind.min.css">
</head>
<body>
</body>
</html>

Mediante el CDN solo copias y pegas y listo para rápido.
https://tailwindcss.com/docs/installation/play-cdn

<!doctype html>
<html>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<script src=“https://cdn.tailwindcss.com”></script>
</head>
<body>
<h1 class=“text-3xl font-bold underline”>
Hello world!
</h1>
</body>
</html>

Para los estudiantes que aun no sepan usar la terminal de Linux y tampoco NPM les dejo un tip:

  • -En su HTML coloquen este código en la parte del “Head”
<script src="https://cdn.tailwindcss.com"></script>
  • Ya con eso podrán usar la ultima versión (v3) de Tailwind.

ojo no es la forma mas adecuada para hacerlo en un proyecto real, pero para aprender Tailwind será mas que suficiente.

.


.

me parecio algo enredada la explicacion en esta clase.
pero logre instalar viendo en youtube https://youtu.be/YpIRCIVtovk

Chicos dejo aquí mi repositorio con un Script que hice en Bash Shell de instalación de un proyectp base de tailwindCss, mas que todo para no tener que escribir los mismos comandos cada vez que quieran comenzar un proyecto de cero. <https://github.com/snaterave/tailwind-base-install> Bienvenidas todas las ideas para mejorarlo.

⚠️ Tailwind CSS ah actualizado a la versión 3, por ende la instalación sufrió cambios. Introducción a Tailwind CSS 3 - YouTube


✅ Es recomendable usar la guía de instalación oficial.

Guía de Instalación Oficial - Tailwind CSS

Les Recomiendo ver este video si no encuentran solución "https://www.youtube.com/watch?app=desktop\&v=ppdAGSWWMVY"

👉 Enlace para descargar la extensión de VS Code:

💎 Esta extensión es una joya, porque si personalizas Tailwind, la extensión se adaptara y te dará autocompletado para tu propia configuración, por ejemplo agregas tu propio color magenta-bonito, implementar el mismo en HTML te sugerirá bg-magenta-bonito o también text-magenta-bonito

Estoy siguiendo el curso con un proyecto de symfony 6, la documentación de tailwind en la implementación es bastante clara y no tuve ningún problema con la instalación. Listo para avanzar

Si lo estás viendo en 2023 con la nueva versión de Tailwind, debes agregar el siguiente código a tu archivo tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./source/css/tailwind.css", "./public/index.html"],
    theme: {
        extend: {},
    },
    plugins: [],
};

Para los que se le está quemando la cabeza, acá les dejo los pasos a seguir. En mi caso me funciono perfecto la instalación con postcss.

https://www.youtube.com/watch?v=h4nI6thys6E

Seria bueno que actualizaran el curso. De esta manera sería más sencillo de seguir.

He realizado la instalación siguiendo a la profe, siguiendo las instrucciones de Tailwind directamente tanto con CLI como con PostCSS, y no hay manera 🥲. Aparentemente todo se instala correctamente y todo está bien pero al ir al live no hay manera de que me lea los estilos. No me sale ningún error, incluso he mirado en devtools en Red para comprobar si está cogiendo efectivamente el archivo .css correcto, pero no hay manera. ¿A alguien se le ocurre qué podría estar ocurriendo? De verdad que me estoy matando para averiguar qué narices es, seguro que es una tontería, pero no lo veo. Adjunto como están mis archivos:
input.css

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

tailwind.config.js

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

package.json

{
  "name": "himitravelapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "tw:build": "tailwind -i ./src/input.css -o ./dist/output.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tailwindcss": "^3.2.4"
  }
}

package-lock.json

{
  "name": "himitravelapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "tw:build": "tailwind -i ./src/input.css -o ./dist/output.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tailwindcss": "^3.2.4"
  }
}

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">
    <title>Himi Travel</title>
    <link rel="stylesheet" href="dist/output.css">
</head>
<body>
    <h1>Hello world</h1>
    <div class="w-96 h-96 bg-red-500"></div>
</body>
</html>

output.css

/*
! tailwindcss v3.2.4 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

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

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
*/

html {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

Hice un mini tutorial de las instalaciones que se pueden hacer, (me sirven, cuando empiezo un proyecto) dejo mi aporte en Notion

Agrego un script en donde esta todo lo visto en esta clase, solo una nota al margen, para trabajar con tailwind desde la terminal hay que usar --watch en la siguiente linea; es la responsable de construir las clases en css, con --watch realiza los cambios en tiempo real de lo contrario hay que ejecutarla cada vez que modifiquemos algo de lo contrario la clase utilizada no estara en nuestro css.

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

Script

#!/bin/bash
# EN UN ENTORNO DE PRODUCCION LAS RUTAS Y NOMBRES CAMBIAN
# Creamos los directorios y archivos, ademas de entrar en el directorio del proyecto
mkdir -p ./travel/{public/{css,},src/{css,}};
touch ./travel/public/css/tailwind.css ./travel/src/css/tailwind.css;
touch ./travel/public/index.html
cd travel || exit
# Iniciamos proyecto
npm init -y
# Instalamos tailwind y creamos tailwind.config.js
npm install -D tailwindcss; npx tailwindcss init
# Configuramos las rutas de las plantillas a tailwind.config.js
sed -i "s/content: \[]/content: ['.\/public\/index.html', '.\/src\/**\/*.{html,js}']/" tailwind.config.js
# Añadimos los import a miestrp css principal
echo "@tailwind base;
@tailwind components;
@tailwind utilities;" > ./src/css/tailwind.css
# Añadimos info a index.html
# href="./principal.css"
echo '
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../public/css/tailwind.css">
    <title>Document</title>
</head>
<body>
    <h1 class="text-3xl font-bold underline">
        Hello world!
    </h1>
    <div class="w-64 h-64 bg-red-900"></div>
</body>
</html>
' > ./public/index.html
# compilamos mediante cli
# hay que correr cada vez que hay una modificacion con --watch trabaja en tiempo real
npx tailwindcss -i ./src/css/tailwind.css -o ./public/css/tailwind.css

Esto lo vi en otro curso y me estaba preguntando porque no lo hacia directamente llamando el link, pero en la documentacion especifica como de limitado es por CDN.

‘’‘
You can’t customize Tailwind’s default theme
You can’t use any directives like @apply, @variants, etc.
You can’t enable additional variants like group-focus
You can’t install third-party plugins
You can’t tree-shake unused styles
’’’

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Recomiendo hacer uso de CDN para evitarnos, instalar node, iniciar un proyecto, etc.

Solamente se pone un link adicional a nuestro archivo HTML y funciona de maravilla, a continuación comparto la liga donde se muestra las instrucciones para su uso.

Tailwind CDN 😉

tuve que instalar tailwind por medio de CLI y no por postcss, espero no afecte mucho.

Miren este comentario antes de instalarlo. Vayan a la Página Oficial y con algunos pasos fáciles lo lograrán instalar sin problemas.

Con este método de instalación debes tener la consola escuchando los cambios que hagas.

No me funciona el comando <npm init>

Hola, aquí dejo mis notas del curso por si a alguien les sirve. (Nota: Detalles de instalación para Tailwind 3.*):

https://aguilarcopan.notion.site/Curso-B-sico-de-Tailwind-caeaf84da097415f81a71e5a4c4217e0

A mi no me funciono, yo hice los pasos del companero Juan David Camayo y si me funciono…vean los comentarios que puso. Tambien hay otra opcion…usar el CDN

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Profa profa, deberías hacer un tutorial/curso de configuración de entorno de desarrollo en Windows 10 y 11 en tu cuenta de insta o TikTok, para estar al 100 con tu curso de tailwind :3

El curso de Platzi de prework esta super desactualizado :'v

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

No way, la v3 de tailwind fue lanzada a principios de Diciembre del 2021, aqui hay un video de los nuevos features que hay en la v3. Supongo que este curso se grabo por las mismas fechas, entonces puede que la instalación no sea igual.
.
Y creo que Platzi va necesitar actualizar este curso pronto…

Una forma más practica sería instalar **Tailwind** con **Astro:** <https://tailwindcss.com/docs/guides/astro> ![](https://static.platzi.com/media/user_upload/image-6d5e6b53-ab7c-4af7-a119-8cbe5dc1f7c5.jpg)
Hey si les pasa lo mismo que a mi y no pueden instalar tailwind porque les dio error o algo, sigan los pasos de este video para su instalacion :) (version 3.4.3) <https://www.youtube.com/watch?v=PcrTJS9mWKY>
Una forma más práctica sería usando instalar tailwind con astro: <https://tailwindcss.com/docs/guides/astro> ![](https://static.platzi.com/media/user_upload/image-536aeeb5-59f0-48da-b1e0-eaf987814d20.jpg)
<https://github.com/pablo-figueroa/createTailwind/blob/main/createTailwind.sh>
![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-04-30%20192841-f6426f0e-0061-475f-ac0b-ded16dd4b005.jpg) ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-04-30%20203421-de945282-3515-4dfa-bcb4-eba05e0ad827.jpg) ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-04-30%20203556-220a01e6-c6ba-4e51-b47b-6c52e8b4adc6.jpg)
Algo muy importante: no ha explicado el tema de npm run, que se explica recién la clase 12. Tampoco el tema de --watch Tantos cracks del diseño para hacer un imitación de X
**## atajo:** **npm init** (si básicamente a todo le vamos a dar enter) => **npm init -y**
Antes de instalar según la documentación asegurar de tener actualizado NODE.js
Hoy es 15/04/2024 la version de tailwind es 3.4.3 me parece que el curso está desactualizado. Y Tailwind tiene unas mejoras que hacen que valga la pena aprenderlo. Pido a los organizadores de Platzi que actualicen los cursos basicos 1, 2 y 3 porque es una pena pagar una membresia para darte con que los cursos son obsoletos.

Acá les dejo una guia de instalación de Tailwaind y como manejarse con la documentación

https://www.youtube.com/watch?v=EY9tRGqQcT0

Seguí todos los pasos, pero no me funciono. ¿Que pudo haber salido mal? (19/02/2024)
Por defender a la tutora, tailwind constantemente cambia su configuración, lo mejor es aprender a documentarse o simplemente googlear adecuadamente para lograr su funcionamiento adecuado, tarde unos 5 min, pero se pudo. Tailwind normalmente cambia mucho en ese aspecto, pero luego de instalado es demasiado util.

Si solo quieren hacer pruebas del funcionamiento del Framework les recomiendo usar el CDN para embrollarse en la instalacion

<script src="https://cdn.tailwindcss.com"></script>

Solo debe agregarese a su HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>
Enero 2024 <https://tailwindcss.com/docs/installation/using-postcss> 1. `npm install -D tailwindcss postcss autoprefixer` 2. `npx tailwindcss init` 3. configurar paths en el archivo tailwind.config.js `/** @type {import('tailwindcss').Config} */``module.exports = {  content: ['./public/index.html'],  theme: {    extend: {},  },  plugins: [],}` 4. agregar directivas css @tailwind base; @tailwind components; @tailwind utilities; 5. ejecutar live server, npm run, etc.

Diciembre 2023
Decidi usar Angular 17 para arrancar este proyecto.

loa documentación ha cambiado y no f funciona el instalar , ayudenmme porfa
siento que deberían recortar las partes donde se busca cosas en la documentación y ser un poco mas alegres ya que se sientye una clase muy aburrida

Diciembre 2023

Decidi usar Vite con react para arrancar este proyecto.

Aqui les dejo la documentacion: https://tailwindcss.com/docs/guides/vite

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
2)
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
3)
/** @type {import(‘tailwindcss’).Config} /
module.exports = {
content: ["./src/**/
.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
4)
@tailwind base;
@tailwind components;
@tailwind utilities;
5)
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

npm run dev
con estos comandos ya se les resuelve la vida

Ahora es mas fácil

Los que tengan problema para instalar con la profe https://www.youtube.com/watch?v=SHCOrxKysRQ

Por si hay alguien nuevo por aquí y no le funciona, lo que hice básicamente fue agregar la ruta del documento html en tailwind.config.js, en la parte de content así:

content: ["./dist/index.html", "./src/**/*.{html,js}"]

Teniendo en cuenta que llamé a mi carpeta dist y no creé otra subcarpeta css, pero lo pueden cambiar según como lo crearon

https://medium.com/@khazifire/how-to-add-tailwind-css-to-your-html-project-ef06fcd8dcc9
Aquí se encuentra bien explicado como usar tailwind en tu proyecto. (Agosto 2023)

📌 comparto la DOC de tailwind, creo que al dia de hoy es mas facil seguir los pasos.

🔗 https://tailwindcss.com/docs/installation

Despues de mucho intentarlo logré configurarlo, creo que la clave está en simplemente seguir paso a paso la documentación oficial actualizada.

Creo que es nuestra responsabilidad entrar a investigar ese tipo de cosas, y más en nuestra industria donde cada día cambia cada cosa de una manera vertiginosa .

Hola, la verdad no me funcionó ni el comando que explica Ana ni tampoco los que mencionan en algunos comentarios como npm init -y…me quedé varado en esta lección y me desmotivé jaja

Comandos para liux - Mayo 2023.

  1. Abrir terminal.

  2. Descargar nvm
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

  3. Cierra la terminal e ingresa de nuevo.

  4. Instalar node lts.
    nvm install --lts

  5. Crea la carpeta del proyecto.

  6. Abrela con vscode.

  7. npm init

Esto no funciona porque es una versión vieja.

https://www.youtube.com/watch?v=xkbpQw-lsWs Este video me ayudo a instalarlo

Ufff, me tomo un día organizar el entorno e identificar los elementos y pasos a seguir para la creación del proyecto, en lo personal prefiero usar <script src=“https://cdn.tailwindcss.com”></script> .
Finalmente volvía a hacer el ejercicio, esta vez con Script y me tomo menos de 5 minutos.

Extensiones para Visual Studio Code recomendados:

Importante

Depronto estas teniendo problema para installar tailwind en tu proyecto, la forma como lo solocuiones fue haciendo la instalacion con la información de la version 3.0

Acontinuacion les dejare el link del compañero que hizo ese gran aporte:

https://platzi.com/comentario/3287775/

Creando un archivo de configuración "tailwind.config.js"

despues de correr los comandos hay que agregar estos archivos

Para el live-server también puedes activarlos solo con click derecho -> “Open with live server”

Para los que tuvieron dificultades en la instalación sigan el paso a paso de platzinauta

hola compañeros no se dejen llevar por la rabia, tienen que descargar Node.js, una ves lo tengan instalado deben abrir node desde terminal y descargan tailwind les dejo un link donde pude ser capas de instalarlo en mi pc, es solo buscar un poco

https://cosasdedevs.com/posts/configurar-un-proyecto-tailwindcss/#:~:text=Para utilizar Tailwind CSS%2C primero,e instalarlo en nuestro PC.&text=Este comando generará un archivo llamado package.

Como abrir node desde terminal
https://www.neoguias.com/windows-y-node-guia-de-iniciacion/#:~:text=Para ejecutar Node%2C abrimos la,el comando fs de Node.

Algo que veo que todos obvian, y que para mi no es nada obvio, es que para poder instalar tailwind, debes primero instalar Node Js

Para solucionar los problemas que me saltaban, fuí, instale Node Js, abri la terminar de node js (noce command prompt y luego ahora si, segui la documentacion oficial

Mucha suerte a todos

npx tailwindcss -i ./public/css/tailwind.css -o ./src/css/tailwind.css --watch para hacer un build es como cargar las configuraciones... creo

Les dejo la guía para la versión para 3.0
La verdad, si siguen la documentación como dice allí (pueden hacerlo); ya después, siguen con el curso.
Lo único que tuve que cqmbiar fue:

Estamos en al versión 3.0.18 tengo entendido que se agrego el JIT “Just in time” dondé prácticamente desdes VSC puedes ver los cambios que haces con cada clase. Habrá posibilidades que agreguen esto al curso?

En la parte superior izquierda, al lado del logo puedes cambiar de versión y seguir la que está utilizando la profesora

para los que quieran seguir la documentacion del curso https://v2.tailwindcss.com/ esa es la version 2. Es comun trabajar con versiones anteriores en la vida real jajaja

Para instalar Tailwind 2.0 solo deben escribir este comando:
npm install -D [email protected] postcss@latest autoprefixer@latest

Instalacion Paso a Paso

  1. npm init -y

    $ npm init -y
    Wrote to C:\Users\HAROLD\Documents\Prueba Tailwind\package.json:
    
    {
      "name": "prueba-tailwind",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }
    
  2. npm install -D tailwindcss

  3. npx tailwindcss init

  4. Add file tailwind.css in root foolder

  1. Crear la carpeta public en la raiz del proyecto.

    1. Dentro de la carpeta public crear la carpeta css
    2. Dentro de la carpeta css crear el archivo tailwind.css
    3. Crear el archivo index.html dentro de la carpeta public
  2. Copiar el siguiente HTML de ejemplo

    La diferencia de este HTML con el que proporciana el sitio oficial de tailwind, es la propieda href de la etiqueta link

    <!doctype html>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="./css/tailwind.css" rel="stylesheet">
    </head>
    <body>
      <h1 class="text-3xl font-bold underline">
        Hello world!
      </h1>
    </body>
    </html>
    
  3. Archivo tailwind.config.js

    module.exports = {
      content: ["./public/*.html"],
      theme: {
        extend: {},
      },
      plugins: [],
    }
    
  4. Ejecuta ultimo comando

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

En la sección de Tutoriales de Estudiantes de ese curso, he creado uno para poder usar TailwindCSS v3 con PostCSS a nuestro proyecto

Podéis consultarlo 👉🏻 aquí el tutorial

Espero os sea útil, a seguir aprendiendo 💚💚💚