Sharp Ireland Color System
Current theme: dark
Tailwind CSS Examples (Light Mode)
This component demonstrates the unified Tailwind CSS system with various implementation approaches.
Method 1: Using Utility Classes
This approach uses predefined Tailwind utility classes for consistent styling.
Method 2: Using Custom Component Classes
This approach uses @apply directives in globals.css for reusable components.
Method 3: Using Tailwind Directly
This approach uses Tailwind classes defined in tailwind.config.js.
Primary Color
Accent Color
Background Color
Quick Color Reference
Primary
bg-primary-100bg-primary-200bg-primary-300Accent
bg-accent-greenbg-accent-redText
text-blacktext-gray-600Background
bg-whitebg-gray-100bg-gray-200Sharp Ireland Color Scheme (Light Mode)
This component demonstrates unified light-mode color system.
Primary Colors
Primary 100
bg-primary-100Primary 200
bg-primary-200Primary 300
bg-primary-300Accent Colors
Accent 100
bg-accent-greenAccent 200
var(--primary-300)Accent Colors
Accent 100
var(--accent-100)Accent 200
var(--accent-200)Text Colors
Primary text using text-black
Secondary text using text-gray-600
Background Colors
BG 100
bg-whiteBG 200
bg-gray-100BG 300
bg-gray-200Usage Examples
Action Button
Information Alert
This alert uses primary-300 as background and primary-100 as accent.