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

Styling Declaration Comparison

Responsive Container

PWA Kit (Chakra):

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

Storefront Next (Tailwind):

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

Button Variants

PWA Kit (Chakra):

<Button variant="solid" colorScheme="blue" size="md">
    Primary
</Button>
<Button variant="outline" colorScheme="black">
    Secondary
</Button>

Storefront Next (Tailwind):

<Button variant="default" size="default">
    Primary
</Button>
<Button variant="outline">
    Secondary
</Button>

Conditional Visibility

PWA Kit (Chakra):

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

Storefront Next (Tailwind):

<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:.