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 11

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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

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!

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

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

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

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

cambiar el purge

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

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

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

Configuraci贸n tailwind.css

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

.env.local
TAILWIND_MODE = watch

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