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.
| 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 |
PWA Kit (Chakra):
Storefront Next (Tailwind):
PWA Kit (Chakra):
Storefront Next (Tailwind):
PWA Kit (Chakra):
Storefront Next (Tailwind):
- 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).
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-basedsm:b md:c. - Component Props to Classes: Replace Chakra style props with Tailwind utility classes.
- Layer Styles: Convert layer styles to Tailwind
@applydirectives or component classes. - Multi-part Components: Replace
useMultiStyleConfigwith 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 modifiershover:,active:.