Como agregar Tailwind a Nextjs
Tailwind es una grandiosa herramienta que nos servirá para ahorrarnos muchos dolores de cabeza hablando de responsividad y css. Aquí te muestro como puedes agregar este framework un proyecto de Nextjs.
Lo primero que tenemos que hacer es instalar las bibliotecas necesarias, para ello debemos ejecutar lo siguiente:
npm install -D tailwindcss postcss autoprefixer
Esto nos instalará tailwind, postcss y autoprefixer que son las bibliotecas necesarias para poder usar el framwork.
Una vez hecho esto lo siguiente será inicializar un archivo de configuración, para ellos ejecutamos el siguiente comando:
npx tailwindcss init -p
Este comando nos generará un archivo de configuración llamado tailwind.config.js al cual debe verse así:
module.exports = {
content: [
],
theme: {
extend: {},
},
plugins: [],
}
Para que tailwind funcione correctamente deberemos agregar lo siguiente al apartado de content:
content: [
"./src/**/*.{js,ts,jsx,tsx,mdx}",
]
Con esto ya tenemos lo necesario para poder trabajar con tailwind, el último paso es agregar las dependencias CSS a nuestro archivo global.css de esta manera:
@tailwind base;
@tailwind components;
@tailwind utilities;
Es importante que estas dependencias las coloques al principio del archivo, arriba del todo.
Ahora ve a cualquiera de tus páginas y empieza a usarlo, aquí te doy un ejemplo:
<h1> className="text-3xl font-bold underline cursor-pointer">
¡Estoy usando Tailwind!
</h1>
text-3xl: Hace que el tamaño del texto sea grande
font-bold: Aplica estilo de negritas
underline: Aplica subrayado
cursor-pointer: Hace que el cursor sea una manita
Finalmente, solo queda probar que todo funcione, ejecuta el comando:
npm run dev
Y podrás ver a Tailwind en acción.
Te recomiendo mucho instalar esta extensión de visual studio code que te ayudará a no tener que memorizar tanto las clases:
