Configuración

Esta sección esta dedicada para aquellos que quieren una configuración de forma manual pero completa de Tailwind CSS, aqui explicaremos como funciona nuestros sitema de diseño y como adaptarlo a tus necesidades.

Tailwind tal como viene instalado, ya esta perfectamente configurado y listo para su uso, así pues ¿por qué sería conveniente personalziarlo?

Cada proyecto tiene su propio estilo de diseño y marca. Personalizar la configuración de Tailwind te permite definir colores, fuentes, márgenes, rellenos y otros estilos específicos para que se adapten a la estética de tu proyecto. En nuestro configuración de Tailwind, ya sea a través del tema hijo o de forma manual hemos añadio algunos cambios para que trabaje de foma más eficiente. No obstante, necesitas adaptar en cada proyectos las paletyas de colores, asi como la tipografía. Por último es aconsejable crear tus propias clases para componenetes de forma que sea mantenible y lo puedas reutilzair sin necesidad de escribir muchas clases de utilidad que se repiten una y otra vez en tu sitio.

Configuración de Tailwind CSS

El archivo de configuración de Tailwind CSS se divide en varias secciones clave que permiten personalizar y ajustar el comportamiento del framework según las necesidades de tu proyecto. A continuación, te describiré las partes principales del archivo de configuración tailwind.config.js y lo que hacen:

Prefijo de clase (prefix): Esta sección te permite especificar un prefijo que se añadirá a todas las clases generadas por Tailwind. Esto es útil para evitar conflictos con otras clases CSS en tu proyecto.

module.exports = {
  // ...
  prefix: 'tw-',
  // ...
}

Modo (mode): Puedes definir el modo en el que deseas que Tailwind genere las clases CSS. El modo predeterminado es «JIT» (Just-In-Time), que genera únicamente las clases utilizadas en tu proyecto. Otras opciones incluyen «aOT» (Ahead of Time) y «watch».

Modo «aOT» (Ahead of Time):

En el modo «aOT» (Ahead of Time), Tailwind CSS genera todas las clases definidas en tu configuración en el momento de la construcción de tu proyecto.
Esto significa que, durante la compilación, Tailwind crea un archivo CSS que contiene todas las clases posibles, independientemente de si las utilizas en tus archivos HTML o JavaScript.
El resultado es un archivo CSS grande que contiene todas las clases, lo que puede aumentar el tamaño de tu proyecto, pero no requiere una fase de purga posterior.
Es útil cuando deseas generar un archivo CSS estático para tu proyecto sin preocuparte por la purga de clases no utilizadas.

Modo «watch»:

En el modo «watch,» Tailwind CSS genera clases en tiempo real mientras trabajas en tu proyecto.
Este modo es especialmente útil durante el desarrollo, ya que observa tus archivos fuente (HTML, JavaScript, etc.) en busca de clases utilizadas y genera solo las clases necesarias en ese momento.
A medida que agregas o eliminas clases en tu proyecto, Tailwind se encarga de actualizar el archivo CSS de manera dinámica, lo que mantiene el tamaño del archivo más pequeño y solo incluye las clases que se utilizan en ese momento.
Es ideal para evitar la generación de un archivo CSS grande durante el desarrollo y garantizar un rendimiento óptimo en producción después de la purga de clases no utilizadas.

module.exports = {
  // ...
  mode: 'jit',
  // ...
}

Purging (purge): Esta sección te permite especificar las rutas de tus archivos HTML, JavaScript u otros, para que Tailwind pueda analizar y eliminar las clases CSS no utilizadas en tu proyecto. Esto es esencial para mantener el tamaño del archivo CSS lo más pequeño posible.

module.exports = {
  // ...
  purge: [
    './src/**/*.html',
    './src/**/*.js',
  ],
  // ...
}

Temas (theme): Aquí puedes personalizar el aspecto visual de tu sitio web. Tailwind te permite personalizar colores, tipografía, espaciado, tamaño de texto, radios de borde, márgenes, rellenos y más. Puedes ajustar estos valores para adaptarlos a tu diseño.

module.exports = {
  // ...
  theme: {
    extend: {
      colors: {
        primary: '#FF5733',
      },
      fontFamily: {
        custom: ['Open Sans', 'sans'],
      },
    },
  },
  // ...
}

Extensiones (extend): Aquí puedes agregar clases personalizadas o extender las clases existentes en Tailwind con nuevos estilos. Esto es útil cuando necesitas crear estilos específicos para tu proyecto.

module.exports = {
  // ...
  extend: {
    typography: {
      'lg': {
        css: {
          h1: {
            fontSize: '2.5rem',
          },
        },
      },
    },
  },
  // ...
}

Plugins (plugins): Puedes habilitar y configurar complementos de terceros en esta sección. Los complementos pueden agregar funcionalidad adicional a Tailwind, como estilos para formularios, elementos desplegables, etc.

module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/forms'),
    require('tailwindcss-nesting'),
    // ...
  ],
  // ...
}

En resumen, el archivo de configuración de Tailwind se utiliza para personalizar el framework, ajustando colores, tipografía, clases CSS, modos de generación, purga de clases no utilizadas y más. Al configurar estas secciones según las necesidades de tu proyecto, puedes crear estilos personalizados y optimizar el rendimiento de tu sitio web.

Archivo Base CSS

El archivo Base CSS, es el archivo CSS que tiene configurada la implementación de Tailwind de Winden y Yabe Siul para procesar durante la ejecución o compilación final.

A continuación te muestro el archivo mínimo que debe contener:

@tailwind base;
@tailwind components;
@tailwind utilities;

Capa Base (base):
- Esta capa se utiliza para definir estilos iniciales que se aplicarán a los elementos HTML sin ninguna clase de Tailwind.
- Los estilos definidos en esta capa actúan como estilos base o iniciales para tu proyecto. Aquí puedes establecer el tamaño de fuente predeterminado, márgenes, colores y otros estilos para los elementos HTML.
- Esta capa es útil para definir estilos globales que se aplican a todos los elementos HTML.
Capa Componentes (components):
- En la capa Componentes, puedes definir estilos específicos para componentes personalizados de tu proyecto, como botones, tarjetas, formularios, entre otros.
- Los estilos definidos en esta capa son reutilizables y se aplican a componentes específicos en tu sitio web.
- Esta capa es útil para organizar y mantener los estilos de componentes personalizados en un solo lugar.
Capa Utilidades (utilities):
- La capa Utilidades es la característica distintiva de Tailwind CSS. Aquí puedes definir clases de utilidad que se aplican directamente a elementos HTML en tus plantillas o código HTML.
- Las clases de utilidad te permiten ajustar rápidamente el estilo, el espaciado, el tamaño de fuente y otros aspectos de tus elementos HTML.
- Esta capa es especialmente poderosa y versátil, ya que facilita la creación de diseños y estilos de forma ágil.

La directiva @apply, es una característica importante en Tailwind CSS que te permite aplicar clases de utilidad de Tailwind a tus propios estilos personalizados. Puedes utilizar @apply en tu CSS personalizado para combinar tus estilos con clases de utilidad de Tailwind.

Ejemplo de cómo usar @apply:

/* Componentes */

.mi-boton {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

.otro-estilo {
  @apply text-lg mb-4;
}

En el ejemplo anterior, la clase .mi-boton combina estilos personalizados con clases de utilidad de Tailwind para crear un botón azul personalizado. La directiva @apply permite la reutilización de las clases de utilidad de Tailwind en tus propios estilos.

En una misma clase tienes que tener en cuenta que pudes usar varios @apply para poder organizar el código si lo prefieres. Tambien puedes combinar clases de utilidad con CSS convencional.

/* Componentes */

.mi-boton {
  @apply bg-blue-500 text-white font-bold rounded;
  @apply py-2 px-4;
  width: 100%;
  position: relative;
}

La capa de utilidades dado que trabajan con una sola propiedad CSS, sólo contienen código CSS.

Para finalizar mostramos un pequeño ejemplo de archivo completo donde se puede ver tambien como se definen las clases con las diferentes capas que acabamos de mencionar.

html {
	overflow-x: hidden;
	font-size: 100%;
  }
  
  *,
  ::before,
  ::after {
	box-sizing: border-box;
	border-width: 0;
	border-style: solid;
	border-color: theme("colors.gray.500");
  }

    /*  Color */	
    --bricks-color-primary: theme("colors.primary.500") !important;
    --bricks-color-secondary: theme("colors.secondary.500") !important;
    --bricks-text-dark: theme("colors.gray.700") !important;
    --bricks-text-medium: theme("colors.gray.500") !important;
    --bricks-text-light: theme("colors.gray.300") !important;
    --bricks-bg-dark: theme("colors.gray.900") !important;
    --bricks-bg-light: theme("colors.gray.100") !important;
    --bricks-border-color: theme("colors.gray.500") !important;
    --bricks-tooltip-bg: theme("colors.gray.700") !important;
    --bricks-tooltip-text: theme("colors.gray.50") !important;

@tailwind base;
@tailwind components;
@tailwind utilities;
  
@layer base {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-display font-semibold tracking-tight;
    text-wrap: balance;
  }
  
  h1 {
    @apply text-4xl leading-none my-3;
  }
  
  h2 {
    @apply text-3xl leading-none;
  }
  
  h3 {
    @apply text-2xl;
  }
}

@layer components {
  body {
    @apply font-body  text-base;
  }
  .dark {
    @apply bg-neutral-900 text-white;
  }
  section {
    @apply py-md px-xs;
  }
  section > [class*=brxe-] {
    @apply container mx-auto max-w-screen-xl;
  }
}

@layer utilities {	
  .flip-w {
    transform: scaleX(-1);
  }
}

Según se desprende del ejemplo podemos ver varias cosas adicionales que debemos mencionar.

Podemos añadir CSS convencional, como se puede ver en el ejemplo antes de las tres capas de Tailwind. El lugar donde colocarlo ya depende de la forma de organziar tu CSS, yo prefiero colocarlo en primer lugar.
Podemos acceder a la configuración de tailwind como se puede ver en la definición de las variables de color de bricks. En este caso lleva el !important para que puedan sobreescribir los valores de Bricks Builder.

Inicio rápido

Personalización

Flowtitude

Componentes

Yabe SIUL

Plugins

Configuración

Configuración de Tailwind CSS

Modo «aOT» (Ahead of Time):

Modo «watch»:

Archivo Base CSS