Como configurar TailwindCSS con Nextjs y TypeScript

Si tienes dudas de como iniciar un proyecto con Nextjs con TypeScript por aqui te dejo otro articulo en se explica como hacerlo Como agregar TypeScript a Nextjs en 2 pasos.

Una vez que tenemos el proyecto con TypeScript comenzamos la configuraci贸n de TailwindCSS, primero instalamos las dependencias, el CLI de TailwindCSS y PostCSS:

yarn add -D tailwindcss postcss-preset-env

Luego nos ayudamos de npx para iniciar la configuraci贸n:

npx tailwind init

Este comando generar谩 el archivo tailwind.config.js, luego lo abrimos y cambiamos el contenido para que quede algo similar a este:

1module.exports = { 2 future: { 3 removeDeprecatedGapUtilities: true, 4 purgeLayersByDefault: true, 5 defaultLineHeights: true, 6 standardFontWeights: true, 7 }, 8 purge: ['./components/**/*.tsx', './pages/**/*.tsx'], 9 theme: { 10 extend: {}, 11 }, 12 variants: {}, 13 plugins: [], 14};

Los par谩metros dentro de future son flags de compatibilidad entre versiones de TailwindCSS.

Creamos el archivo postcss.config.js con una configuraci贸n inicial:

module.exports = { plugins: [ "tailwindcss", "postcss-preset-env" ] };

Ahora necesitamos un archivo de estilos donde vamos a importar todas las clases de tailwindcss, me gusta crearlo en styles/tailwind.css y deber铆a tener un contenido similar a este:

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

Este archivo lo vamos a importar en _app.tsx:

1import type { AppProps } from "next/app"; 2import "../styles/tailwind.css"; 3 4function MyApp({ Component, pageProps }: AppProps) { 5 return <Component {...pageProps} />; 6} 7 8export default MyApp;

De esa forma ya aplicamos las clases de tailwind a todo el proyecto.

Para limpiar las clases que no usamos

Vamos a configurar un plugin de PurgeCSS @fullhuman/postcss-purgecss, instalamos la dependencia:

yarn add -D @fullhuman/postcss-purgecss

Luego cambiamos el archivo postcss.config.js para que quede similar a:

1const purgecss = [ 2 "@fullhuman/postcss-purgecss", 3 { 4 content: [ 5 "./pages/**/*.{js,jsx,ts,tsx}", 6 "./components/**/*.{js,jsx,ts,tsx}", 7 ], 8 defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [], 9 }, 10]; 11 12module.exports = { 13 plugins: [ 14 "tailwindcss", 15 process.env.NODE_ENV === "production" ? purgecss : undefined, 16 "postcss-preset-env", 17 ], 18};

De esta forma nos aseguramos de que se limpien las clases solo en producci贸n, esta configuraci贸n genera un warning en la consola de desarrollo porque se le pasa un undefined en el array de plugins.

Tambin necesitamos agregar unos comentarios en el archivo tailwind.css:

/* purgecss start ignore */ @tailwind base; @tailwind components; /* purgecss end ignore */ @tailwind utilities;

隆Con esto estamos listos! A disfrutar de TailwindCSS

Publicado 02/11/2020 a las 16:10