🎨 Componentes y estilos con CSS, Sass y Tailwind

06 - 🎨 Componentes y estilos con CSS, Sass y Tailwind

Aprende cómo crear componentes reutilizables y aplicar estilos modernos con CSS, Sass y Tailwind en tu proyecto Next.js.

---

🧩 Creación de componentes reutilizables

En Next.js, los componentes son funciones que devuelven elementos de interfaz de usuario. Se almacenan normalmente dentro de la carpeta components/ para mantener una estructura organizada.

Por ejemplo, puedes crear un componente Boton.js que pueda reutilizarse en varias páginas.

components/
 └─ Boton.js
app/
 └─ page.js
      

🎨 Estilos con CSS tradicional

Next.js permite importar archivos CSS globales o específicos de componentes. Los estilos globales se definen en app/globals.css y los estilos locales se pueden importar directamente dentro del componente.

Ejemplo:

// app/globals.css
body {
  font-family: Arial, sans-serif;
  background-color: #fafafa;
  margin: 0;
  padding: 0;
}

// components/Boton.js
import './Boton.css';

export default function Boton({ texto }) {
  return <button className="mi-boton">{texto}</button>;
}

// components/Boton.css
.mi-boton {
  background-color: #0070f3;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}
      

💅 Estilos con Sass (SCSS)

Sass es un preprocesador de CSS que permite usar variables, anidación y mixins. Para usarlo en Next.js, solo debes instalarlo con:

npm install sass

Luego puedes crear archivos .scss dentro de tu proyecto:

/* components/Alerta.scss */
$color-principal: #e63946;

.alerta {
  background-color: $color-principal;
  color: white;
  padding: 10px;
  border-radius: 6px;
}

// components/Alerta.js
import './Alerta.scss';

export default function Alerta({ mensaje }) {
  return <div className="alerta">{mensaje}</div>;
}
      

🌈 Estilos con Tailwind CSS

Tailwind CSS es un framework de utilidades que te permite aplicar estilos directamente desde tus archivos JSX usando clases predefinidas. Es muy rápido, moderno y se integra perfectamente con Next.js.

Para crear un proyecto con Tailwind ya configurado, puedes usar el siguiente comando:

npx create-next-app@latest myapp --example with-tailwindcss
  

🧩 ¿Cómo funciona className?

En React y Next.js, los elementos HTML usan el atributo className (en lugar de class tradicional de HTML) para aplicar estilos. Tailwind aprovecha esto para aplicar clases utilitarias que definen color, tamaño, margen, padding, sombras y mucho más.

export default function TarjetaSimple() {
  return (
    <div className="bg-white shadow-lg rounded-xl p-5 text-center">
      <h2 className="text-2xl font-bold text-blue-600">Tarjeta con Tailwind</h2>
      <p className="text-gray-700 mt-2">Diseño moderno y responsivo</p>
    </div>
  );
}
    

1️⃣ bg-white — Fondo blanco:

Ejemplo de fondo blanco

2️⃣ shadow-lg — Sombra grande (elevación):

Ejemplo con sombra

3️⃣ rounded-xl — Bordes redondeados:

Ejemplo con bordes redondeados

4️⃣ p-5 — Padding interno (espaciado):

Ejemplo con padding grande

5️⃣ text-center — Texto centrado:

Este texto está centrado

6️⃣ text-2xl — Tamaño de fuente grande:

Texto más grande

7️⃣ font-bold — Texto en negrita:

Texto en negrita

8️⃣ text-blue-600 — Color de texto azul:

Texto azul Tailwind

9️⃣ mt-2 — Margen superior pequeño:

Texto 1

Este texto tiene margen superior (mt-2)

---

---

📦 Ejemplo práctico — Componente reutilizable

A continuación, un ejemplo completo de un componente que recibe props (titulo y descripcion) y usa clases de Tailwind para aplicar estilos.

// components/Tarjeta.js
export default function Tarjeta({ titulo, descripcion }) {
  return (
    <div className="bg-blue-50 border border-blue-300 p-4 rounded-xl text-center shadow-md">
      <h3 className="text-xl font-bold text-blue-700">{titulo}</h3>
      <p className="text-gray-700 mt-2">{descripcion}</p>
    </div>
  );
}

// app/page.js
import Tarjeta from '../components/Tarjeta';

export default function Home() {
  return (
    <main className="flex flex-col items-center justify-center p-8 space-y-4">
      <Tarjeta titulo="Componente con Tailwind" descripcion="Ejemplo práctico de estilo modular." />
      <Tarjeta titulo="Reutilizable" descripcion="Puedes usar este componente en cualquier página." />
    </main>
  );
}
    

💡 Consejo: Tailwind permite combinar clases libremente, lo que te da un control total sobre la apariencia sin tener que crear archivos CSS separados.

← Volver al índice