No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso Profesional de Next.js

Curso Profesional de Next.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Integrando PostCSS y TailwindCSS a nuestro proyecto

4/31
Recursos

Aportes 28

Preguntas 5

Ordenar por:

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

o inicia sesi贸n.

Desde la versi贸n 3.0.23 de tailwind ya no se usa purge. Se renombr贸 la opci贸n purge a content. Pueden encontrar m谩s informaci贸n aqu铆:
https://tailwindcss.com/docs/upgrade-guide#configure-content-sources

Clase #4: Integrando PostCSS y TailwindCSS a nuestro proyecto 4/31 馃搼


Tailwind CSS

La herramienta Tailwind CSS nos permite tener una estructura de CSS para construir r谩pidamente interfaces de usuario personalizadas.

PostCSS

PostCSS es una herramienta de desarrollo de software que utiliza complementos basados en JavaScript para automatizar las operaciones de rutina de CSS.



Para instalarlos, vamos a la consola y ejecutamos: npm install tailwindcss postcss autoprefixer

Tambi茅n ejecutamos: npx tailwindcss init -p y se generan los archivos tailwind.config.js y postcss.config.js con los templates para a帽adir las configuraciones de nuestra preferencia.

Continuando con el proyecto: 馃敤

A la fecha 8/7/2022 ya no es necesario purge. Sale por defecto content y se agrega lo siguiente:

content: [
	"./pages/**/*.{js,ts,jsx,tsx}",
	"./components/**/*.{js,ts,jsx,tsx}",
],

Fuente: aqu铆

  • Para configurar los colores, se debe declarar la variable colors al principio del archivo tailwind.config.js
const colors = require('tailwindcss/colors');

y se debe agregar la configuraci贸n dentro de theme:

theme: {
	colors: {
		...colors,
	},
},

Fuente: aqu铆

  • Creamos el archivo .env.local que nos permitir谩 trabajar con la variable de entorno:
TAILWIND_MODE =watch;

En la ruta src/styles creamos un nuevo archivo llamado tailwind.css y a帽adimos las configuraciones para importar la base de nuestro proyecto y agregar reglas de CSS:

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

Una vez guardado el archivo con Ctrl + S ya no necesitamos los archivos de los estilos que se generaron por defecto, as铆 que borramos los archivos: Home.css y globlas.css

  • Vamos al archivo _app.js es bueno recordar que cuando el archivo comienza con guion bajo: _ se interpreta que no va haber una ruta para app.js en pages, dentro del archivo se modifica el import que hac铆a el llamado a globals.js, lo cambiamos para importar a tailwind.css:
import '../styles/tailwind.css';

Ahora vamos a la p谩gina oficial de Tailwind CSS y en el panel izquierdo dar click a Playgroung, enlace directo: aqu铆

    • Nos muestra la salida de c贸mo ser铆a la configuraci贸n por defecto, junto las configuraciones en html, css. Copiamos lo que sale en html y lo sustituimos en index.js (en la ruta src/pages) todo lo que est谩 dentro de return.
      Dato: Importante que dado index no tiene extensi贸n html, puede ocurrir conflictos con la palabra reservada class, as铆 que seleccionamos todos los class con Ctrl + D y lo sustituimos por className.
  • Tambi茅n borramos los import ya que no ser谩n necesarios, seleccionamos todo el c贸digo y al dar click derecho, damos en Format Document with, lo guardamos y vamos a consola y ejecutamos npm run dev
    con 茅sto nos arroja los errores de tipeo.
    • Con la extensi贸n de esLint (para instalar en VSC, presionar Ctrl + P y pegar ext install dbaeumer.vscode-eslint y dar ENTER. Fuente: aqu铆) podemos tener advertencias directamente en el c贸digo, en index.js por ejemplo nos indica con los elementos de la imagen svg que crean conflictos, as铆 que los borramos dado que no la necesitamos por el momento.

Atenci贸n en tailwindconfig.js

En la l铆nea 4, se debe a帽adir: ,jsx
Quedar铆a :

  purge: ['./src/**/*{html,js,jsx}'],

En una lecci贸n posterior, al a帽adir los archivos de Header.jsx y Nav.jsx , si no a帽adimos jsx al purge:[], no se aplicar谩 correctamente el estilo.

Oscar, incre铆ble curso!
Gracias!

Al d铆a 11/07/22 el archivo tailwind.config debe ir de esta manera:

/** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors')

module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        ...colors
      }
    },
  },
  plugins: [],
};

instalamos dependencias

npm install tailwindcss postcss autoprefixer

a帽adimos en la ra铆z archivos de tailwind y postcss

npx tailwindcss init -p

terminamos de configurar los archivos a帽adidos
tailwind.config.js:

/** @type {import('tailwindcss').Config} */

const colors = require("tailwindcss/colors")

module.exports = {
  content: ["./src/**/*{html,js,jsx}"], // purge es reemplazado por content 
  theme: {
    extend: {
      color: {
        ...colors,
      },
    },
  },
};

postcss.config.js:

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

creamos un nuevo archivo en la ra铆z
.env.local:

TAILWIND_MODE=watch

limpiamos la carpeta styles y a帽adimos un nuevo archivo
src/styles/tailwind.css:

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

modificamos importaciones de estilos
src/pages/_app.js:

import '../styles/tailwind.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

modificamos el archivo index principal y a帽adimos un c贸digo de prueba para verificar que todo funcione correctamente
src/pages/index.js:

export default function Home() {
  return (
    <div className="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
      <img src="/img/beams.jpg" alt="" className="absolute top-1/2 left-1/2 max-w-none -translate-x-1/2 -translate-y-1/2" width="1308" />
      <div className="absolute inset-0 bg-[url(/img/grid.svg)] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]"></div>
      <div className="relative bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
        <div className="mx-auto max-w-md">
          <img src="/img/logo.svg" className="h-6" alt="Tailwind Play" />
          <div className="divide-y divide-gray-300/50">
            <div className="space-y-6 py-8 text-base leading-7 text-gray-600">
              <p>An advanced online playground for Tailwind CSS, including support for things like:</p>
              <ul className="space-y-4">
                <li className="flex items-center">
                  <p className="ml-4">
                    Customizing your
                    <code className="text-sm font-bold text-gray-900">tailwind.config.js</code> file
                  </p>
                </li>
                <li className="flex items-center">
                  <p className="ml-4">
                    Extracting classNamees with
                    <code className="text-sm font-bold text-gray-900">@apply</code>
                  </p>
                </li>
                <li className="flex items-center">
                  <p className="ml-4">Code completion with instant preview</p>
                </li>
              </ul>
              <p>Perfect for learning how the framework works, prototyping a new idea, or creating a demo to share online.</p>
            </div>
            <div className="pt-8 text-base font-semibold leading-7">
              <p className="text-gray-900">Want to dig deeper into Tailwind?</p>
              <p>
                <a href="https://tailwindcss.com/docs" className="text-sky-500 hover:text-sky-600">Read the docs &rarr;</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

corremos el proyecto y verificamos

npm run dev 

Aqu铆 les dejo el link oficial de la doc para instalar Tailwind CSS en Next.js, es muy sencillo:
https://tailwindcss.com/docs/guides/nextjs

npm i tailwindcss postcss autoprefixer

Para agregar de forma autom谩tica los archivos de configuraci贸n

npx tailwindcss init -p

Otra opci贸n para cambiar el codigo html de index es utilizar la extensi贸n html to JSX. De esta forma siempre podremos transfomar el c贸digo en un solo click 馃槂
.

En caso que no te funcione a la primera.

Debes actualizar tu archivo tailwind.config.css ya que para la version 3.0 debes usar esta configuraci贸n:

/** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors');

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        ...colors,//Usamos los colores extras
      },
    },
  },
  plugins: [],
};

Teniendo en cuenta la veris贸n actual se tailwind (3.0.23) el archivo tailwind.config.js quedaria de la siguiente forma

const colors = require('tailwindcss/colors');

module.exports = {
  content: ['./src/**/*.{html,js,jsx}'],
  theme: {
    colors: {
      ...colors,
    },
  },
};

Fuente: https://tailwindcss.com/docs/upgrade-guide#configure-content-sources

En mi caso tuve que configurar tailwind de la siguiente manera
17/Mayo/2023
Tailwind V3.3.2

/** @type {import('tailwindcss').Config} */

const colors = require("tailwindcss/colors");

delete colors["lightBlue"];
delete colors["warmGray"];
delete colors["trueGray"];
delete colors["coolGray"];
delete colors["blueGray"];

module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        ...colors,
        green: colors.emerald,
        yellow: colors.amber,
        purple: colors.violet,
      },
    },
  },
  plugins: [],
};

Esta desactualizado. Platzi Team Actualizar porfavor para que sea posible entender esas eliminaci贸nes faciles que no le encuentro sentido 馃槃-

驴Que es Tailwind CSS?

Tailwind CSS es un framework CSS que permite un desarrollo 谩gil, basado en clases de utilidad que se pueden aplicar con facilidad en el c贸digo HTML y unos flujos de desarrollo que permiten optimizar mucho el peso del c贸digo CSS.

驴Que es PostCSS?

PostCSS es una herramienta moderna para la gesti贸n del c贸digo CSS que permite aumentar la productividad a la vez que libera al desarrollador de trabajos adicionales as铆 como conocimientos t茅cnicos del estado actual del lenguaje y el soporte en los navegadores.

PostCSS por si solo no hace trabajo alguno sobre el CSS. En cambio es necesario instalar plugins que nos permitan indicar qu茅 tipo de transformaciones ser谩n realizadas sobre el CSS que tenemos de entrada, generando un CSS de salida acorde con las necesidades de cada proyecto o las tecnolog铆as con las que se trabaje.

Existen m谩s de 200 plugins de PostCSS para realizar todo tipo de transformaciones, que se pueden encontrar en la p谩gina de GitHub de PostCSS.

PostCSS se puede integrar con herramientas frontend existentes en un proyecto dado, como pueden ser Webpack o Parcel, o tambi茅n se puede usar directamente por medio de su propia CLI.

Cuando son muchos datos que hay que reemplazar, por ejemplo el class="" por className="" yo lo que hago es utilizar CTRL + F y aplicar lo siguiente.

La configuraci贸n de Tailwind en la ultima version

module.exports = {
   content: [
      "./pages/**/*.{js,ts,jsx,tsx}",
      "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
      extend: {},
   },
   plugins: [],
}

No usar purge. Debe usar ahora content.

const colors = require('tailwindcss/colors');

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*{html.js}'],
    theme: {
        colors: {
            ...colors,
        },
    },
};

que gracioso por un momento mientras escribia la variable de entorno aparece la opci贸n watchdogs jajajaja Oscar hackeando el sistema

Si quieren saber por qu茅 el profesor import贸 en _app.js el Tailwind
stylesheet, e hizo dem谩s configuraciones as铆, aqu铆 les dejo la documentaci贸n del Tailwind con Next.js, espero les sirva: https://v2.tailwindcss.com/docs/guides/nextjs

.env.local
TAILWIND_MODE = watch

tailwind .css
@tailwind base;
@tailwind components;
@tailwind utilities;

Configuraci贸n tailwind.css

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

cambiar el purge

const colors = require(鈥榯ailwindcss/colors鈥);

module.exports = {
content: [鈥./src/**/*{html,js,jsx}鈥橾,
theme: {
colors: {
鈥olors,
},
},
};

el purge ahora es

content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],

Oscar es un gran profesor, pero de verdad en este curso necesita actualizaci贸n hay muchos detalles sueltos y no est谩 siendo muy explicito

Que triste soy nueva y todas las clases con este profesor est谩n en versiones viejas y nada me funciona

驴Para qu茅 sirve PostCSS?

PostCSS es una herramienta de procesamiento de CSS basada en plugins que permite a los desarrolladores escribir CSS moderno y utilizar caracter铆sticas que a煤n no son compatibles con todos los navegadores. Yo dir铆a Lo que es Babel para JavaScript es PostCSS para CSS. Utiliza una arquitectura basada en plugins para agregar funcionalidades adicionales, como la compatibilidad con variables, la optimizaci贸n del c贸digo y la conversi贸n de sintaxis futura a sintaxis actualmente compatible con los navegadores.

PostCSS se puede utilizar tanto en proyectos de desarrollo como en entornos de producci贸n para proporcionar una experiencia consistente a los usuarios finales .

.

si alguien tiene este error Global CSS Must Be in Your Custom <App> al compilar los estilos de tailwind (en la forma como lo hace Oscar no le funciona), hay diferentes opciones para solucionarla, una de ellas es esta:
desde la version 9.5.4 de next js, se puede importar los estilos directamente desde la carpeta de node_module

// en el archivo pages/_app.js
import "../../node_modules/tailwindcss/tailwind.css";

de igual manera si quieren implementar una de las otras opciones, aqui le dejo la doc:

https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet

Mientras realizaba la integraci贸n de Tailwind CSS ten铆a el error de que no se mostraba ninguna clase. Intent茅 aplicar rutas relativas a la configuraci贸n o simplemente dejar pages y styles en ra铆z para dejar todo de 鈥渂ase鈥, sin mencionar que se renombr贸 la opci贸n 鈥減urge鈥 a 鈥渃ontent鈥 con la nueva versi贸n de Tailwind.

Resulta que lo 煤nico que le falt贸 a Oscar al instalar v铆a terminal, fue el flag - D para instalar todo como dependencias de desarrollo, cosa que viene en la documentaci贸n oficial: https://tailwindcss.com/docs/guides/nextjs.

Ahora todo funciona correctamente 馃憖.

npm install tailwindcss postcss autoprefixer