Proceso de instalación de Tailwindcss en nextjs
Para realizar el proceso de instalación debemos seguir los siguientes pasos
- Instala Tailwind CSS y sus dependencias:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p- Configura las rutas de tus plantillas: En el archivo tailwind.config.js, agrega las rutas a tus archivos de plantilla:
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
// O si usas un directorio "src":
"./src/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {},
},
plugins: [],
};- Agrega las directivas de Tailwind a tu CSS: En tu archivo globals.css, agrega las directivas de Tailwind:
@tailwind base;
@tailwind components;
@tailwind utilities;
- Inicia el proceso de compilación: Ejecuta:
npm run dev- Comienza a usar Tailwind en tu proyecto: En tu archivo index.tsx (o donde desees), utiliza las clases de utilidad de Tailwind para dar estilo a tu contenido.
CONCLUSIÓN
La instalación de tailwindcss es muy sencilla, de hecho durante la instalación del propio nextjs nos da la posibilidad de agregar la instalación mientras se instala el propio nextjs.
La popularidad de nextjs ha ido aumentando a través de los años y eso es debido a que el framework de css ha resueltos muchos problemas, a su vez, la sencillez con la que se puede llegar a utilizar es muy grande.
Sin más que decir espero que les haya gustado este post, ¡Saludos!