Tailwind v4 Custom Colors Demo
Custom Color: Ooga
Background Ooga
Using bg-ooga class
Text & Border Ooga
Using text-ooga and border-ooga classes
Gradient with Ooga
Gradient from ooga to booga-500
Custom Color Palette: Booga (100-900)
Booga 100
bg-booga-100
Booga 200
bg-booga-200
Booga 300
bg-booga-300
Booga 400
bg-booga-400
Booga 500
bg-booga-500
Booga 600
bg-booga-600
Booga 700
bg-booga-700
Booga 800
bg-booga-800
Booga 900
bg-booga-900
Cool Tailwind v4 Features
Animations & Transitions
Pulsing Element
Bouncing Element
Advanced Layouts
Col Span 2
Normal
Normal
Flex 1
Flex 2
Flex 1
Shadows & Effects
Colored Shadow
Using shadow-ooga/50
Gradient Background
With backdrop blur
Dashed Border
Hover for solid border
Typography Showcase
Extra Small Text (text-xs)
Small Text (text-sm)
Base Text (text-base)
Large Text (text-lg)
Extra Large Text (text-xl)
2XL Light Text
3XL Gradient Text
Form Elements
Interactive Cards
Hover Reveal Card
Hover to see gradient overlay
Lift on Hover
This card lifts up on hover
Border Animation
Border appears on hover
Dark Mode Support
This section adapts to dark mode! The custom colors work seamlessly with Tailwind's dark mode utilities.
Changes in dark mode
Adaptive colors