Tailwind CSS Flowtitude Plugin

Plugin para Tailwind CSS 4 que proporciona componentes y utilidades personalizadas para el sistema de diseño Flowtitude.

Instalación

npm install tailwindcss-flowtitude

Uso

Como Plugin de Tailwind CSS 4

// tailwind.config.js
import flowtitude from 'tailwindcss-flowtitude';

export default {
  // ... tu configuración
  plugins: [
    flowtitude()
  ]
};

Configuración de Tipografía

Flowtitude ofrece múltiples opciones para personalizar la tipografía:

Opción 1: Variables CSS Personalizables (Recomendada)

// tailwind.config.js
import flowtitude from 'tailwindcss-flowtitude';

export default {
  theme: {
    extend: {
      // Fuentes personalizadas
      fontFamily: {
        'display': ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
        'body': ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
      },
      // Pesos de fuente
      fontWeight: {
        'bold': '700',
        'normal': '400',
      },
      // Tamaños de texto personalizados
      fontSize: {
        'xs': '0.75rem',
        'sm': '0.875rem',
        'base': '1rem',
        'lg': '1.125rem',
        'xl': '1.25rem',
        '2xl': '1.5rem',
        '3xl': '1.875rem',
        '4xl': '2.25rem',
        '5xl': '3rem',
      },
      // Line heights personalizados
      lineHeight: {
        'none': '1',
        'tight': '1.25',
        'snug': '1.375',
        'normal': '1.5',
        'relaxed': '1.625',
      },
      // Letter spacing personalizado
      letterSpacing: {
        'tight': '-0.025em',
        'normal': '0em',
      },
    },
  },
  plugins: [flowtitude()],
};

Opción 2: Configuración Directa en el Plugin

// tailwind.config.js
import flowtitude from 'tailwindcss-flowtitude';

export default {
  plugins: [
    flowtitude({
      typography: {
        fontDisplay: 'Inter, ui-sans-serif, system-ui, sans-serif',
        fontBody: 'Inter, ui-sans-serif, system-ui, sans-serif',
        fontWeightBold: '700',
        fontWeightNormal: '400',
        trackingTight: '-0.025em',
        trackingNormal: '0em',
        // Tamaños de texto
        textXs: '0.75rem',
        textSm: '0.875rem',
        textBase: '1rem',
        textLg: '1.125rem',
        textXl: '1.25rem',
        text2xl: '1.5rem',
        text3xl: '1.875rem',
        text4xl: '2.25rem',
        text5xl: '3rem',
        // Line heights
        leadingNone: '1',
        leadingTight: '1.25',
        leadingSnug: '1.375',
        leadingNormal: '1.5',
        leadingRelaxed: '1.625',
      }
    })
  ],
};

Opción 3: CSS Personalizado

/* En tu archivo CSS principal */
:root {
  --ft-font-display: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --ft-font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --ft-font-weight-bold: 800;
  --ft-font-weight-normal: 400;
  --ft-text-5xl: 4rem;
  --ft-leading-tight: 1.2;
  --ft-tracking-tight: -0.05em;
}

Componentes de Tipografía Disponibles

<!-- Clases de Display -->
<h1 class="display-lg">Display Grande</h1>
<h1 class="display">Display Medio</h1>
<h1 class="display-sm">Display Pequeño</h1>

<!-- Clases de Heading -->
<h2 class="heading-lg">Heading Grande</h2>
<h2 class="heading">Heading Medio</h2>
<h2 class="heading-sm">Heading Pequeño</h2>

<!-- Clases de Subheading -->
<h3 class="subheading-lg">Subheading Grande</h3>
<h3 class="subheading">Subheading Medio</h3>
<h3 class="subheading-sm">Subheading Pequeño</h3>

<!-- Clases de Texto -->
<p class="text-large">Texto Grande</p>
<p class="text-medium">Texto Medio</p>
<p class="text-small">Texto Pequeño</p>

Importación Directa del CSS

/* En tu archivo CSS principal */
@import 'tailwindcss-flowtitude/dist/flowtitude.css';

Uso en CDN

<link href="https://unpkg.com/tailwindcss-flowtitude@latest/dist/flowtitude.css" rel="stylesheet">

Características

Base

• Base CSS: Estilos base del sistema
• Tipografía: Sistema de tipografía consistente y personalizable
• Animaciones: Animaciones base del sistema

Tema

• Flowtitude: Variables CSS y configuración del tema

Layouts

• Section: Componentes de sección
• Content Grid: Sistema de grid avanzado
• Content Flex: Utilidades flexbox

Componentes

• Botones: Sistema de botones
• Badges: Etiquetas y badges
• Cards: Componentes de tarjeta
• Acordeón: Componentes colapsables
• Slide: Componentes de deslizamiento
• Tipografía: Componentes de texto con clases predefinidas

Utilidades

• Core: Utilidades principales
• Grid: Utilidades de grid
• Animaciones: Utilidades de animación con delays, duraciones y modos

Estructura del Plugin

tailwindcss-flowtitude/
├── index.js          # Plugin principal
├── build.js          # Script de build
├── dist/             # Archivos generados
│   ├── flowtitude.css
│   └── flowtitude.min.css
├── base/             # Estilos base
├── theme/            # Configuración del tema
├── layouts/          # Componentes de layout
├── components/       # Componentes reutilizables
├── utility/          # Utilidades CSS
├── docs/             # Documentación
└── examples/         # Ejemplos de uso

Documentación

• Configuración de Tipografía - Guía completa para personalizar la tipografía
• Ejemplos de Configuración - Diferentes configuraciones de ejemplo

Desarrollo

Instalar dependencias

npm install

Construir

npm run build

Publicar

npm publish

Compatibilidad

• Tailwind CSS 4.x
• Navegadores modernos (ES2015+)
• Node.js 16+

Licencia

MIT