Styling Differences with PWA Kit

PWA Kit styling is largely Chakra CSS-in-JS with prop-based responsive and variant systems. Storefront Next styling centers on Tailwind utility classes, CSS variables, and class-variant composition. The migration is primarily a syntax and architecture shift from style props/theme objects to utility classes and typed variant helpers.

Key Differences

Aspect	PWA Kit (Chakra)	Storefront Next (Tailwind/shadcn)
Approach	CSS-in-JS with JavaScript objects	Utility-first CSS with class strings
Theme Location	`app/theme/` directory	`src/app.css` CSS variables
Component Styling	`useMultiStyleConfig` hook	`cva()` + `cn()` utilities
Design Tokens	JavaScript objects (colors.js, space.js)	CSS custom properties (–primary, –background)
Variants	Props-based (`colorScheme`, `variant`)	Class-based via CVA
Responsive	Array syntax `[base, sm, md, lg]`	Prefix syntax `sm:` `md:` `lg:`
Runtime	Generates styles at run time	Pre-compiled utilities
Dark Mode	Theme color mode provider	CSS variables + `dark:` prefix
Bundle	Includes Chakra UI runtime	Zero runtime (utility classes)
Type Safety	PropTypes	Full TypeScript with `VariantProps`

Styling Declaration Comparison

Responsive Container

PWA Kit (Chakra):

1<Box px={[4, 4, 6, 6, 8]} maxWidth="container.xxxl" marginX="auto">
2  {children}
3</Box>

Storefront Next (Tailwind):

1<div className="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">{children}</div>

Button Variants

PWA Kit (Chakra):

1<Button variant="solid" colorScheme="blue" size="md">
2    Primary
3</Button>
4<Button variant="outline" colorScheme="black">
5    Secondary
6</Button>

Storefront Next (Tailwind):

1<Button variant="default" size="default">
2    Primary
3</Button>
4<Button variant="outline">
5    Secondary
6</Button>

Conditional Visibility

PWA Kit (Chakra):

1<Box display={["none", "none", "none", "block"]}>Desktop only content</Box>

Storefront Next (Tailwind):

1<div className="hidden lg:block">Desktop only content</div>

Key Similarities

Component-based architecture: Both use composable UI components.
Design token systems: Both define colors, spacing, and other tokens centrally.
Variant support: Both support multiple variants and sizes for components.
Responsive design: Both provide breakpoint-based responsive utilities.
Dark mode: Both support light and dark theme switching.
Accessibility: Both use accessible UI primitives (Chakra built-in, Radix UI in shadcn).

Storefront Conversion Considerations

Keep these considerations in mind when converting a storefront from PWA Kit to Storefront Next.

Theme Conversion: Convert JavaScript theme tokens to CSS custom properties.
Responsive Syntax: Convert array-based responsive values [a, b, c] to prefix-based sm:b md:c.
Component Props to Classes: Replace Chakra style props with Tailwind utility classes.
Layer Styles: Convert layer styles to Tailwind @apply directives or component classes.
Multi-part Components: Replace useMultiStyleConfig with compound component patterns.
Variant Logic: Use CVA for variant management instead of Chakra’s variant system.
Pseudo-selectors: Convert _hover, _active, and so on to Tailwind modifiers hover:, active:.