Instalación y ambiente de desarrollo

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 “touch” 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```

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 ‘scripts’ 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:

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(‘tailwindcss’),
require(‘autoprefixer’)
]
}

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:
“build”: “npx tailwindcss build ruta_cssbase_tailwind -o ruta_final_css”

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

npm init -y

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Genera archivo configuracion vacio de nombre tailwind.config.js

npx tailwindcss init

agregamos al archivo lo siguiente:

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

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>

npm install live-server -g

agregamos al package.json

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

## 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 “npm 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 “npm 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 “npm 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 “name 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.

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.3
  
   ✅ Created 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’s 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

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

No entiendo

Tutorial de instalación 2023

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

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 “administra”, 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).

Acá esta la extensión para tailwind css

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 “touch postcss.config.js” te sale:
‘touch’ 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 “npm 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 ‘hello 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.

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.

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

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'),
]};

mkdir css

touch css/taildwind.css

Dentro del archivo tailwind.css añadir

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

"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…demasiado 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??