Instalación y ambiente de desarrollo

Francisco Javier Antúnez Durán

student•

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:

&lt;!-- Genera archivo configuracion vacio de nombre tailwind.config.js --&gt;

- `npx tailwindcss init`
&lt;!-- Genera archivo configuracion completo --&gt;
- `npx tailwindcss init tailwind.config.full.js --full`

&lt;!-- Plugin recomendado para VSCode: Tailwind CSS IntelliSense --&gt;

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

&lt;!-- Instrucciones archivo postcss.config.js: --&gt;

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

- `&quot;scripts&quot;: { &quot;build&quot;: &quot;postcss css/tailwind.css -o public/css/styles.css&quot;,`
&lt;!-- Para autoregenerar el tailwind.css cuando creamos paquetes --&gt;
- `&quot;dev&quot;: &quot;postcss css/tailwind.css -o public/css/styles.css --watch&quot;}`
&lt;!-- Ejecutar para compilar --&gt;
- `npm run dev`

### Inicializamos script para crear el css

&lt;!-- genera una directorio css con su styels.css en la carpeta public --&gt;

- `npm run build`

Juan Esteban Galvis

student•

Uy me salvaste la vida jajajaj tenia el script de build con -c y era -o jajaj gracias

Andres Evaristo Ruiz Gonzalez

student•

Gracias Francisco! :D

Javier Silva Avendaño

student•

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:

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.

Creas el archivo tailwind.config.js usando el comando en consola:

npx tailwindcss init

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: {},
  }
}

Creamos nuestro archivito tailwind.css como lo dice el profe y ahi agregas esto:

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

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

Luis Glex

student•

Me salvaste, gracias por tu aporte!!

Camilo Taborda

student•

Excelente aporte! Muchas gracias... Ya me estaban dando un montón de errores al momento de realizar el build. Definitivamente es importante contrastar la información con la documentación. Muchas, muchas gracias! 😎

Keven Mauricio Chaparro Benavides

student•

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

Karla

student•

Gracias. Me funcionó con : npx tailwindcss build css/tailwind.css -o public/css/style.css

Moisés Cedeño

student•

Excelente compañeros, es correcto. Si no hacemos esto no se genera el enlace entre el HTML y el CSS entonces no podemos usar las clases de TailwindCSS.

Muchas gracias.

Jan Park

student•

Solución al error del npm run build de PostCSS 8.

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!

Brian Hawkins

student•

Excelente para entender la estructura del comando! Muchas gracias! Una duda, qué significa el -o dentro del script? Saludos

Jonathan Alemán

student•

¡Gracias!

Angélica Rocha

student•

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 :D

Alberto Castro Flores

student•

de donde sacaste esa linea de codigo?

Luis Alejandro Vera Hernandez

student•

Gracias Angelica. Es una linea de codigo para la terminal de windows para reemplazar el comando touch que usa el profe en su MAC y poder crear el archivo postcss.config.js

Saul Florez

student•

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

José Heriberto López Ruiz

student•

¡Muy buena idea! Gracias.

John W. Martínez

student•

Muchas gracias, la forma como tú lo pusiste funcionó porque la forma como lo puso el maestro no me sirvió.

Fernando Andres Muñoz Suazo

student•

Hola, les comparto mis apuntes de esta clase:

1.2 Instalación y ambiente de desarrollo

Herramientas:

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

Pasos:

Crear carpeta donde se alojara el proyecto.
Inicializamos el proyecto con: npm init -y.
Instalamos las demás libreriamos: npm install tailwindcss autoprefixer postcss-cli.
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

Hernán Arica

student•

hola sabes por que no funciona instalándolo como hace el profesor con postcss //*.css -o *//** ???

Sebastian Pinto Becerra

student•

Versión Abril - 2021

Dependencias

npm init -y

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

Inicializamos las herramientas instaladas

Genera archivo configuracion vacio de nombre tailwind.config.js

npx tailwindcss init

Creamos archivo de configuracion postcss.config.js

agregamos al archivo lo siguiente:

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

Creacion archivo html y origen CSS

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>
    <h2>Proyecto Tailwind</h2>
  </body>
</html>

Instalacion servidor de desarrollo

npm install live-server -g

Creacion Spript para build y start

agregamos al package.json

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

Ejecucion del proyecto

## nos crea el archivo css a partir de Taildwind
npm run build 

npm run start

Gustavo Adolfo Nieto Gómez

student•

Muchas gracias por tu aporte! me sirvió muchísimo!

David Gustavo Lopez Figueroa

student•

me sale este error en consola siguiendo estos pasos. alguien me podria ayudar a a veriguar como lo soluciono:

 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)

David Ponce Vargas

student•

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

Aarón González

student•

Usar el CDN suele funcionar y venir bien ;) Solo tener en cuenta que al usarlo hay cosas que perdemos, como:

Usar las directivas de apply y variants
Usar group-hover
No puedes agregar otros plug-ins

David Ponce Vargas

student•

Totalmente de acuerdo aaron, solo di una opción ya que vi que varios tenían duda de usar nodejs, solo es para aprender y comprender esta tecnología no para un proyecto real jeje

Albert K. Camargo Barreda

student•

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 ]

Instituto Pacífico

student•

Gracias, funciona perfecto!

Daniel Jonguitud

student•

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.

Aarón González

student•

Es cierto, Daniel. Ambas funcionarán OK :D Normalmente con este tipo de plugins prefiero instalarlos mediante VSCode ¿tú qué prefieres?

Daniel Jonguitud

student•

Prefiero tenerla en VSCode :)

Emmanuel Rodríguez

student•

Se me activó VueJS ♥️

Victor Yoalli Dominguez

teacher•

Otra alternativa a:

npx tailwindcss init

es ejecutar

./node_modules/.bin/tailwind init

las dos opciones realizan la misma función.

Roger Carlos Ariel Alba

student•

Gracias!

Yo lo estoy corriendo desde Ubuntu y así me funcionó bien.

Daniel Rincón Méndez

student•

Ahí les va al 02/07/2024

Actualizar npm

npm install -g npm@10.8.1

Instalar tailwind

npm install -D tailwindcss

Instalar autoprefixer y postcss

npm install autoprefixer postcss-cli

Inicializar npm

npm init -y

Configurar css/tailwind.css, agregar:

@tailwind base;

@tailwind components;

@tailwind utilities;

Configurar public/index.html, agregar:

<link rel="stylesheet" href="css/style.css">

Configurar postcss.config.js

module.exports = {

plugins: [

require('tailwindcss'), requite('autoprefixer')

]

}

Configurar tailwind.config.js, agregar:

content: [

"./index.html",

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

],

Connfigurar package.json, agregar:

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"build": "npx tailwindcss -i css/tailwind.css -o public/css/style.css --watch"

},

Correr npm

npm run build

Yerson Alexander Arredondo García

student•

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

Alexis Ulises Barba Pérez

student•

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.

Reynaldo Francisco Moreno Briceño

student•

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

Alberto Castro Flores

student•

como entiende la terminal lo que queremos instalar? de donde instala tailwind?

Francisco Ponce

student•

Hola Albert,

Cuando ejecutas el comando

npm i <Nombre de la dependencia>

El empaquetador de Node es el que esta instalando las dependencias que desees utilizar. Npm no es el único, hay otros como yarn.

Si quieres entender un poco de más del funcionamiento de npm puedes ver el Curso de Gestión de Dependencias y Paquetes con Node

Alberto Castro Flores

student•

ok gracias

Edwin Manrique Matias

student•

hola buenas tarde, es que tengo algunos problemas con algunos comandos como touch me aparece este error ( no se conoce el comando interno o externo, programa o archivo por lotes ejecutables ) y no sabria como solucionarlo.

Luis Lira

student•

¡Hola!

Esto es debido a que touch es un comando para las terminales Unix como Mac o Ubuntu, si estás usando el cmd de Windows no es posible usarlo.

Te recomiendo usar la terminal Gitbash, yo trabajo en Windows y me gusta mucho, puedo usar varios comandos de las terminales Unix. :D

Juan Esteban García Giraldo

student•

Si usas cmd de windows puedes usar este codigo

type nul > file.txt

o también con este

COPY CON archivo1.txt

o simplemente vas a tu explorador de windows a tu carpeta del proyecto y lo creas directamente, también lo puedes hacer desde tu editor de texto.

Patrick Jeremy Rodriguez Sandoval

student•

Ayuda. me figura el siguiente error, posterior a ejecutar el comando "npx tailwindcss init".

Ismael Cruz Procel

student•

Tienes instalado node en tu computadora?

Instalación y ambiente de desarrollo

Introducción, instalación y ambiente de desarrollo

¿Qué es Tailwind CSS?

Instalación y ambiente de desarrollo

Directivas de Tailwind

Conceptos básicos

Personalización y configuración

Responsive Design, Mobile First y Utility First

Utilerías

Colores

Cómo crear grids o columnas en Tailwind CSS

Dimensiones y Espacios

Cambiando las propiedades de la tipografía

Ajustando el espaciado entre letras y líneas

Display

Flexbox

Crea tus propias utilerías

Entendiendo las variantes y las pseudo-clases

¡Es hora de practicar!

Proyecto: PlatziFood

Creando una card

Aplicando formato a la card

Responsive design en la card

Construye el header

Crea el footer

Crea un banner

Cómo integrar una card

Forms

Directivas de Apply

Extraer componentes

Navbar

Alpine JS

Optimiza tu archivo: PurgeCSS y NanoCSS

Conclusiones

Conclusiones y qué sigue