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.

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.

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.

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:

1<div class="bg-light-background text-light-text">Modo claro</div>
2<div class="bg-dark-background text-dark-text">Modo oscuro</div>

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:

1<div class="bg-white text-black dark:bg-black dark:text-white">
2  Contenido que cambia de modo claro a oscuro
3</div>

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.

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

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:

1<div class="bg-light-background text-light-text dark:bg-dark-background dark:text-dark-text transition-all duration-300">
2  <div class="container mx-auto p-8">
3    <h1 class="text-2xl font-bold">Tema Oscuro Dinámico</h1>
4    <p>Este es un ejemplo de cómo implementar un tema oscuro dinámico en Tailwind CSS.</p>
5    <button onclick="toggleDarkMode()" class="mt-4 bg-blue-500 text-white py-2 px-4 rounded">
6      Cambiar Modo
7    </button>
8  </div>
9</div>

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

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().

Con estas herramientas, puedes personalizar profundamente tu proyecto Tailwind, añadiendo temas oscuros, clases personalizadas, y ampliando la funcionalidad mediante plugins.

Curso de tailwind CSS