Cómo configurar Tailwind en un proyecto Next.js

Stewart Granger Flores - 11 Noviembre, 2020

💡

Ahora puedes usar tailwind en Next.js usando el siguiente flag cuando crees el proyecto. Y te ahorras lo de abajo 😋.

npx create-next-app -e with-tailwindcss

Actualización 2021

1.- Instalar TailwindCSS

Posterior a crear tu proyecto en Next.js con create-next-app necesitas instalar tailwind en tu proyecto. Para esto usaremos


    npm install tailwindcss -D

2.- Crear el archivo de configuración de Tailwind

El siguiente paso es crear el archivo de configuración de Tailwind que se ubica en la ruta raíz del proyecto y se llama tailwind.config.js, además, nos crea la estructura completa de tailwind.


    npx tailwindcss init --full

3.- Crear el archivo Postcss

Ahora necesitamos crear el archivo postcss.config.js y dentro pegaremos el siguiente código


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

Continuamos instalando postcss-preset-env que ayuda a convertir tu código CSS en algo que todos los navegadores puedan entender al momento de hacer el build de tu proyecto.


    npm install postcss-preset-env -D

4.- Tailwind.css

Ahora crearemos dentro de la carpeta styles que nos crea Next.js un archivo llamado tailwind.css y dentro pondremos lo siguiente:


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

y lo importamos en _app.js para que sea contemplado en cada página que hagamos en nuestro proyecto.


    import "../styles/globals.css";
    import "../styles/tailwind.css"; // <---- aquí

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

    export default MyApp;

5.- PostCSS PurgeCSS, Autoprefixer, PostCSS Import

Ahora para poder minimizar la cantidad de CSS que es creado en nuestro build, usaremos PostCSS PurgeCSS, cuya tarea es identificar TODO el CSS que no estamos usando en nuestro proyecto y purgarlo, para hacer un bundle de menor tamaño.


    npm install @fullhuman/postcss-purgecss -D
    npm install autoprefixer
    npm install postcss-import

Y listo..

Con todo esto, ya deberías tener tu proyecto funcionando con TailwindCSS.🎉