Tailwind CSS Configuration

This guide explains how Tailwind CSS is configured in LamaPress and how to customize it.

Table of Contents

• Overview
• Configuration File
  • Content Paths
  • Safelist
  • Theme Configuration
• Custom Plugins
  • Typography Plugin
  • Grid Plugin
  • Spacing Plugin
  • Colors Plugin
• Customizing Tailwind
  • Adding Colors
  • Extending Typography
  • Custom Utilities
• Best Practices
  • 1. Use Design System
  • 2. Avoid Overriding
  • 3. Use Safelist
• Related Documentation

---

Overview

LamaPress uses Tailwind CSS v3 with custom plugins for typography, grid, spacing, and colors. The configuration is in tailwind.config.js and uses custom plugins from the tailwind/ directory.

Configuration File

The main configuration is in tailwind.config.js:

export default {
  mode: 'jit',
  content: [
    './functions/**/*.php',
    './src/**/*.js',
    './components/**/*.{php,js}',
    './woocommerce/**/*.php',
    './404.php',
    './archive.php',
    './page.php',
    './index.php',
    './single.php',
  ],
  safelist: [...themeSafelist, ...typographySafelist],
  theme: {
    // ... theme configuration
  },
  plugins: [llTypography, llGrid, llSpacing, llColors],
}

Content Paths

Tailwind scans these paths for class names:

• PHP files in functions/, components/, and root
• JavaScript files in src/
• WooCommerce templates (if used)

Safelist

Dynamic classes are safelisted to ensure they're generated:

• Theme classes: ll-theme-{theme-name}
• Typography classes: ll-{category}-{size}

Theme Configuration

The theme extends Tailwind defaults with:

• Custom breakpoints (including negative breakpoints)
• Custom spacing system
• Custom grid system
• Custom typography system
• Custom color system

Custom Plugins

Typography Plugin

Location: tailwind/typography.js

Generates typography classes (ll-{category}-{size}) from tailwind/config/typography.js.

See Typography System for details.

Grid Plugin

Location: tailwind/grid.js

Generates:

• .ll-grid class for grid layouts
• Grid column utilities (col-start-{n}, col-span-{n})
• Grid-based width utilities

See Grid System for details.

Spacing Plugin

Location: tailwind/spacing.js

Generates:

• Responsive spacing utilities
• Grid-based spacing utilities
• Custom spacing variables

See Spacing System for details.

Colors Plugin

Location: tailwind/colors.js

Generates:

• Theme-based color classes
• CSS custom properties for colors
• Color utilities

See Color System for details.

Customizing Tailwind

Adding Colors

Edit tailwind/config/colors.js:

export const colors = {
  black: '#000000',
  white: '#FFFFFF',
  grayDark: '#3C3C3C',
  grayLight: '#DEDEDE',
  // Add your colors
  brand: '#FF5733',
}

Then use in themes:

export const themes = {
  light: {
    bg: {
      primary: colors.white,
      brand: colors.brand,
    },
    // ...
  },
}

Extending Typography

Edit tailwind/config/typography.js:

export const typography = {
  display: {
    global: {
      fontFamily: 'sans',
      fontWeight: 300,
    },
    '2xl': {
      fontSize: [40, 96],
    },
    // Add new sizes
    '3xl': {
      fontSize: [48, 120],
    },
  },
  // ...
}

Custom Utilities

Add custom utilities in tailwind.config.js:

export default {
  // ...
  theme: {
    extend: {
      // Add custom utilities
      spacing: {
        'custom': '2rem',
      },
    },
  },
}

Best Practices

1. Use Design System

Prefer design system utilities over custom classes:

• Use ll-{category}-{size} for typography
• Use ll-grid for layouts
• Use theme colors via CSS variables

2. Avoid Overriding

Avoid overriding Tailwind defaults unless necessary:

• Extend instead of replacing
• Use design system values
• Keep customizations minimal

3. Use Safelist

Safelist dynamic classes that might not be detected:

• Theme classes
• Typography classes
• Dynamically generated classes

Related Documentation

• Typography System - Typography usage
• Color System - Color system
• Grid System - Grid system
• Spacing System - Spacing system
• Styling Overview - Styling approach

---

Next Steps:

• Review Typography System for typography usage
• Check Color System for color management
• See Grid System for layout utilities