Dynamic UI Component Demo
This demo showcases a reactive color generator with live CSS variable updates. Interact with the controls below to see how values cascade across the interface.
#4F46E5
Tip: This demo uses CSS variables and Tailwind's JIT mode to show real-time updates. Try resizing your browser to see responsive behavior!
CSS Pattern
CSS
/styles/variable.css
:root {
--main-color: #4F46E5;
--muted-color: #94A3B8;
}
body {
color: var(--muted-color);
background-color: var(--main-color);
}
Tailwind Configuration
JavaScript
/tailwindcss.js
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class',
theme: {
extend: {
colors: {
'main': 'var(--main-color)',
'muted': 'var(--muted-color)'
}
}
}
}