Personalización Avanzada

Tailwind CSS es extremadamente flexible y personalizable, lo que te permite adaptar el framework a las necesidades específicas de tu proyecto. Este módulo cubrirá cómo personalizar el archivo tailwind.config.js, crear clases y temas personalizados, configurar el modo oscuro, y usar plugins para ampliar la funcionalidad de Tailwind.

1. Personalización del archivo tailwind.config.js #

El archivo tailwind.config.js es el centro de la personalización de Tailwind CSS. Aquí puedes extender o sobrescribir las configuraciones predeterminadas, como colores, tipografías, espaciado y más. Este archivo se genera automáticamente cuando ejecutas el comando:

1npx tailwindcss init

Estructura básica del archivo:

1module.exports = {
2  theme: {
3    extend: {
4      // Aquí agregamos nuestras personalizaciones
5    },
6  },
7  plugins: [],
8}

Ejemplo: Extender la paleta de colores:

1module.exports = {
2  theme: {
3    extend: {
4      colors: {
5        primary: '#1da1f2',
6        secondary: '#14171a',
7      },
8    },
9  },
10}

Este ejemplo agrega los colores primary y secondary que ahora puedes usar en tu HTML como bg-primary o text-secondary.

2. Añadir clases personalizadas #

En lugar de depender completamente de las clases utilitarias predeterminadas, Tailwind permite crear clases personalizadas dentro de tailwind.config.js. Esto es útil para añadir estilos reutilizables específicos.

Ejemplo: Crear una clase personalizada para sombras:

1module.exports = {
2  theme: {
3    extend: {
4      boxShadow: {
5        'custom-light': '0 2px 4px rgba(0, 0, 0, 0.1)',
6        'custom-dark': '0 4px 8px rgba(0, 0, 0, 0.2)',
7      },
8    },
9  },
10}

Ahora puedes usar estas clases como shadow-custom-light y shadow-custom-dark en tu HTML.

3. Crear temas #

Tailwind CSS te permite crear temas completos utilizando el sistema de personalización. Un tema en este contexto es un conjunto de configuraciones personalizadas para colores, fuentes, sombras, etc.

Ejemplo: Crear un tema claro y uno oscuro:

1module.exports = {
2  theme: {
3    extend: {
4      colors: {
5        light: {
6          background: '#f9f9f9',
7          text: '#333',
8        },
9        dark: {
10          background: '#1a202c',
11          text: '#f9f9f9',
12        },
13      },
14    },
15  },
16}

En tu HTML, puedes aplicar el tema según el modo seleccionado:

4. Configuración de dark mode #

El modo oscuro es una de las personalizaciones más populares. Tailwind facilita su configuración con soporte integrado para dark mode.

Paso 1: Habilitar el modo oscuro en tailwind.config.js: #

1module.exports = {
2  darkMode: 'class', // Habilita el modo oscuro usando la clase 'dark'
3}

Paso 2: Aplicar el modo oscuro en HTML: #

Puedes alternar entre modos claro y oscuro añadiendo o quitando la clase dark al html o al body. Aquí te mostramos cómo:

Activar modo oscuro dinámicamente: #

Para hacer que el modo oscuro cambie según una preferencia del usuario o el sistema, puedes usar JavaScript:

1const toggleDarkMode = () => {
2  document.documentElement.classList.toggle('dark');
3}

Este código alterna entre el modo claro y oscuro cuando el usuario presiona un botón, por ejemplo.

5. Uso de plugins de Tailwind CSS #

Tailwind CSS permite extender su funcionalidad usando plugins. Puedes crear tus propios plugins o utilizar algunos ya disponibles que añaden utilidades extra, como formas, gradientes avanzados o tipografía.

Ejemplo: Instalar y usar un plugin de tipografía: #

Tailwind ofrece un plugin oficial para manejar tipografía (@tailwindcss/typography), que te ayuda a crear estilos de texto más complejos y bonitos con facilidad.

Paso 1: Instalar el plugin:

1npm install @tailwindcss/typography

Paso 2: Configurar el plugin en tailwind.config.js:

1module.exports = {
2  plugins: [
3    require('@tailwindcss/typography'),
4  ],
5}

Paso 3: Usar el plugin en tu HTML:

1<article class="prose">
2  <h1>Este es un título estilizado</h1>
3  <p>Este es un párrafo estilizado utilizando el plugin de tipografía.</p>
4</article>

Referencia: Plugins en Tailwind

6. Ejemplo práctico: Integración de un tema oscuro dinámico #

Vamos a combinar lo que hemos aprendido para crear una página con tema oscuro dinámico, que cambia entre modo claro y oscuro con un botón de alternancia.

Paso 1: Configurar tailwind.config.js:

1module.exports = {
2  darkMode: 'class', // Habilita el modo oscuro
3  theme: {
4    extend: {
5      colors: {
6        light: {
7          background: '#ffffff',
8          text: '#000000',
9        },
10        dark: {
11          background: '#1a202c',
12          text: '#f9f9f9',
13        },
14      },
15    },
16  },
17}

Paso 2: Crear HTML con clases para ambos temas:

Explicación:

• La clase dark:bg-dark-background se activa cuando la clase dark se añade al elemento raíz (html).
• El botón cambia entre modo claro y oscuro dinámicamente con el onclick que llama a toggleDarkMode().