Improve Tailwind IntelliSense for React Native Development

[georgewrmarshall]

Description

The current Tailwind IntelliSense configuration for React Native development is using the incorrect preset, leading to inaccurate autocomplete suggestions and a poor developer experience. The tailwind-intellisense.config.js file currently uses @metamask/design-system-tailwind-preset, but for React Native development with twrnc, it should be configured to understand the classnames generated from @metamask/design-system-twrnc-preset.

This mismatch means developers working on React Native components get incorrect or missing IntelliSense suggestions for design system classes, making development slower and more error-prone.

Technical Details

• Current Issue: apps/storybook-react-native/tailwind-intellisense.config.js uses @metamask/design-system-tailwind-preset
• Root Cause: The tailwind preset generates CSS-based utilities, while the twrnc preset generates React Native-compatible classnames with different structures
• Key Differences:
  • Tailwind preset uses CSS variables (e.g., var(--color-background-default))
  • Twrnc preset uses direct color values and React Native-specific configurations
  • Typography handling differs between web Tailwind and React Native twrnc
• Files to investigate/modify:
  • apps/storybook-react-native/tailwind-intellisense.config.js
  • packages/design-system-twrnc-preset/src/tailwind.config.ts
  • Potentially create a new IntelliSense-specific configuration

Acceptance Criteria

• IntelliSense provides accurate autocomplete suggestions for twrnc-based classnames in React Native development
• Color classnames (e.g., bg-default, text-primary-default) show correct suggestions
• Typography classnames (e.g., text-body-md, font-default-medium) are properly recognized
• Shadow and other design system utilities work with IntelliSense
• Configuration doesn't break existing web Tailwind IntelliSense functionality
• Documentation is updated to explain the difference between web and React Native IntelliSense configurations

References

• Current config: apps/storybook-react-native/tailwind-intellisense.config.js
• Tailwind preset: packages/design-system-tailwind-preset/
• Twrnc preset: packages/design-system-twrnc-preset/
• Twrnc preset config generator: packages/design-system-twrnc-preset/src/tailwind.config.ts
• Tailwind CSS IntelliSense Extension Documentation
• twrnc Documentation