Creación del proyecto e instalación de Tailwind

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: https://tailwindcss.com/docs/installation/using-postcss

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>

Juan David Camayo Sastoque

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

user_deleted_2686188

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

Fernando Molano Castrillón

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.

user_deleted_2104185

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 💚

Obed Paz

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.

Irving Juárez

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

Chrystian Fabian Lozano Ramirez

Incredible que aprendo mas por los APORTES que por el curso

Ezequiel Magi

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

Oscar Rabadan Martinez

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.

Stephanny Sanchez

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

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

Rubén Ernesto Aragón Gil

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

Miguel Atencia Canoles

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

Instalar tailwind de manera rapida y clara 2022 - noviembre

Juan José ospina betancur

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

Paula Andrea Gardeazábal

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.

Henry Alexander Velásquez Rosas

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

Daniel García

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!

Miguel Negron Garcia

(https://youtu.be/EY9tRGqQcT0)

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

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.

Himar Del rio plata

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!

Agu Damonte

LINK Documentacion instalacion Tailwind

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

Gerson Pineda

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

silfredo mario

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.

Byron Tito

Para hoy 26/05/2024 estan con la version 3.4.3 es casi igual la instalación solo que hay que añadir esto en el archivo ' tailwind.config.js ' `module.exports = {` ` content: [` ` './src/**/*.{html,js,ts,jsx,tsx}', // Incluye todos los archivos HTML y JavaScript en la carpeta src` ` './public/index.html' // Incluye el archivo HTML en la carpeta public` ` ],` ` theme: {` ` extend: {},` ` },` ` plugins: [],` `}`

Jason Sepulveda

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

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

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

Mateo Roldán Escobar

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í

Iván Vargas

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

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.

Milagros Fortis

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>

Allan Martín Parra Espitia

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>

Javier Amador Amador

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.

Ahora bien, si lo que buscan es instalar correctamente la versión 3 de Tailwind le dejo este video:
https://www.youtube.com/watch?v=xkbpQw-lsWs&t=24s

Espero les ayude.

Jovanny Alarcon C

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

Nieng Yordan Lee Gaitan

hace 5 meses

no me instalo, me toco ir a aprender tailwind a youtube. gracias platzi!!

Byron Tito

Para hoy 26/05/2024 estan con la version 3.4.3 es casi igual la instalación solo que hay que añadir esto en el archivo ' tailwind.config.js ' ```js module.exports = { content: [ './src/**/*.{html,js,ts,jsx,tsx}', // Incluye todos los archivos HTML y JavaScript en la carpeta src './public/index.html' // Incluye el archivo HTML en la carpeta public ], theme: { extend: {}, }, plugins: [], } ```module.exports = { content: \[ './src/\*\*/\*.{html,js,ts,jsx,tsx}', // Incluye todos los archivos HTML y JavaScript en la carpeta src './public/index.html' // Incluye el archivo HTML en la carpeta public ], theme: { extend: {}, }, plugins: \[], }

Gabriel Casillas

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>

silma natera

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.

Marco Antonio Miranda Sandoval

Guía de Instalación Oficial - Tailwind CSS

⚠️ 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.

Joseph Christoffer Condori Murga

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

Fernando Quinteros Gutierrez

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

Tailwind CSS IntelliSense

💎 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

Kenet Andrés Chungandro Montenegro

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

Juan Sebastian Morales Salazar

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

adriandarfer

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

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.

Carlos Eduardo Mayorga Rodríguez

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

Himar Del rio plata

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:  ;
}

Samuel Domínguez

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

N40 M10

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

Federico Ivan Llano

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

David Ochoa

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 😉

Daniel Baez

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

Juan Daniel Zuluaga Serna

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

Rafael Ricardo Cuartas Hernández

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

Yordy Anyerson Andrade Rodriguez

No me funciona el comando <npm init>

Luis Aguilar Espinoza

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

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

Jorge Bou-saad

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

Carlos Reyes

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

Stephanny Sanchez

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

Irving Juárez

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…

bruxly Patiño

hace 16 días

Noviembre 2024, para que le funcione agregar este comando en html exactamente debajo del titulo\<script *src*="https://cdn.tailwindcss.com">\</script>```html <script src="https://cdn.tailwindcss.com"></script> ```

Ivan M. de J. M. Rivera

Seguí todos los pasos, pero no me funciono. ¿Que pudo haber salido mal? (19/02/2024)

Gustavo Victoria Ramirez

hace 5 meses

![](https://static.platzi.com/media/user_upload/Creaci%C3%B3n%20del%20proyecto%20e%20instalaci%C3%B3n%20de%20Tailwind-22a3c13b-e164-49b6-90d0-ad74419d6987.jpg)

Joan Alexander Valerio Rodríguez

Quiero compartir esto con ustedes en caso de que les llamo la atención que el archivo src/tailwind.css estaba generando una alerta por parte de VSC: `@tailwind base; ` `@tailwind components; ` `@tailwind utilities;` Les recomiendo hacer este cambio y el error quedaría solucionado: `@import 'tailwindcss/base';` `@import 'tailwindcss/components'; @import 'tailwindcss/utilities';`

Byron Tito

Para hoy 26/05/2024 estan con la version 3.4.3 es casi igual la instalación solo que hay que añadir esto en el archivo ' tailwind.config.js ' ```js Para hoy 26/05/2024 estan con la version 3.4.3 es casi igual la instalación solo que hay que añadir esto en el archivo ' tailwind.config.js ' ```Para hoy 26/05/2024 estan con la version 3.4.3 es casi igual la instalación solo que hay que añadir esto en el archivo ' tailwind.config.js '

Ronaldo Jiménez

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)

Ronaldo Jiménez

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)

Pablo Alejandro Figueroa

<https://github.com/pablo-figueroa/createTailwind/blob/main/createTailwind.sh>

Pablo Alejandro Figueroa

![](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)

Pablo Alejandro Figueroa

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

Pablo Alejandro Figueroa

**## atajo:** **npm init** (si básicamente a todo le vamos a dar enter) => **npm init -y**

Pablo Alejandro Figueroa

Antes de instalar según la documentación asegurar de tener actualizado NODE.js

claudia carrizo

hace 8 meses

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.

José Alberto Ramírez Quiroz

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

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

Alejandro Jaimes

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.

José Alberto Ramírez Quiroz

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>

Gabriel Omar Gramajo

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.

Emanuel Alejandro Ibarrola

Diciembre 2023
Decidi usar Angular 17 para arrancar este proyecto.

Oscar David Rodríguez manjarres

loa documentación ha cambiado y no f funciona el instalar , ayudenmme porfa

Oscar David Rodríguez manjarres

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

Nestor Rios Garcia

Diciembre 2023

Decidi usar Vite con react para arrancar este proyecto.

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

Andres Felipe Camacho Rodriguez

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

Andres Felipe Camacho Rodriguez

Ahora es mas fácil

Felix J. Guerra

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

Juan Pablo Vargas Ramirez

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

Francisco Salazar

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)

Stiven Jiménez

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

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

Santiago Quintero

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 .

David Sicard

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

Marvin Avila Burgos

Comandos para liux - Mayo 2023.

Abrir terminal.
Descargar nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
Cierra la terminal e ingresa de nuevo.
Instalar node lts.
nvm install --lts
Crea la carpeta del proyecto.
Abrela con vscode.
npm init

Ariel Hernán

Esto no funciona porque es una versión vieja.

Eduardo Daniel Esqueda Esquivel

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

Kalixt044

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.

Luis Angel Frias Herrera

Extensiones para Visual Studio Code recomendados:

silfredo mario

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

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:

hidalgolopezdaniel

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

Fernando Pioli Martínez

despues de correr los comandos hay que agregar estos archivos

John Steven González

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

Julian David Alzate Cuervo

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

Daniel Florez Valencia

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.

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

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.

Luis Enrique Rios

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

Jovanny Alarcon C

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

Christian Velázquez

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:

content: ["./src/**/*.{html,js}"],
Les dejo la documentación, y un video “extra”, que complementará el curso.
https://tailwindcss.com/docs/installation
https://www.youtube.com/watch?v=kKQdMd2v5CA&t=36s

Juan Diaz

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?

Stephanny Sanchez