Create tailwind-preset Package in MetaMask Design System Monorepo for Centralized Tailwind Configurations

[brianacnguyen]

Description:

This ticket proposes creating a tailwind-preset package within the MetaMask Design System monorepo. The purpose of this package is to centralize all Tailwind CSS-related configurations, making them reusable across the React and React Native packages. This will ensure consistent styling, theming, and token usage throughout the design system.

Requirements:

• Create a new package within the MetaMask Design System monorepo named tailwind-preset.
• Consolidate all Tailwind configurations into this package.
• Update both React and React Native packages to consume this new tailwind-preset package for their Tailwind configurations.
• Ensure compatibility between web (React) and mobile (React Native) environments, using appropriate Tailwind configurations for each.
• Test and validate the configurations to ensure they work seamlessly with both the web and mobile components.

Acceptance Criteria:

• A new tailwind-preset package is created and includes all relevant Tailwind configurations for colors, spacing, typography, and theming.
• Both React and React Native packages are successfully integrated with the tailwind-preset package.
• Styling consistency is maintained across web and mobile platforms using the centralized configuration.

[georgewrmarshall]

Colors, spacing and typography can be in different tickets if the work becomes large for each category and we want to break down the work