MetaMask / MetaMask/metamask-design-system
Improve Tailwind IntelliSense for React Native Development
- Dominant language
- TypeScript
- Stars
- 37
- Forks
- 14
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 60
Description
### **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](https://github.com/tailwindlabs/tailwindcss-intellisense)
- [twrnc Documentation](https://github.com/jaredh159/tailwind-react-native-classnames)
Contributor guide
Assessment
This issue has not been assessed yet.