Curso de Tailwind CSS 1

Curso de Tailwind CSS 1

V铆ctor Yoalli Dom铆nguez

V铆ctor Yoalli Dom铆nguez

Instalaci贸n y ambiente de desarrollo

2/29
Recursos
Transcripci贸n

Aportes 79

Preguntas 21

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Dejo por aqu铆 unos apuntes que cree para iniciar la configuraci贸n desde 0, por si le sirve a la comunidad.

## Dependencias

- `npm init -y`
- `npm install tailwindcss autoprefixer postcss-cli`

### Inicializamos las herramientas instaladas:

<!-- Genera archivo configuracion vacio de nombre tailwind.config.js -->

- `npx tailwindcss init`
<!-- Genera archivo configuracion completo -->
- `npx tailwindcss init tailwind.config.full.js --full`

<!-- Plugin recomendado para VSCode: Tailwind CSS IntelliSense -->

### Creamos archivo de configuracion postcss.config.js

<!-- Instrucciones archivo postcss.config.js: -->

- `touch postcss.config.js`
- `module.exports = { plugins: [require('tailwindcss'), require('autoprefixer')], };`

### Creacion archivo html y origen CSS

- `mkdir css`
- `touch css/tailwind.css`

### Configuracion archivo css/tailwind.css

- `@tailwind base; @tailwind components; @tailwind utilities;`

### Completamos script en package.json

- `"scripts": { "build": "postcss css/tailwind.css -o public/css/styles.css",`
<!-- Para autoregenerar el tailwind.css cuando creamos paquetes -->
- `"dev": "postcss css/tailwind.css -o public/css/styles.css --watch"}`
<!-- Ejecutar para compilar -->
- `npm run dev`

### Inicializamos script para crear el css

<!-- genera una directorio css con su styels.css en la carpeta public -->

- `npm run build`

Hola, puedes ahorrarte muchas confusiones siguiendo la documentaci贸n de Tailwind, siendo Abril del 2021, los comandos cambiaron, aqu铆 va un resumen r谩pido, aclaro que todo lo que escribo est谩 en la p谩gina, pero si te da flojera, espero te sirva:

  • Despu茅s de crear tu carpeta e irte en consola a su direcci贸n debes inicializar npm, es importante que hagas este paso pues si no lo haces, no se te creara el archivo package.js (como me paso a m铆 :v) lo inicializas con:
npm init -y

Ahora comienza la instalaci贸n:

  1. Estando en tu carpeta por terminal usas:
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

No te espantes si ves cosas diferentes, es lo mismo que usa el profe, solo que para el a帽o 2021.

  1. Creas el archivo tailwind.config.js usando el comando en consola:
npx tailwindcss init
  1. Creas tu archivo postcss.config.js , no es necesario que uses 鈥渢ouch鈥 como el profe o cualquier otro comando, basta con hagas add new file en VSC y le pones este nombre, usa Ctrl+C y Ctrol+V si quieres y ah铆 dentro metes el siguiente c贸digo:
module.exports = {
  plugins: {
     tailwindcss: {},
     autoprefixer: {},
  }
}
  1. Creamos nuestro archivito tailwind.css como lo dice el profe y ahi agregas esto:
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. No es necesario que instales live server, busca la extensi贸n en VSC y una vez agregada lo enciendes o apagas con click derecho y Open with Live Server.

  2. A lo mejor te espantes cuando ingreses en el script lo que puso el profe y al dar:

npm run build

Nomas no furule y te marqu茅 una serie de errores, iniciando por algo como: no se reconoce el comando interno o externo, tranquilo, es porque lo que escribe el profe esta desactualizado, el c贸digo actual lo puedes encontrar en la secci贸n Using Tailwind whitout PosCSS, pero aqu铆 esta de todos modos:

"build": "npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css"

Lo 煤nico que haces es agregar las direcciones que pone el profe as铆:

"build": "npx tailwindcss-cli@latest build css/tailwind.css -o public/css/style.css"

隆Y ya! Es todo, si te quedan dudas lee la documentaci贸n y los aportes ah铆 est谩 todo, la mayor铆a de cosas las entend铆 leyendo ambas partes. Saludos

Ya lo resolv铆 siguiendo la documentaci贸n de Tailwind鈥

Editen esta l铆nea de c贸digo con sus rutas y listo

npx tailwindcss build styles.css -o output.css```
<h1>Soluci贸n al error del npm run build de PostCSS 8.</h1>

Si te da un error similar al de abajo despues de correo npm run build utilizando "build": "postcss css/tailwind.css -o public/css/styles.css en tu 鈥榮cripts鈥 de [package.json]. Comprueba si tu error es similar al mio:

Error: PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (/Users/usuario/Local/platzifood/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/Users/usuario/Local/platzifood/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/Users/usuario/Local/platzifood/node_modules/postcss/lib/postcss.js:55:10)
    at /Users/usuario/Local/platzifood/node_modules/postcss-cli/index.js:218:14
    at async Promise.all (index 0)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! platzifood@1.0.0 build: `postcss css/tailwind.css -o public/css/style.css`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the platzifood@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/usuario/.npm/_logs/log-debug.log

No se preocupen prueba lo siguiente, es una variaci贸n de lo que dice en la p谩gina de Tailwind para proyectos peque帽os, pero incluyendo la estructura y nomenclatura que se emplea aqu铆 en el video.

Soluci贸n: npx tailwindcss build

En la p谩gina de Tailwind.
Using Tailwind with Post CSS recomienda el siguiente comando:
npx tailwindcss build styles.css -o output.css para procesar un build del css.

Sin embargo este busca un [styles.css] en la carpeta ra铆z [/] y genera un css [output.css], lo cual no es lo que se muestra en el video. La estructura del video es la siguiente:

.
鈹溾攢鈹 css
鈹    鈹斺攢鈹 tailwind.css /* tailwind input */
鈹溾攢鈹 node_modules
鈹溾攢鈹 public
鈹   鈹溾攢鈹 index.html
鈹   鈹斺攢鈹 css
鈹        鈹斺攢鈹 style.css  /* tailwind output */
鈹溾攢鈹 package.json /* editar este archivo */
鈹溾攢鈹 package-lock.json
鈹溾攢鈹postcss.config.js
鈹斺攢鈹tailwind.config.js
;

Teniendo en cuenta la estructura anterior modificamos el Script de la siguiente manera:

  "scripts": {
    "build": "npx tailwindcss build css/tailwind.css -o public/css/style.css"
// Cambiamos el input de styles.css a css/tailwind.css y el output de output.css a public/css/style.css
  },

Listo, ahora ejecutas npm run build en su terminal y te deber铆a dar el mismo resultado al igual que en el video.
Espero te sea de utilidad. 隆脡xitos coders!

Dejo ac谩 una ayuda para los que est谩n en Windows y no les sirva el comando Touch.

fsutil file createnew postcss.config.js 0

Espero sea de ayuda 馃槃

Tambi茅n podemos agregar el comando de live-server a nuestro package.json:

"scripts": {
  "start": "live-server public",
  "build": "postcss css/tailwind.css -o public/css/style.css"
},

Esto es una buena pr谩ctica y ahora podemos iniciar nuestro servidor de desarrollo solo con el comando

npm start

Hola, les comparto mis apuntes de esta clase:

<h1>1.2 Instalaci贸n y ambiente de desarrollo</h1>

Herramientas:

  • npm ==> Node Package Managament, ayuda a manejar, instalar y crear proyectos de NodeJS.
  • Tailwind CSS.
  • AutoPrefixer.
  • PostCSS.

Pasos:

  1. Crear carpeta donde se alojara el proyecto.
  2. Inicializamos el proyecto con: npm init -y.
  3. Instalamos las dem谩s libreriamos: npm install tailwindcss autoprefixer postcss-cli.
  4. Inicializar estas libreriamos que vamos a usar:
    • npx tailwindcss init.
    • touch postcss.config.js.

Plugin recomendado para VSCode:
Tailwind CSS IntelliSense

Ingresar las siguientes instrucciones al archivo postcss.config.js:
module.exports = {
plugins: [
require(鈥榯ailwindcss鈥),
require(鈥榓utoprefixer鈥)
]
}

Creamos el archivo origen de CSS y nuestro HTML.
css/tailwind.css

Agregar estas lineas al archivo base de css tailwind.css:
@tailwind base; @tailwind components; @tailwind utilities;

Dentro del archivo package.json agregar esta linea dentro de scripts:
鈥渂uild鈥: 鈥渘px tailwindcss build ruta_cssbase_tailwind -o ruta_final_css鈥

Para generar nuestro css final, ejecutamos en la terminal:
npm run build

<h3>Versi贸n Abril - 2021</h3> <h3>Dependencias</h3>
npm init -y

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
<h3>Inicializamos las herramientas instaladas</h3>

Genera archivo configuracion vacio de nombre tailwind.config.js

npx tailwindcss init
<h3>Creamos archivo de configuracion postcss.config.js</h3>

agregamos al archivo lo siguiente:

module.exports = {
  plugins: {
     tailwindcss: {},
     autoprefixer: {},
  }
}
<h3>Creacion archivo html y origen CSS</h3>

creamos un archivo en la ruta css/tailwind.css, agregamos lo siguiente al archivo creado

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

creamos la carpeta de nuestro html en public/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>Inicio</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1>Proyecto Tailwind</h1>
  </body>
</html>
<h3>Instalacion servidor de desarrollo</h3>
npm install live-server -g
<h3>Creacion Spript para build y start</h3>

agregamos al package.json

"start": "live-server public",
"build": "npx tailwindcss-cli@latest build css/tailwind.css -o public/css/style.css"
<h3>Ejecucion del proyecto</h3>
## nos crea el archivo css a partir de Taildwind
npm run build 

npm run start

Amigos si obtienen un error como este 鈥plugin autoprefixer requires PostCSS 8鈥 pueden usar este comando parar utilizar una versi贸n compatible. muchos 茅xitos en el aprendizaje ;D.

npm install autoprefixer@'9.8.6'     

Una manera sencilla de empezar a utilizar Tailwind CSS es utilizando el archivo minificado accediendo a este enlace:

https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css

Se copia todo y lo guardas como tailwind.min.css en tu proyecto y listo
Espero que a alguno le sirva 馃槂

Puedes omitir el paso de 鈥渘pm install live-server -g鈥, si instalas la extension en Visual Studio Code. Luego inicias el servidor con click derecho Ope With Live Server [Alt + L ]

Otra opci贸n que quiero recomendar para no tener que instalar live server de npm es usar la extensi贸n de VSCode que lleva el mismo nombre. Cualquiera de las dos opciones son exactamente lo mismo.

Se me activ贸 VueJS 鈾ワ笍

Otra alternativa a:

npx tailwindcss init

es ejecutar

./node_modules/.bin/tailwind init

las dos opciones realizan la misma funci贸n.

Hola. Estoy tomando este cursos y tailwindcss ya esta en la versi贸n 3.0.5. Como lo explican en el v铆deo no me funciono, pero logr茅 hacerlo de la siguiente manera:

mkdir platzifood
npm init -y
npm install tailwindcss postcss-cli autoprefixer @tailwindcss/jit
npx tailwindcss init
touch postcss.config.js

El archivo `tailwind.config.js`` queda as铆:

module.exports = {
  purge: [
    './public/**/*.html'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

El archivo postcss.config.js qued贸 as铆:

module.exports = {
    plugins: {
        tailwindcss : {},
        autoprefixer: {}
    }
}

En el archivo package.json, en la secci贸n scripts agregar:

"build:css": "postcss ./src/css/tailwind.css -o ./public/css/main.css"

Por 煤ltimo, en la consola ejecutamos:

npm run build:css

Me hubiera gustado que profundizara m谩s en el objetivo de postcss y de autoprefixer, si son necesarios siempre que se use tailwind o solo para este proyecto, porque en la documentaci贸n de tailwind no los menciona y me gustar铆a saber en qu茅 casos utilizarlos.

Excelente vamos a seguir! Dato: deben de tener nodejs en versi贸n 12.13.0 o superior, si no lo tienen actualizado al momento de correr el comando 鈥渘pm run build鈥 les arrojara error (me paso por eso ac谩 les aviso).

Si est谩n en Windows el remplazo a touch podr铆a ser copy con y el nombre del archivo.

Mi archivo de tailwindcss tiene un par谩metro content y este c贸digo me funcion贸

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

El plugin que usa en code para crear archivos es:
**advanced-new-file
**

Si estas en Windows y quieres anadir un nuevo archivo puedes utilizar

type nul > tailwind.config.js

Si a alguno le da el siguiente error al escribir 鈥渘pm run build鈥:

> platzifood@1.0.0 build
> postcss css/tailwind.css -o public/css/style.css

sh: 1: postcss: not found

lo solucione instalando postcss-cli:

npm i -D postcss postcss-cli

Si les aparece el error

TypeError: Object.entries(...).flatMap is not a function

Actualicen su versi贸n de node

One
Open: We need open our terminal and there open our folder.

In this case create folder with:

  • mkdir "named for you"
    For we can see the the documents we need:
  • ls
    To enter with:
  • cd 鈥渘ame folder鈥
In terminal

tailwind_test % mkdir tailwind_test
tailwind_test % ls
 tailwind_test
tailwind_test % cd tailwind_test

Two
Initialize project: We can initialize the project with npm.

In terminal

tailwind_test % npm init -y
Wrote to /Users/Tere/Documents/project/package.json:

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Three
Install Tailwind via npm: In this case we make by npm. Also in this case We will install other way.

<h3>If you want see, You鈥檒l be able to see it below in the second example in terminal.</h3>

First example:

In terminal

# Using npm
% npm install tailwindcss

# Using Yarn
% yarn add tailwindcss

Second example:

In this case add autoprefixer library.
Where the library will take care of prefixing all CSS classes so that all browsers understand.

  • autoprefixer

Also add CSS preprocessors are in charge of transforming the language rules used by Tailwind css into css code that is understandable by the browser, in this case PostCSS.

  • postcss-cli
In terminal

tailwind_test % npm install tailwindcss autoprefixer postcss-cli

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN project@1.0.0 No description
npm WARN project@1.0.0 No repository field.

 +autoprefixer@9.8.6
 +postcss-cli@7.1.1
 +tailwindcss@1.7.3
added 172 packages from 142 contributors and audited 172 packages in 20.567s

10 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

tailwind_test % 

Four
NPX TAILWINDCSS: We can run the next command that we will see next.

-npx tailwindcss init

That this command will create the folder config empty

tailwind.config.js

In terminal

tailwind_test % npx tailwindcss init
 
   tailwindcss 1.7.3Created Tailwind config file: tailwind.config.js
  
tailwind_test % 

In our visual studio code it look like this below

Five
Create file: We need create a file named postcss.config.js. We can create in your terminal or in your code editor.

Create file

  • touch postcss.config.js

See all files

  • ls
In terminal

tailwind_test % touch postcss.config.js
tailwind_test % ls
node_modules		package-lock.json	package.json		postcss.config.js	tailwind.config.js
Ttailwind_test % 

In our visual studio code it look like this below

recommended plug-in for VS code: Tailwind CSS IntelliSense

  • This extension help you autocomplete classes and styles that are using.

Six
Config file postcss.config.js in VS code.

In file postcss.config.js

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ]
}

Seven
Config File CSS: In documentation tailwind. Add Tailwind to your CSS.

https://tailwindcss.com/docs/installation

Use the @tailwind directive to inject Tailwind鈥檚 base, components, and utilities styles into your CSS:

In file example.css

@tailwind base;

@tailwind components;

@tailwind utilities;

Eight
Create HTML for file CSS and modify script package.json.

In file index.html

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <h1>Hello world</h1>

</body>

</html>

The script will create the file style.css

In file package.json

"scripts": {
    "build": "postcss css/tailwind.css -o public/css/style.css"
  },
In terminal

tailwind_test % npm run build

>project@1.0.0 build /tailwind_test
>postcss css/tailwind.css -o public/css/style.css


risk - There are upcoming breaking changes: removeDeprecatedGapUtilities
risk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.
risk - https://tailwindcss.com/docs/upcoming-changes
tailwind_test % 

  • Abrir la consola
  • Ingresar en la carpeta del proyecto
  • Escribir siguiente comando: npm init -y
  • A partir de aqui ya podemos instalar las demas librerias
    • npm install tailwindcss@latest postcss@latest autoprefixer@latest Esto me sirvio a mi despues de que quise iniciar las dependencias y me diera un error
      Autoprefixer es una libreria que nos ayudara en nuestro codigo

### Inicializar nuestras herramientas

npx tailwindcss init Genera un archivo tailwind.config.js

<!-- Genera archivo configuracion completo -->

  • npx tailwindcss init tailwind.config.full.js --full

  • touch postcss.config.js Para MAC

  • fsutil file createnew postcss.config.js 0 para Windows

Plugin recomendado: TailwindCss Intellisense by Brad Cornes

Agregar la siguiente linea al archivo postcss.config.js

module.exports = { 
    plugins: [
        require('tailwindcss'), 
        require('autoprefixer')
]

}

Crear carpeta CSS con archivo tailwind.css y agregar

@tailwind base; 

@tailwind components; 

@tailwind utilities;

Crear directorio public con archivo index.html

Instalar live server para realizar las pruebas

Linkar el archivo HTML a una hoja de estilos

  • Dirigirse a package.json en la seccion de scripts reemplazar por: "build": "postcss css/tailwind.css -o public/css/style.css"

  • Ir a la terminal y escribir npm run build

Si quieren comenzar a jugar con tailwind sin instalar nada, puden hacer sus pruebas aqu铆 https://play.tailwindcss.com/
ah铆 mismo se puede modificar el config y tambi茅n tienen un archivo CSS

Me parece demasiado b谩sico el proyecto no me gusta nada el dise帽o creo que s铆 quieren insitar a que uno le tome cari帽o a un nuevo frameworck almenos hay que hacer un buen proyecto

f

Ojo!!!
Al d铆a de hoy al parecer el script del package.json no funciona, en la documentaci贸n se hace menci贸n de correr el siguiente comando desde la terminal para poder generar el build

npx tailwindcss build styles.css -o output.css

Using Tailwind CLI

Les dejo una charla de Adam Wathan creador de Tailwindcss en la Laracon US 2019 imperdible!!! click aqui

aaaaah PHPSTORM eso te delatooo profee!!! crack!! 馃挭馃徎

Interesante clase, creo que es la primera vez que hago una instalaci贸n desde 0

Buenas noches.
En la presentaci贸n comenta que Taildwind es muy bueno y me llamo la inquietud de conocerlo y cambie de opini贸n al ver el v铆deo Instalaci贸n y ambiente de desarrollo donde deja fuera a Windows debido a que yo no cuento con Mac y a煤n no instalo Linux. Reciba un saludo.

Les comparto este link: https://github.com/tailwindcss/setup-examples donde podr谩n encontrar templates para usar Tailwind en Svelte, Sapper, Vue cli, entre otros.
cada uno cuenta con su respectiva gu铆a de instalaci贸n.

No entendi nada jaja

Desactualizado
Este video me ayudo mucho para poder instalar y usar npm en git bash. <https://www.youtube.com/watch?v=Z-Ofqd2yBCc&ab_channel=TheCoderCaveesp>

No entiendo

en windows no es touch, es echo

Estoy tratando de seguir las gu铆as de instalaci贸n y configuraci贸n de tailwindcss, al momento de ejecutar el script para generar el archivo .css en la consola me da error

warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - https://tailwindcss.com/docs/content-configuration

voy a las guias de tailwind y agrego la ruta de los archivos que usan css.

no entiendo por que me da esos errores

Me parece sencillo la instalacion y la configuracion, aunque muchos comentan que ha cambiado, en m caso me funciono correctamente.

Para los que usamos vue con vite:
https://tailwindcss.com/docs/guides/vite

Diferencias entre Npm y Npx:
Para informaci贸n m谩s completa pueden checar este link, pero a resumidas cuentas Npm no puede ejecutar paquetes, solo los 鈥渁dministra鈥, la 煤nica forma en la que puede ejecutarlos es que estos se encuentren instalados globalmente en el equipo o que est茅n espec铆ficados en la secci贸n de scripts en el package.json (justamente como se mostr贸 en la clase, de este manera se pudo correr npm run build, en el caso de que estuvieran instalados globalmente no es necesario especificar el comando npm run, bastar铆a con los comandos nativos de, en este ejemplo, tailwind-cli).
Npx si puede ejecutarlos, de hecho me parece que la x en su nombre viene de eXecute. Npx solo puede ejecutar paquetes de manera local (que est茅n instalados en el proyecto, m谩s no en el equipo).

Hola comunidad.
Si ya hicieron todos los dem谩s pasos que est谩n en los comentarios y aun as铆 nos les funciona aqu铆 mi soluci贸n espec铆ficamente para este error.

Error:

 TypeError: Object.entries(...).flatMap is not a function
    at flattenColorPalette (/home/volta/.npm/_npx/17734/lib/node_modules/tailwindcss-cli/node_modules/tailwindcss/lib/util/flattenColorPalette.js:8:83)
    at /home/volta/.npm/_npx/17734/lib/node_modules/tailwindcss-cli/node_modules/tailwindcss/lib/plugins/divideColor.js:27:53
    at plugins.forEach.plugin (/home/volta/.npm/_npx/17734/lib/node_modules/tailwindcss-cli/node_modules/tailwindcss/lib/util/processPlugins.js:69:5)
    at Array.forEach (<anonymous>)
    at _default (/home/volta/.npm/_npx/17734/lib/node_modules/tailwindcss-cli/node_modules/tailwindcss/lib/util/processPlugins.js:63:11)
    at /home/volta/.npm/_npx/17734/lib/node_modules/tailwindcss-cli/node_modules/tailwindcss/lib/processTailwindFeatures.js:64:54
    at LazyResult.runOnRoot (/home/volta/.npm/_npx/17734/lib/node_modules/tailwindcss-cli/node_modules/postcss/lib/lazy-result.js:333:16)
    at LazyResult.runAsync (/home/volta/.npm/_npx/17734/lib/node_modules/tailwindcss-cli/node_modules/postcss/lib/lazy-result.js:385:26)
    at LazyResult.async (/home/volta/.npm/_npx/17734/lib/node_modules/tailwindcss-cli/node_modules/postcss/lib/lazy-result.js:215:30)
    at LazyResult.then (/home/volta/.npm/_npx/17734/lib/node_modules/tailwindcss-cli/node_modules/postcss/lib/lazy-result.js:200:17)

Lo que tienes que hacer es actualizar nod.js aqu铆 estan los pasos.

Resumen del post:

/*Actualizar npm*/
//Verificar vercion
npm --version
// Comando para actualizar
sudo npm install -g npm@latest
//Para verificar que si all谩 actualizado
npm -v
/*Limpiar cache:En la mayor铆a de los casos, realizar esta acci贸n no es necesaria, pero en muchos tutoriales lo recomiendan al hacer un actualizaci贸n de este tipo.*/
sudo npm cache clean -f
/*Actualizar Node*/
sudo npm install -g n
//Ahora procedemos a instalar la 煤ltima versi贸n estable de Node.Js.
sudo n stable

驴Qu茅 es mejor para el uso de Frameworks?
Hasta el momento he aprendido Bootstrap y Materialize, y ambos los usamos con CDN para que la web cargue m谩s r谩pido, aunque tambi茅n ten铆amos la opci贸n para instalarlos con NPM.
La ventaja del CDN es que la p谩gina cargar谩 m谩s r谩pido ya que muy probablemente ese archivo ya lo tenga el navegador guardado en el cach茅.
Pero usando la consola tenemos acceso a mejores cosas como personalizaci贸n de algunos plugins, algunas variables y en s铆 en control total del framework.
En producci贸n 驴Qu茅 es lo que m谩s se usa o cu谩l es el mejor m茅todo para usar un framework en la vida real?

驴No puedes instalar live-server aunque usas sudo?, usa este comando

sudo npm install live-server -g --unsafe-perm

Alguien sabe como instalar postcss en windows? no me sirven los comandos

hola, 驴alguien sabe como crea las carpetas desde el explorador de visual studio code?

Cada vez que quiero realizar un proyecto con Tailwind, tengo que instalarlo otra vez como lo hace en el video?

Hola chicos, si alguno esta haciendo el curso en este momento, recuerden las actualizaciones de los plugins, justamente por eso es necesario tener en las dependencias el POSTCSS solo, sin necesidad del postcss-CLI o en su defecto tener los dos, si necesitan alguna ayuda me escriben y tratar茅 de ayudar en lo que pueda.

Usando windows, si al ingresar 鈥渢ouch postcss.config.js鈥 te sale:
鈥榯ouch鈥 is not recognized as an internal or external command,

solo hay que instalar touch con el comando: npm install touch-cli -g

Vamos a darle, muy emocionado.

Si te sale error al instalar postcss-cli por incompatibilidad con autoprefixer
solo instala:
autoprefixer@^9.8.6
postcss@^8.1.1
postcss-cli@^8.1.0
tailwindcss@^1.8.13
ojo postcss y tambi茅n postcss-cli

No me generaba la construcci贸n del proyecto con npm run build, as铆 que buscando encontr茅 que estaba inhabilitado la ejecuci贸n de scripts en mi configuraci贸n de node. Para habilitarlo solo hab铆a que cambiar el valor a false con el siguiente comando.

npm config set ignore-scripts false

Si alguien tiene el mismo problema espero le sirva.

Hola, a alguien m谩s le sale este error al momento de realizar el 鈥渘pm run build鈥?

> platzi-tailwind@1.0.0 build C:\Users\KevCB1988\Desktop\platzi-tailwind
> postcss css/tailwind.css -o public/css/style.css

ReferenceError: requiere is not defined
    at Object.<anonymous> (C:\Users\KevCB1988\Desktop\platzi-tailwind\postcss.config.js:2:13)
    at Module._compile (internal/modules/cjs/loader.js:936:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
    at Module.load (internal/modules/cjs/loader.js:790:32)
    at Function.Module._load (internal/modules/cjs/loader.js:703:12)
    at Module.require (internal/modules/cjs/loader.js:830:19)
    at require (internal/modules/cjs/helpers.js:68:18)
    at module.exports (C:\Users\KevCB1988\Desktop\platzi-tailwind\node_modules\import-fresh\index.js:28:9)
    at loadJs (C:\Users\KevCB1988\Desktop\platzi-tailwind\node_modules\cosmiconfig\dist\loaders.js:9:18)
    at Explorer.loadFileContent (C:\Users\KevCB1988\Desktop\platzi-tailwind\node_modules\cosmiconfig\dist\createExplorer.js:230:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! platzi-tailwind@1.0.0 build: `postcss css/tailwind.css -o public/css/style.css`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the platzi-tailwind@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\KevCB1988\AppData\Roaming\npm-cache\_logs\2020-03-24T00_31_34_387Z-debug.log```

Otra forma de usar Tailwind CSS en los proyectos, es usar un CDN y se escribe la siguiente l铆nea en la cabecera del archivo HTML.

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

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

Arracando el curso con vue y tailwind馃

Hola, una consulta, cada vez que desee realizar un nuevo proyecto, debo de hacer todo este procedimiento de nuevo? o queda ya todo registrado en nuestra maquina y solo ejecutamos los archivos en uno nuevo?

Gracias, muy buena explicaci贸n. 馃槂

Not茅 un detalle, creo que el profe vincula en el html la carpeta style.css generada al correr el comando npm run build ./public/css/style.css, ya que si la vinculamos a /css/style.css no apreciamos los cambios de los estilos del 鈥榟ello worldl!!鈥

si desean iniciar un repositorio de git con git init les recomiendo este comando que creara la carpeta de git ignore para que no se suban las dependencias innecesarias de tail autoprefixer and post:

touch .gitignore && echo "node_modules/" >> .gitignore && git rm -r --cached node_modules ; git status```

Hola Chicos. Les cuento que me estaba saliendo este error:

do not define a valid './colors' target

Lo solucion茅 instalando esta versi贸n de autoprefixer:
npm install [email protected]

Veo que ser谩 fundamental hacer el curso de PostCSS antes que este jajaj

A Toda marcha, pero todo bien por el momento

Es un framework con una ideolog铆a de utility-first,mobile-first

tailwind no se basa por completo en componentes sino en clases preconstruidas

Instalaci贸n y configuraci贸n base de un proyecto.

<h3>Dependencias</h3>

npm init -y inicia el proyecto con npm y el packages.json con la configuraci贸n predeterminada sin preguntar por nombre del autor ni palabras clave

npm install tailwindcss autopreficer postcss-cli instala las depdendencias del proyecto.

autoprefixer ayuda a agregar en el c贸digo algo conocido como vendor prefixes.

<h3>Inicializar las herramientas instaladas</h3>

npx tailwindcss init genera un archivo de configuraci贸n vac铆o con el nombre de tailwind.config.js

<h3>Configurar postcss</h3>

Todo esto ocurre en el folder root o principal del proyecto

touch postcss.config.js

dentro de este archivo a帽adir

module.exports = { plugins: [
	require('tailwindcss'),
	require('autoprefixer'),
]};
<h3>Crear el archivo html y el origen del CSS para tailwind</h3>

mkdir css

touch css/taildwind.css

Dentro del archivo tailwind.css a帽adir

@tailwind base;
@tailwind components;
@tailwind utilities;
<h3>BUENA PR脕CTICA Configurar los scripts para correr el proyecto desde package.json</h3>
"scripts": {
	"build": "postcss css/tailwind.css -o public/css/styles.css", 
}

Una vez hecho esto se puede ejecutar

npm run build

Y se va a generar la carpeta css dentro de public con el archivo de css compilado

Esta deber铆a ser la configuraci贸n base de un proyecto hasta el momento

Como dato; hay una extensi贸n en VS CODE de nombre : Open Live Server, que monta nuestro archivo index en un servidor autom谩ticamente al hacer cambios no hace falta recargar ya que trabaja en tiempo real. 馃憣

ten铆a como media hora arrojandome error hasta que verifiqu茅 y era porque estaba escribiendo taliwind en vez de tailwind.
Moraleja: escriban bien los comandos.

Plugin de Tailwind CSS IntelliSense para VSCode

pesimo para ense帽ar鈥emasiado rapido, usa funciones especificas de mac sin ense帽ar para windows, entre otras cosas que uno debe resolver por las malas solo.

Wenas a tod@s;

Por si les da alg煤n error instalando TailWind, este link, est谩n los pasos para instalar la versi贸n anterior. Me cost贸 dos horas, pero Roma no se hizo en un d铆a XD.

Yo tuve un problema a la hora de hacer npm run build, me daba un error de Object.entries(鈥).flatMap is not a function - trouble when trying to use postcss + tailwind + purgecss.

Lo solucion茅 actualizando la versi贸n de node, ya que ten铆a la 10.09 y ahora la 15, leyendo me di cuenta que tailwind funciona desde la 12 en adelante.

Para actualizar node segu铆 los siguientes comandos (ubuntu)
-sudo npm cache clean -f
-sudo npm install -g n
-sudo n latest
-node --version

pues tuve muchos errores uno de ellos fue al crear un archivo.
solucion:*

fsutil file createnew postcss.config.js 0

luego no poder crear el otro css y cambie el script ++build ++ a:

  "scripts": {
    "build": "npx tailwindcss build css/tailwind.css -o public/css/style.css"
  },

pero igual me aparec铆a errores entonces revise los archivos q cree haber si tenia un error a la hora de escribir y si lo tuve (les recomiendo q si sigue fallando hagan esto).

Y por ultimo** me instale otra vez node.js** y parece que todo me ande de lujo saludos chicos espero q les sirva esto

npm init -y
npm install tailwindcss@latest postcss@latest autoprefixer@latest

Antes de todo, creen la carpeta y abranla dentro del visual studio, y all铆 usan la terminal del editor, es mucho mas rapido, si se pierden usen la gu铆a de la p谩gina de tailwind, sobre todo por los cambios de la versi贸n, que igual no son muchos, pero es bueno estar actualizado, todo funciono de maravilla

Esto es genial! Me parece que tengo que hacer si o s铆 el curso de webpack

A mi me tiraba este error << npm ERR! code ELIFECYCLE >> si alguien llega a tener el mismo problema se soluciona actualizando nodeJs a una versi贸n mayor a la 12.5

Desde la terminal de Ubuntu no puedo iniciar, pero si desde la de Git鈥 Alguien me dice que curso tomar para entender??