Integrando PostCSS y TailwindCSS a nuestro proyecto

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: [],
};

• Fuente

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(‘tailwindcss/colors’);

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

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 “base”, sin mencionar que se renombró la opción “purge” a “content” 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