Sebastian Krüger
ea06e2e9d3
Convert from Tailwind CSS 3 style to Tailwind CSS 4 native approach: - Install @tailwindcss/postcss plugin - Create postcss.config.mjs with Tailwind PostCSS plugin - Migrate all custom theme colors to globals.css using @theme directive - Remove tailwind.config.ts (no longer needed in Tailwind CSS 4) - Update globals.css from @import style to native CSS with custom properties Custom theme includes: - 23 category-specific colors as CSS custom properties - --color-category-* naming convention for all unit types - Follows Tailwind CSS 4 best practices with @theme block Benefits: - Native CSS features, no JS config needed - Better performance with PostCSS plugin - Cleaner separation of concerns - Follows Tailwind CSS 4 migration guide 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
30 lines
998 B
CSS
30 lines
998 B
CSS
@import "tailwindcss";
|
|
|
|
/* Custom theme for all 23 measurement categories */
|
|
@theme {
|
|
/* Category colors for unit types */
|
|
--color-category-angle: #0ea5e9;
|
|
--color-category-apparent-power: #8b5cf6;
|
|
--color-category-area: #f59e0b;
|
|
--color-category-current: #f59e0b;
|
|
--color-category-digital: #06b6d4;
|
|
--color-category-each: #64748b;
|
|
--color-category-energy: #eab308;
|
|
--color-category-frequency: #a855f7;
|
|
--color-category-illuminance: #84cc16;
|
|
--color-category-length: #3b82f6;
|
|
--color-category-mass: #10b981;
|
|
--color-category-pace: #14b8a6;
|
|
--color-category-parts-per: #ec4899;
|
|
--color-category-power: #f43f5e;
|
|
--color-category-pressure: #6366f1;
|
|
--color-category-reactive-energy: #d946ef;
|
|
--color-category-reactive-power: #e879f9;
|
|
--color-category-speed: #10b981;
|
|
--color-category-temperature: #ef4444;
|
|
--color-category-time: #7c3aed;
|
|
--color-category-voltage: #fb923c;
|
|
--color-category-volume: #8b5cf6;
|
|
--color-category-volume-flow-rate: #22d3ee;
|
|
}
|