Curso Básico de Tailwind

Curso Básico de Tailwind

Ana María Díaz Solorio

Ana María Díaz Solorio

Creación del proyecto e instalación de Tailwind

5/29
Recursos

Aportes 33

Preguntas 8

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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

  1. Iniciar proyecto npm: npm init

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

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

  1. Se ejecuta el siguiente comando npx tailwindcss init para crear el archivo de plantillas tailwind.config.js colocando la siguiente configuración:
module.exports = {
  content: ["./public/index.html", "./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
  1. Incluir Tailwind en el CSS agregando las directivas a src/css/tailwind.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Para correr los estilos de Tailwind se necesita ejecutar el siguiente comando: npx tailwindcss -i ./src/css/tailwind.css -o ./public/css/tailwind.css --watch donde estamos indicando que nuestro archivo tailwind.css que proviene de src haga un build en la carpeta de public al archivo tailwind.css.

Con esto ya se puede trabajar con Tailwind en nuestro index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../public/css/tailwind.css">
    <title>Gogo Travel</title>
</head>
<body>
    <p>Hello, world</p>
    <div class="w-64 h-64 bg-red-900"></div>
</body>
</html>

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

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

Perdón a los que están molestos porque la instalación está desactualizada pero EMPATIA por favor.
si recuerdan que esto es Platzi, no?

Es decir, hay una planeacion del curso, los contenidos, etc.
El curso no se grabó el día antes de publicarse. Muy seguramente lo grabaron hasta 3 semanas antes quizás porque debe haber un marketing que se tiene que hacer para promocionar los cursos que se vienen, etc.

Es decir, no es como que hoy dijeron hagamos este curso, pusieron a Ana en vivo a mirar que creaba con código, grabaron hoy y mañana Boom listo a publicarse el video.

Por supuesto que pasó tiempo y algunas cosas cambiaron. Incluso si es error de Platzi, igual y somos (o queremos ser) developers y eso incluye leer documentación y ajustarnos a las situaciones.

Un poco más de empatía.

Yo les recomiendo que una vez instalado Tailwind CSS, en el archivo package.json añadan estos scripts que les permitirán ser más rápidos al trabajar con el generador de CSS en tiempo real (JIT) y con el modo producción (minificación de CSS):

*Nota: suponiendo que la estructura del proyecto tiene una carpeta SRC dónde estará el código CSS (@tailwind; base @tailwind components; @tailwind utilities;) y una carpeta DIST (con un index.html y un tailwind.css).

{
  "scripts": {
    "dev": "npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css --watch",
    "prod": "npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css --minify"
  },
  "devDependencies": {
    "tailwindcss": "^3.0.12"
  }
}

Cada que editen el proyecto localmente en su terminal escriban el comando:

npm run dev

Y cuando hayan terminado y necesiten subir los cambios a producción ahora podrán teclear el comando:

nom run prod

Cualquier cosa no olviden hacer el curso de NPM 💚

Para evitar posibles errores simplemente sigan los pasos que les indica la documentación oficial de Tailwind CSS. Si lo hacen como ahí les indica se aseguran de hacerlo correctamente según la última versión y se evitarán problemas. Los pasos son muy sencillos.

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

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

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!

Chavos, les recomiendo encarecidamente que aprendan a leer documentaciones por su cuenta, aveces los cursos no pueden estar 100% a la vanguardia en todo, esta industria se mueve bastante rapido.
Y entonces se preguntaran… ¿Si ya se leer la doc para que me veo un curso?
La realidad es que siempre hay pequeños detalles que aprendemos de otros, la profesora se ve que tiene un carisma y talento enorme, podemos compartir conocimiento en comunidad, etc.

.
Y enserio, aprendan a googlear y serán grandes Software Engineers, nomas fijense en ella, no tiene memorizado ningun de esos comandos, porque en realidad no se necesita, pero sabe exactamente donde encontrarlos y como usarlos.

Setup para trabajar tailwind con React

  • Una vez que hayamos instalado React, ya sea mediante Create React App o de manera manual, entonces así podemos instalar tailwind con el siguiente comando
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
  • Una vez aquí, modificamos nuestro archivo tailwind.config.js por lo siguiente
module.exports = {
  // La parte mas importante es la seccion de content
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
  • Importamos tailwind a nuestro archivo ./src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
  • Finalmente podemos correr npm run start y empezar a usar tailwind en nuestros componentes

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/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">

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

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

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

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

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

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…

despues de correr los comandos hay que agregar estos archivos

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

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

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

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

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

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

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

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

Mucha suerte a todos

No me funciona el comando <npm init>

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

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

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

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

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

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

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

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

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

Instalacion Paso a Paso

  1. npm init -y

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

  3. npx tailwindcss init

  4. Add file tailwind.css in root foolder

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

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

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

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

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

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

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

Podéis consultarlo 👉🏻 aquí el tutorial

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

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


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

Guía de Instalación Oficial - Tailwind CSS