Component System

Two complementary strategies: utility classes for simplicity, smart components for power

Component Strategies

Utility-First Pattern

Button, Avatar, Badge

Predefined patterns like vwfcolor-sky with filterClassName

Best for consistency

filterClassName Only

Card, Input, Modal

Flexibility with smart conflict resolution with filterClassName

Best for flexibility

Utility-First Examples

Buttons with utility classes:

Avatars with utility classes:

Badges with utility classes:

ActiveNewPendingFeatured

Strategy Comparison

Aspect	Utility-First	filterClassName
Code Size	~150 lines	~50 lines
Consistency	High	Developer dependent
Flexibility	Good (with overrides)	Infinite
Learning Curve	Utility patterns	Just Tailwind
Best For	Buttons, Badges, Avatars	Cards, Layouts, Inputs

CSS Architecture

vw-theme.css

Theme variables & design tokens

vw-utilities.css

Dynamic @utility classes

vw-base.css

Base styles & resets

Import Flow

// main.css - Import only!
@import './vw-theme.css';    // Theme first
@import './vw-utilities.css'; // Utilities second
@import './vw-base.css';      // Base last

This separation enables theme switching without touching component code

Theme System

sunrise

#ff6b6b

sky

#4ecdc4

earth

#45b7d1

sunset

#ffa07a

How Theme Switching Works

// Just swap vw-theme.css file
@import './themes/vw-theme-default.css';
@import './vw-utilities.css';
@import './vw-base.css';

// All components automatically use new colors!

Key Takeaways

Two Strategies by Design

Utility-first for consistency, filterClassName for flexibility

50-70% Less Code

Utility classes move logic from JS to CSS

Smart Conflict Resolution

filterClassName removes conflicting Tailwind classes

Theme Switching Ready

Swap themes by changing one import

Tailwind 4.1 @utility

Dynamic, composable utility classes

Performance First

CSS handles styling, JS handles logic

Continue Learning

Explore more framework features