Documentation

Everything you need to know about using TonuComponent

Theming Guide

Customizing Colors

All TonuComponent components use Tailwind CSS classes, making customization easy.

Method 1: Tailwind Config

Extend your Tailwind config to customize colors:

js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          100: '#dbeafe',
          // ... your custom colors
        },
      },
    },
  },
}

Method 2: CSS Variables

Define CSS variables for consistent theming:

css
:root {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --color-accent: #ec4899;
}

.dark {
  --color-primary: #60a5fa;
  --color-secondary: #a78bfa;
  --color-accent: #f472b6;
}

Then use them in Tailwind:

js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        secondary: 'var(--color-secondary)',
        accent: 'var(--color-accent)',
      },
    },
  },
}

Typography

Customize fonts in your Tailwind config:

js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        mono: ['Fira Code', 'monospace'],
      },
    },
  },
}

Spacing & Sizing

Adjust default spacing to match your design system:

js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
    },
  },
}