MetaMask / MetaMask/metamask-design-system

Improve Tailwind IntelliSense for React Native Development

Open
#737 0 comments 0 reactions 1 assignee Claimed by @georgewrmarshall View on GitHub
team-design-system
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.