- Published on
Instalar Tailwind CSS con Next.js
- Authors
- Name
- Fabián Karaben
- @fab_k_dev
Configuración de Tailwind CSS en un proyecto Next.js v10+.
La forma más rápida de comenzar a usar Tailwind CSS en tu proyecto Next.js es usar el ejemplo Next.js + Tailwind CSS. Esto configurará automáticamente tu configuración de Tailwind según el ejemplo oficial de Next.js.
Si deseas configurar Tailwind manualmente, continúa con el resto de esta guía.
1- Crea tu proyecto
Comienza por crear un nuevo proyecto Next.js si aún no tienes uno configurado. El enfoque más común es usar Create Next App.
npx create-next-app my-project
cd my-project
2- Instalar Tailwind CSS
Instala tailwindcss
y sus dependencias de pares a través de npm
y luego ejecuta el comando init
para generar tanto tailwind.config.js
como postcss.config.js
.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
3- Configura tus rutas de plantilla
Agrega las rutas a todos tus archivos de plantilla en tu archivo tailwind.config.js
:
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
4- Agrega las directivas de Tailwind a tu CSS
Agrega las directivas @tailwind
para cada una de las capas de Tailwind a tu archivo ./styles/globals.css
:
@tailwind base;
@tailwind components;
@tailwind utilities;
5- Comienza tu proceso build
Ejecuta tu proceso de compilación con npm run dev
:
npm run dev
6- Comienza a usar Tailwind en tu proyecto
Comienza a usar las clases de utilidad de Tailwind para diseñar tu contenido.
Veamos un ejemplo en el archivo index.js
:
export default function Home() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
)
}