Layout Usage

Layout variables are defined in the base CSS file, then extended in the Tailwind Config file, allowing these variables to be referenced consistently via Tailwind’s utility classes.

Define CSS Variables: Define layout variables (e.g., button padding and border radius) in your base CSS file to establish consistency in spacing, alignment, and rounding across elements. In this example, we set variables for button padding and border radius:

// base.css
@layer base {
  :root {
    --rounded-btn: 0.375rem;
    --btn-base: 0.5rem 1rem;
    --btn-sm: 0 0.5rem;
    --btn-lg: 0 2rem;
  }
}

Reference in Tailwind Config: Extend Tailwind's layout utilities by adding custom mappings in tailwind.config.js under theme.extend:

// tailwind.config.js
theme: {
  extend: {
    padding: {
      'btn-sm': 'var(--padding-btn-sm, 0 0.5rem)',
      'btn-base': 'var(--padding-btn-base, 0.5rem 1rem)',
      'btn-lg': 'var(--padding-btn-lg, 0 2rem)',
    },
    borderRadius: {
      'btn': 'var(--rounded-btn, 0.375rem)',
    },
  },
}

Button Padding and Size Relationship

The Button component uses size variants to control both height and padding, ensuring that the visual proportions of each button size remain consistent. By tying padding to size, each button size (sm, default, lg) has a distinct height and padding setting, providing a balanced and cohesive look.

For instance:

<Button /> Applies h-10 p-btn-base, providing a standard height and padding for regular use.

<Button size="sm" /> Applies h-9 p-btn-sm, which gives it a smaller height and padding.

<Button size="lg" /> Applies h-11 p-btn-lg, resulting in a taller button with increased padding.

This approach makes it easy to adjust the button sizes consistently across the application by modifying these CSS variables, allowing centralized control over the design.