first setup

.prettierrc

@@ -1,4 +1,5 @@
 {
   "singleQuote": true,
-  "endOfLine": "auto"
+  "endOfLine": "auto",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

apps/mobile/app/(tabs)/_layout.tsx

@@ -1,7 +1,7 @@
 import { Tabs } from 'expo-router';
 
-import Colors from '../../constants/Colors';
 import TabBarIcon from '../../components/TabBarIcon';
+import Colors from '../../constants/Colors.js';
 import { globalStyles } from '../../styles/global';
 
 export default function TabLayout() {
@@ -12,9 +12,9 @@ export default function TabLayout() {
       }}
       screenOptions={{
         headerShown: false,
-        tabBarActiveTintColor: Colors.dark.purple100,
+        tabBarActiveTintColor: Colors.purple[100],
         tabBarStyle: {
-          backgroundColor: Colors.dark.shade700,
+          backgroundColor: Colors.shade[700],
           borderTopColor: 'transparent',
           borderTopRightRadius: 20,
           borderTopLeftRadius: 20,
@@ -65,7 +65,7 @@ export default function TabLayout() {
               style={{
                 position: 'relative',
                 top: -1,
-                backgroundColor: Colors.dark.purple400,
+                backgroundColor: Colors.purple[400],
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',

apps/mobile/app/(tabs)/about.tsx

@@ -1,8 +1,5 @@
-import { StyleSheet } from 'react-native';
+import ScreenLayout from '../../components/layout/ScreenLayout';
-
+import { RegularText } from '../../components/ui/Text';
-import ScreenLayout from '../../components/layout/screenLayout';
-import { globalStyles } from '../../styles/global';
-import { RegularText } from '../../components/Styled';
 
 export default function AboutScreen() {
   return (
@@ -10,27 +7,10 @@ export default function AboutScreen() {
       title="About"
       subtitle="What is movie-web and how content is served?"
     >
-      <RegularText style={globalStyles.textWhite}>
+      <RegularText className="text-white">
         No content is served from movie-web directly and movie web does not host
         anything.
       </RegularText>
     </ScreenLayout>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-  separator: {
-    marginVertical: 30,
-    height: 1,
-    width: '80%',
-  },
-});

apps/mobile/app/(tabs)/account.tsx

@@ -1,8 +1,5 @@
-import { StyleSheet, Text } from 'react-native';
+import ScreenLayout from '../../components/layout/ScreenLayout';
-
+import { RegularText } from '../../components/ui/Text';
-import { globalStyles } from '../../styles/global';
-import ScreenLayout from '../../components/layout/screenLayout';
-import { RegularText } from '../../components/Styled';
 
 export default function AccountScreen() {
   return (
@@ -10,7 +7,7 @@ export default function AccountScreen() {
       title="Account"
       subtitle="Manage your movie web account from here"
     >
-      <RegularText style={globalStyles.textWhite}>
+      <RegularText className="text-white">
         Hey Bro! what are you up to?
       </RegularText>
     </ScreenLayout>

apps/mobile/app/(tabs)/index.tsx

@@ -1,11 +1,10 @@
-import { RegularText } from '../../components/Styled';
+import ScreenLayout from '../../components/layout/ScreenLayout';
-import ScreenLayout from '../../components/layout/screenLayout';
+import { RegularText } from '../../components/ui/Text';
-import { globalStyles } from '../../styles/global';
 
 export default function HomeScreen() {
   return (
     <ScreenLayout title="Home" subtitle="This is where all magic happens">
-      <RegularText style={globalStyles.textWhite}>
+      <RegularText className="text-white">
         Movies will be listed here
       </RegularText>
     </ScreenLayout>

apps/mobile/app/(tabs)/search/Searchbar.tsx

@@ -1,10 +1,11 @@
 import { FontAwesome5 } from '@expo/vector-icons';
+import { useFocusEffect } from 'expo-router';
 import { useCallback, useRef, useState } from 'react';
 import { View } from 'react-native';
 import { TextInput } from 'react-native-gesture-handler';
+
+import Colors from '../../../constants/Colors.js';
 import { globalStyles } from '../../../styles/global';
-import Colors from '../../../constants/Colors';
-import { useFocusEffect } from 'expo-router';
 
 export default function Searchbar() {
   const [keyword, setKeyword] = useState('');
@@ -24,41 +25,19 @@ export default function Searchbar() {
   );
 
   return (
-    <View
+    <View className="mb-6 mt-4 flex-row items-center rounded-full border">
-      style={{
+      <View className="ml-1 w-12 items-center justify-center">
-        ...globalStyles.flexRow,
+        <FontAwesome5 name="search" size={18} color={Colors.shade[200]} />
-        ...globalStyles.itemsCenter,
-        ...globalStyles.border,
-        ...globalStyles.roundedFull,
-        marginTop: 14,
-        marginBottom: 24,
-      }}
-    >
-      <View
-        style={{
-          ...globalStyles.justifyCenter,
-          ...globalStyles.itemsCenter,
-          width: 48,
-          marginLeft: 4,
-        }}
-      >
-        <FontAwesome5 name="search" size={18} color={Colors.dark.shade200} />
       </View>
       <TextInput
         value={keyword}
-        autoFocus={true}
+        autoFocus
         onChangeText={(text) => setKeyword(text)}
         ref={inputRef}
         placeholder="What are you looking for?"
-        placeholderTextColor={Colors.dark.shade200}
+        placeholderTextColor={Colors.shade[200]}
-        style={[
+        className="rounded-3xl py-3 pr-5 text-white"
-          globalStyles.input,
+      />
-          globalStyles.fOpenSansRegular,
-          {
-            width: '100%',
-          },
-        ]}
-      ></TextInput>
     </View>
   );
 }

apps/mobile/app/(tabs)/search/_layout.tsx

@@ -1,37 +1,37 @@
-import { Dimensions, ScrollView, View } from 'react-native';
-
-import { globalStyles } from '../../../styles/global';
-import ScreenLayout from '../../../components/layout/screenLayout';
-import { TextInput } from 'react-native-gesture-handler';
-import styles from './styles';
-import { useCallback, useEffect, useRef, useState } from 'react';
 import { useFocusEffect } from 'expo-router';
-import { BoldText } from '../../../components/Styled';
+import { useCallback, useEffect, useRef, useState } from 'react';
-import Item from '../../../components/item/item';
+import { Dimensions, ScrollView, View } from 'react-native';
+import { TextInput } from 'react-native-gesture-handler';
+
 import Searchbar from './Searchbar';
+import styles from './styles';
+import Item from '../../../components/item/item';
+import ScreenLayout from '../../../components/layout/ScreenLayout';
+import { BoldText } from '../../../components/ui/Text';
+import { globalStyles } from '../../../styles/global';
 
 export default function SearchScreen() {
   return (
     <ScrollView>
       <ScreenLayout
         title={
-          <View
+          <View className="flex-row items-center">
-            style={{ ...globalStyles.flexRow, ...globalStyles.itemsCenter }}
+            <BoldText className="text-2xl font-bold text-white">
-          >
+              Search
-            <BoldText style={globalStyles.sectionTitle}>Search</BoldText>
+            </BoldText>
           </View>
         }
         subtitle="Looking for something?"
       >
         <Searchbar />
-        <View style={styles.items}>
+        <View className="flex w-full flex-1 flex-row flex-wrap justify-start">
-          <View style={styles.itemOuter}>
+          <View className="basis-1/2 px-3 pb-3">
             <Item />
           </View>
-          <View style={styles.itemOuter}>
+          <View className="basis-1/2 px-3 pb-3">
             <Item />
           </View>
-          <View style={styles.itemOuter}>
+          <View className="basis-1/2 px-3 pb-3">
             <Item />
           </View>
         </View>

apps/mobile/app/(tabs)/settings.tsx

@@ -1,12 +1,10 @@
-import { RegularText } from '../../components/Styled';
+import ScreenLayout from '../../components/layout/ScreenLayout';
-import ScreenLayout from '../../components/layout/screenLayout';
+import { RegularText } from '../../components/ui/Text';
-import { globalStyles } from '../../styles/global';
-import { StyleSheet, Text } from 'react-native';
 
 export default function SettingsScreen() {
   return (
     <ScreenLayout title="Settings" subtitle="Need to change something?">
-      <RegularText style={globalStyles.textWhite}>
+      <RegularText className="text-white">
         Settings would be listed in here. Coming soon
       </RegularText>
     </ScreenLayout>

apps/mobile/app/[...missing].tsx

@@ -1,41 +1,23 @@
 import { Link, Stack } from 'expo-router';
-import { StyleSheet, View } from 'react-native';
+import { View } from 'react-native';
-import { BoldText, RegularText } from '../components/Styled';
+
+import { BoldText, RegularText } from '../components/ui/Text';
 
 export default function NotFoundScreen() {
   return (
     <>
       <Stack.Screen options={{ title: 'Oops!' }} />
-      <View style={styles.container}>
+      <View className="flex-1 items-center justify-center p-5">
-        <BoldText style={styles.title}>
+        <BoldText className="text-lg font-bold">
           This screen doesn&apos;t exist.
         </BoldText>
 
-        <Link href="/" style={styles.link}>
+        <Link href="/" className="mt-4 py-4">
-          <RegularText style={styles.linkText}>Go to home screen!</RegularText>
+          <RegularText className="text-sm text-sky-500">
+            Go to home screen!
+          </RegularText>
         </Link>
       </View>
     </>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 20,
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-  link: {
-    marginTop: 15,
-    paddingVertical: 15,
-  },
-  linkText: {
-    fontSize: 14,
-    color: '#2e78b7',
-  },
-});

apps/mobile/app/_layout.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable global-require */
 import FontAwesome from '@expo/vector-icons/FontAwesome';
 import {
   DarkTheme,
@@ -9,7 +10,7 @@ import { SplashScreen, Stack } from 'expo-router';
 import { useEffect } from 'react';
 import { useColorScheme } from 'react-native';
 
-import Colors from '../constants/Colors';
+import Colors from '../constants/Colors.js';
 
 export {
   // Catch any errors thrown by the Layout component.
@@ -27,7 +28,6 @@ SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout() {
   const [loaded, error] = useFonts({
-    // eslint-disable-next-line global-require
     OpenSansRegular: require('../assets/fonts/OpenSans-Regular.ttf'),
     OpenSansLight: require('../assets/fonts/OpenSans-Light.ttf'),
     OpenSansMedium: require('../assets/fonts/OpenSans-Medium.ttf'),
@@ -65,12 +65,11 @@ function RootLayoutNav() {
           gestureEnabled: true,
           headerShown: false,
           contentStyle: {
-            backgroundColor: Colors.dark.shade900,
+            backgroundColor: Colors.shade[900],
           },
         }}
       >
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
       </Stack>
     </ThemeProvider>
   );

apps/mobile/app/modal.tsx

@@ -1,33 +0,0 @@
-import { StatusBar } from 'expo-status-bar';
-import { Platform, StyleSheet, View } from 'react-native';
-import { BoldText, RegularText } from '../components/Styled';
-
-export default function ModalScreen() {
-  return (
-    <View style={styles.container}>
-      <BoldText style={styles.title}>Modal</BoldText>
-      <View style={styles.separator} />
-      <RegularText>Modal?!</RegularText>
-
-      {/* Use a light status bar on iOS to account for the black space above the modal */}
-      <StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-  separator: {
-    marginVertical: 30,
-    height: 1,
-    width: '80%',
-  },
-});

apps/mobile/babel.config.js

@@ -2,9 +2,10 @@ module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
-	plugins: [
+    plugins: [
-		// Required for expo-router
+      // Required for expo-router
-		'expo-router/babel',
+      'expo-router/babel',
-	  ],
+      'nativewind/babel',
+    ],
   };
 };

apps/mobile/components/ExternalLink.tsx

@@ -13,7 +13,6 @@ export function ExternalLink(
         target: '_blank',
       }}
       {...props}
-      // @ts-expect-error: External URLs are not typed.
       href={props.href}
       onPress={(e) => {
         if (Platform.OS !== 'web') {

apps/mobile/components/TabBarIcon.tsx

@@ -1,5 +1,6 @@
 import { FontAwesome } from '@expo/vector-icons';
-import Colors from '../constants/Colors';
+
+import Colors from '../constants/Colors.js';
 
 type Props = {
   focused?: boolean;
@@ -7,13 +8,13 @@ type Props = {
 } & React.ComponentProps<typeof FontAwesome>;
 
 export default function TabBarIcon({
-  color = Colors.dark.shade300,
+  color = Colors.shade[300],
   focused,
   ...rest
 }: Props) {
   return (
     <FontAwesome
-      color={color || (focused ? Colors.dark.purple300 : Colors.dark.shade300)}
+      color={color || (focused ? Colors.purple[300] : Colors.shade[300])}
       size={24}
       {...rest}
     />

apps/mobile/components/item/item.tsx

@@ -1,30 +1,25 @@
-import { globalStyles } from '../../styles/global';
+import { Image, View } from 'react-native';
-import { Image, Text, View } from 'react-native';
+
-import styles from './styles';
-import { BoldText, RegularText } from '../Styled';
 import { TMDB_POSTER_PATH } from '../../constants/General';
+import { BoldText, RegularText } from '../ui/Text';
 
 export default function Item() {
   return (
-    <View style={styles.wrapper}>
+    <View className="w-full">
-      <View style={styles.imageWrapper}>
+      <View className="mb-2 aspect-[9/14] w-full overflow-hidden rounded-2xl">
         <Image
           source={{
             uri: `${TMDB_POSTER_PATH}/w342//gdIrmf2DdY5mgN6ycVP0XlzKzbE.jpg`,
             width: 200,
           }}
-          style={styles.image}
+          className="h-full w-full object-cover"
         />
       </View>
-      <BoldText style={globalStyles.textWhite}>Hamilton</BoldText>
+      <BoldText className="text-white">Hamilton</BoldText>
-      <View style={styles.meta}>
+      <View className="flex-row items-center gap-3">
-        <RegularText style={[globalStyles.textMuted, styles.smallText]}>
+        <RegularText className="text-xs text-gray-600">Movie</RegularText>
-          Movie
+        <View className="h-1 w-1 rounded-3xl bg-gray-600" />
-        </RegularText>
+        <RegularText className="text-sm text-gray-600">2023</RegularText>
-        <View style={[globalStyles.dotSeperator]}></View>
-        <RegularText style={[globalStyles.textMuted, styles.smallText]}>
-          2023
-        </RegularText>
       </View>
     </View>
   );

apps/mobile/components/item/styles.tsx

@@ -1,31 +0,0 @@
-import Colors from '../../constants/Colors';
-import { StyleSheet } from 'react-native';
-
-const styles = StyleSheet.create({
-  wrapper: {
-    width: '100%',
-  },
-  imageWrapper: {
-    borderRadius: 16,
-    aspectRatio: 9 / 14,
-    width: '100%',
-    overflow: 'hidden',
-    position: 'relative',
-    marginBottom: 6,
-  },
-  image: {
-    width: '100%',
-    height: '100%',
-    resizeMode: 'cover',
-  },
-  meta: {
-    flexDirection: 'row',
-    gap: 6,
-    alignItems: 'center',
-  },
-  smallText: {
-    fontSize: 12,
-  },
-});
-
-export default styles;

apps/mobile/components/layout/screenLayout.tsx

@@ -1,7 +1,6 @@
 import { View } from 'react-native';
-import { globalStyles } from '../../styles/global';
+
-import { styles } from './styles';
+import { BoldText, RegularText } from '../ui/Text';
-import { BoldText, RegularText } from '../Styled';
 
 type Props = {
   title?: React.ReactNode | string;
@@ -11,21 +10,15 @@ type Props = {
 
 export default function ScreenLayout({ title, subtitle, children }: Props) {
   return (
-    <View
+    <View className="bg-shade-900 flex-1 py-12">
-      style={[
-        globalStyles.pageContainer,
-        globalStyles.container,
-        styles.container,
-      ]}
-    >
       {typeof title === 'string' && (
-        <BoldText style={globalStyles.sectionTitle}>{title}</BoldText>
+        <BoldText className="text-2xl font-bold text-white">{title}</BoldText>
       )}
       {typeof title !== 'string' && title}
-      <RegularText style={[{ marginTop: 4 }, globalStyles.sectionSubtitle]}>
+      <RegularText className="text-shade-200 mt-1 text-sm">
         {subtitle}
       </RegularText>
-      <View style={styles.children}>{children}</View>
+      <View className="py-3">{children}</View>
     </View>
   );
 }

apps/mobile/components/ui/Text.tsx

@@ -1,44 +1,44 @@
 import { Text } from 'react-native';
 
-export const RegularText = ({ style, children, ...rest }: Text['props']) => {
+export function RegularText({ style, children, ...rest }: Text['props']) {
   return (
     <Text style={[{ fontFamily: 'OpenSansRegular' }, style]} {...rest}>
       {children}
     </Text>
   );
-};
+}
-export const BoldText = ({ style, children, ...rest }: Text['props']) => {
+export function BoldText({ style, children, ...rest }: Text['props']) {
   return (
     <Text style={[{ fontFamily: 'OpenSansBold' }, style]} {...rest}>
       {children}
     </Text>
   );
-};
+}
-export const SemiBoldText = ({ style, children, ...rest }: Text['props']) => {
+export function SemiBoldText({ style, children, ...rest }: Text['props']) {
   return (
     <Text style={[{ fontFamily: 'OpenSansSemiBold' }, style]} {...rest}>
       {children}
     </Text>
   );
-};
+}
-export const MediumText = ({ style, children, ...rest }: Text['props']) => {
+export function MediumText({ style, children, ...rest }: Text['props']) {
   return (
     <Text style={[{ fontFamily: 'OpenSansMedium' }, style]} {...rest}>
       {children}
     </Text>
   );
-};
+}
-export const ExtraBoldText = ({ style, children, ...rest }: Text['props']) => {
+export function ExtraBoldText({ style, children, ...rest }: Text['props']) {
   return (
     <Text style={[{ fontFamily: 'OpenSansExtraBold' }, style]} {...rest}>
       {children}
     </Text>
   );
-};
+}
-export const LightText = ({ style, children, ...rest }: Text['props']) => {
+export function LightText({ style, children, ...rest }: Text['props']) {
   return (
     <Text style={[{ fontFamily: 'OpenSansLight' }, style]} {...rest}>
       {children}
     </Text>
   );
-};
+}

apps/mobile/constants/Colors.ts

@@ -1,27 +1,42 @@
 const tintColorLight = '#2f95dc';
 const tintColorDark = '#fff';
 
+// export default {
+//   light: {
+//     text: '#000',
+//     background: '#fff',
+//     tint: tintColorLight,
+//     tabIconDefault: '#ccc',
+//     tabIconSelected: tintColorLight,
+//   },
+//   dark: {
+//     text: '#fff',
+//     background: '#000',
+//     tint: tintColorDark,
+//     tabIconDefault: '#ccc',
+//     tabIconSelected: tintColorDark,
+//     purple100: '#C082FF',
+//     purple300: '#8D44D6',
+//     purple400: '#7831BF',
+//     shade50: '#676790',
+//     shade200: '#3F3F60',
+//     shade300: '#32324F',
+//     shade700: '#131322',
+//     shade900: '#0A0A12',
+//   },
+// };
+
 export default {
-  light: {
+  purple: {
-    text: '#000',
+    100: '#C082FF',
-    background: '#fff',
+    300: '#8D44D6',
-    tint: tintColorLight,
+    400: '#7831BF',
-    tabIconDefault: '#ccc',
-    tabIconSelected: tintColorLight,
   },
-  dark: {
+  shade: {
-    text: '#fff',
+    50: '#676790',
-    background: '#000',
+    200: '#3F3F60',
-    tint: tintColorDark,
+    300: '#32324F',
-    tabIconDefault: '#ccc',
+    700: '#131322',
-    tabIconSelected: tintColorDark,
+    900: '#0A0A12',
-    purple100: '#C082FF',
-    purple300: '#8D44D6',
-    purple400: '#7831BF',
-    shade50: '#676790',
-    shade200: '#3F3F60',
-    shade300: '#32324F',
-    shade700: '#131322',
-    shade900: '#0A0A12',
   },
 };

apps/mobile/package.json

@@ -12,8 +12,13 @@
     "@expo/vector-icons": "^13.0.0",
     "@nx/expo": "*",
     "@react-navigation/native": "^6.1.9",
+    "@rnx-kit/metro-config": "*",
+    "@rnx-kit/metro-resolver-symlinks": "*",
     "@testing-library/jest-native": "*",
     "@testing-library/react-native": "*",
+    "@types/react": "*",
+    "eslint-plugin-react": "*",
+    "eslint-plugin-react-hooks": "*",
     "expo": "*",
     "expo-font": "^11.4.0",
     "expo-linking": "^5.0.2",
@@ -22,7 +27,10 @@
     "expo-status-bar": "*",
     "expo-system-ui": "^2.6.0",
     "expo-web-browser": "^12.5.0",
+    "jest": "*",
+    "jest-expo": "*",
     "metro-config": "*",
+    "nativewind": "^2.0.11",
     "pod-install": "*",
     "react": "*",
     "react-dom": "18.2.0",
@@ -33,15 +41,9 @@
     "react-native-svg": "*",
     "react-native-svg-transformer": "*",
     "react-native-web": "^0.19.10",
-    "@rnx-kit/metro-config": "*",
-    "@rnx-kit/metro-resolver-symlinks": "*",
-    "@types/react": "*",
-    "eslint-plugin-react": "*",
-    "eslint-plugin-react-hooks": "*",
-    "jest": "*",
-    "jest-expo": "*",
     "react-test-renderer": "*",
-    "typescript": "*"
+    "typescript": "*",
+    "tailwindcss": "*"
   },
   "scripts": {
     "eas-build-pre-install": "cd ../../ && node tools/scripts/eas-build-pre-install.mjs . apps/mobile && cp pnpm-lock.yaml apps/mobile",
@@ -63,6 +65,7 @@
     "jest-expo": "~49.0.0",
     "pod-install": "^0.1.39",
     "react-test-renderer": "18.2.0",
+    "tailwindcss": "^3.4.1",
     "typescript": "~5.2.2"
   },
   "overrides": {

apps/mobile/styles/global.tsx

@@ -1,50 +1,6 @@
 import { StyleSheet } from 'react-native';
-import Colors from '../constants/Colors';
 
 export const globalStyles = StyleSheet.create({
-  pageContainer: {
-    flex: 1,
-    backgroundColor: Colors.dark.shade900,
-    paddingVertical: 48,
-  },
-  container: {
-    padding: 24,
-  },
-  sectionTitle: {
-    color: '#FFF',
-    letterSpacing: -1.5,
-    fontWeight: 'bold',
-    fontSize: 28,
-  },
-  sectionSubtitle: {
-    color: Colors.dark.shade200,
-    fontSize: 14,
-  },
-  textWhite: {
-    color: '#FFF',
-  },
-  flexRow: {
-    flexDirection: 'row',
-  },
-  itemsCenter: {
-    alignItems: 'center',
-  },
-  justifyCenter: {
-    justifyContent: 'center',
-  },
-  input: {
-    borderRadius: 24,
-    paddingRight: 18,
-    paddingVertical: 12,
-    color: '#FFF',
-  },
-  border: {
-    borderWidth: 1,
-    borderColor: 'rgba(255,255,255,.1)',
-  },
-  roundedFull: {
-    borderRadius: 34,
-  },
   fOpenSansLight: {
     fontFamily: 'OpenSansLight',
   },
@@ -63,13 +19,4 @@ export const globalStyles = StyleSheet.create({
   fOpenSansRegular: {
     fontFamily: 'OpenSansRegular',
   },
-  textMuted: {
-    color: '#5F5F7A',
-  },
-  dotSeperator: {
-    width: 4,
-    height: 4,
-    backgroundColor: '#5F5F7A',
-    borderRadius: 50,
-  },
 });

apps/mobile/tailwind.config.ts

@@ -0,0 +1,13 @@
+import type { Config } from 'tailwindcss';
+
+import colors from './constants/Colors';
+
+export default {
+  content: [],
+  theme: {
+    extend: {
+      colors,
+    },
+  },
+  plugins: [],
+} satisfies Config;

apps/mobile/tsconfig.app.json

@@ -1,6 +1,7 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
+    "composite": true,
     "outDir": "../../dist/out-tsc",
     "types": ["node"]
   },
@@ -11,5 +12,5 @@
     "**/*.spec.tsx",
     "test-setup.ts"
   ],
-  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"]
+  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "constants/Colors.ts", "tailwind.config.mjs"]
 }

apps/mobile/tsconfig.spec.json

@@ -1,6 +1,7 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
+    "composite": true,
     "outDir": "../../dist/out-tsc",
     "module": "commonjs",
     "types": ["jest", "node"]

pnpm-lock.yaml

@@ -156,6 +156,9 @@ importers:
       prettier:
         specifier: ^3.0.3
         version: 3.2.4
+      prettier-plugin-tailwindcss:
+        specifier: ^0.5.11
+        version: 0.5.11(prettier@3.2.4)
       react-test-renderer:
         specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
@@ -240,6 +243,9 @@ importers:
       metro-config:
         specifier: '*'
         version: 0.80.4
+      nativewind:
+        specifier: ^2.0.11
+        version: 2.0.11(react@18.2.0)(tailwindcss@3.4.1)
       pod-install:
         specifier: '*'
         version: 0.2.0
@@ -276,6 +282,10 @@ importers:
       typescript:
         specifier: '*'
         version: 5.2.2
+    devDependencies:
+      tailwindcss:
+        specifier: ^3.4.1
+        version: 3.4.1(ts-node@10.9.1)
 
 packages:
 
@@ -296,6 +306,10 @@ packages:
   /@adobe/css-tools@4.3.2:
     resolution: {integrity: sha512-DA5a1C0gD/pLOvhv33YMrbf2FK3oUzwNl9oOJqE4XVjuEtt6XIakRcsd7eLiOSPkp1kTRQGICTA8cKra/vFbjw==}
 
+  /@alloc/quick-lru@5.2.0:
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
   /@ampproject/remapping@2.2.1:
     resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==}
     engines: {node: '>=6.0.0'}
@@ -457,6 +471,13 @@ packages:
     dependencies:
       '@babel/types': 7.23.6
 
+  /@babel/helper-module-imports@7.18.6:
+    resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.23.6
+    dev: false
+
   /@babel/helper-module-imports@7.22.15:
     resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==}
     engines: {node: '>=6.9.0'}
@@ -1703,6 +1724,15 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /@babel/types@7.19.0:
+    resolution: {integrity: sha512-YuGopBq3ke25BVSiS6fgF49Ul9gH1x70Bcr6bqRLjWCkcX8Hre1/5+z+IiWOIerRMSSEfGZVB9z9kyq7wVs9YA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.23.4
+      '@babel/helper-validator-identifier': 7.22.20
+      to-fast-properties: 2.0.0
+    dev: false
+
   /@babel/types@7.23.6:
     resolution: {integrity: sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==}
     engines: {node: '>=6.9.0'}
@@ -2001,7 +2031,7 @@ packages:
       getenv: 1.0.0
       glob: 7.1.6
       resolve-from: 5.0.0
-      semver: 7.5.3
+      semver: 7.5.4
       slash: 3.0.0
       slugify: 1.6.6
       xcode: 3.0.1
@@ -5690,6 +5720,10 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
+  /camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
+
   /camelcase@5.3.1:
     resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
     engines: {node: '>=6'}
@@ -5698,6 +5732,10 @@ packages:
     resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
     engines: {node: '>=10'}
 
+  /camelize@1.0.1:
+    resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
+    dev: false
+
   /caniuse-api@3.0.0:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
     dependencies:
@@ -6156,6 +6194,11 @@ packages:
     resolution: {integrity: sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==}
     engines: {node: '>=8'}
 
+  /css-color-keywords@1.0.0:
+    resolution: {integrity: sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==}
+    engines: {node: '>=4'}
+    dev: false
+
   /css-declaration-sorter@7.1.1(postcss@8.4.33):
     resolution: {integrity: sha512-dZ3bVTEEc1vxr3Bek9vGwfB5Z6ESPULhcRvO472mfjVnj8jRcTnKO8/JTczlvxM10Myb+wBM++1MtdO76eWcaQ==}
     engines: {node: ^14 || ^16 || >=18}
@@ -6186,6 +6229,10 @@ packages:
       semver: 7.5.4
       webpack: 5.89.0(@swc/core@1.3.105)
 
+  /css-mediaquery@0.1.2:
+    resolution: {integrity: sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==}
+    dev: false
+
   /css-minimizer-webpack-plugin@5.0.1(webpack@5.89.0):
     resolution: {integrity: sha512-3caImjKFQkS+ws1TGcFn0V1HyDJFq1Euy589JlD6/3rV2kj+w7r5G9WDMgSHvpvXHNZ2calVypZWuEDQd9wfLg==}
     engines: {node: '>= 14.15.0'}
@@ -6228,6 +6275,14 @@ packages:
       domutils: 3.1.0
       nth-check: 2.1.1
 
+  /css-to-react-native@3.2.0:
+    resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==}
+    dependencies:
+      camelize: 1.0.1
+      css-color-keywords: 1.0.0
+      postcss-value-parser: 4.2.0
+    dev: false
+
   /css-tree@1.1.3:
     resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==}
     engines: {node: '>=8.0.0'}
@@ -6592,6 +6647,9 @@ packages:
     dependencies:
       streamsearch: 1.1.0
 
+  /didyoumean@1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+
   /diff-sequences@29.6.3:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -6606,6 +6664,9 @@ packages:
     dependencies:
       path-type: 4.0.0
 
+  /dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+
   /dns-packet@5.6.1:
     resolution: {integrity: sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==}
     engines: {node: '>=6'}
@@ -7681,6 +7742,10 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /extend@3.0.2:
+    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+    dev: false
+
   /fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -9481,6 +9546,10 @@ packages:
   /jimp-compact@0.16.1:
     resolution: {integrity: sha512-dZ6Ra7u1G8c4Letq/B5EzAxj4tLFHL+cGtdpR+PVm4yzPDj+lCk+AbivWt1eOM+ikzkowtyV7qSqX6qr3t71Ww==}
 
+  /jiti@1.21.0:
+    resolution: {integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==}
+    hasBin: true
+
   /jks-js@1.1.0:
     resolution: {integrity: sha512-irWi8S2V029Vic63w0/TYa8NIZwXu9oeMtHQsX51JDIVBo0lrEaOoyM8ALEEh5PVKD6TrA26FixQK6TzT7dHqA==}
     dependencies:
@@ -9856,6 +9925,10 @@ packages:
       lightningcss-linux-x64-musl: 1.19.0
       lightningcss-win32-x64-msvc: 1.19.0
 
+  /lilconfig@2.1.0:
+    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
+    engines: {node: '>=10'}
+
   /lilconfig@3.0.0:
     resolution: {integrity: sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==}
     engines: {node: '>=14'}
@@ -10776,6 +10849,30 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  /nativewind@2.0.11(react@18.2.0)(tailwindcss@3.4.1):
+    resolution: {integrity: sha512-qCEXUwKW21RYJ33KRAJl3zXq2bCq82WoI564fI21D/TiqhfmstZOqPN53RF8qK1NDK6PGl56b2xaTxgObEePEg==}
+    engines: {node: '>=14.18'}
+    peerDependencies:
+      tailwindcss: ~3
+    dependencies:
+      '@babel/generator': 7.23.6
+      '@babel/helper-module-imports': 7.18.6
+      '@babel/types': 7.19.0
+      css-mediaquery: 0.1.2
+      css-to-react-native: 3.2.0
+      micromatch: 4.0.5
+      postcss: 8.4.33
+      postcss-calc: 8.2.4(postcss@8.4.33)
+      postcss-color-functional-notation: 4.2.4(postcss@8.4.33)
+      postcss-css-variables: 0.18.0(postcss@8.4.33)
+      postcss-nested: 5.0.6(postcss@8.4.33)
+      react-is: 18.2.0
+      tailwindcss: 3.4.1(ts-node@10.9.1)
+      use-sync-external-store: 1.2.0(react@18.2.0)
+    transitivePeerDependencies:
+      - react
+    dev: false
+
   /natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
@@ -11019,6 +11116,10 @@ packages:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
 
+  /object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}
+
   /object-inspect@1.13.1:
     resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
 
@@ -11444,6 +11545,16 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /postcss-calc@8.2.4(postcss@8.4.33):
+    resolution: {integrity: sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==}
+    peerDependencies:
+      postcss: ^8.2.2
+    dependencies:
+      postcss: 8.4.33
+      postcss-selector-parser: 6.0.15
+      postcss-value-parser: 4.2.0
+    dev: false
+
   /postcss-calc@9.0.1(postcss@8.4.33):
     resolution: {integrity: sha512-TipgjGyzP5QzEhsOZUaIkeO5mKeMFpebWzRogWG/ysonUlnHcq5aJe0jOjpfzUU8PeSaBQnrE8ehR0QA5vs8PQ==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -11454,6 +11565,16 @@ packages:
       postcss-selector-parser: 6.0.15
       postcss-value-parser: 4.2.0
 
+  /postcss-color-functional-notation@4.2.4(postcss@8.4.33):
+    resolution: {integrity: sha512-2yrTAUZUab9s6CpxkxC4rVgFEVaR6/2Pipvi6qcgvnYiVqZcbDHEoBDhrXzyb7Efh2CCfHQNtcqWcIruDTIUeg==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.2
+    dependencies:
+      postcss: 8.4.33
+      postcss-value-parser: 4.2.0
+    dev: false
+
   /postcss-colormin@6.0.2(postcss@8.4.33):
     resolution: {integrity: sha512-TXKOxs9LWcdYo5cgmcSHPkyrLAh86hX1ijmyy6J8SbOhyv6ua053M3ZAM/0j44UsnQNIWdl8gb5L7xX2htKeLw==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -11476,6 +11597,17 @@ packages:
       postcss: 8.4.33
       postcss-value-parser: 4.2.0
 
+  /postcss-css-variables@0.18.0(postcss@8.4.33):
+    resolution: {integrity: sha512-lYS802gHbzn1GI+lXvy9MYIYDuGnl1WB4FTKoqMQqJ3Mab09A7a/1wZvGTkCEZJTM8mSbIyb1mJYn8f0aPye0Q==}
+    peerDependencies:
+      postcss: ^8.2.6
+    dependencies:
+      balanced-match: 1.0.2
+      escape-string-regexp: 1.0.5
+      extend: 3.0.2
+      postcss: 8.4.33
+    dev: false
+
   /postcss-discard-comments@6.0.1(postcss@8.4.33):
     resolution: {integrity: sha512-f1KYNPtqYLUeZGCHQPKzzFtsHaRuECe6jLakf/RjSRqvF5XHLZnM2+fXLhb8Qh/HBFHs3M4cSLb1k3B899RYIg==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -11519,6 +11651,43 @@ packages:
       read-cache: 1.0.0
       resolve: 1.22.8
 
+  /postcss-import@15.1.0(postcss@8.4.33):
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      postcss: 8.4.33
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.8
+
+  /postcss-js@4.0.1(postcss@8.4.33):
+    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.4.33
+
+  /postcss-load-config@4.0.2(postcss@8.4.33)(ts-node@10.9.1):
+    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+    dependencies:
+      lilconfig: 3.0.0
+      postcss: 8.4.33
+      ts-node: 10.9.1(@swc/core@1.3.105)(@types/node@18.16.9)(typescript@5.2.2)
+      yaml: 2.3.4
+
   /postcss-loader@6.2.1(postcss@8.4.33)(webpack@5.89.0):
     resolution: {integrity: sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==}
     engines: {node: '>= 12.13.0'}
@@ -11631,6 +11800,25 @@ packages:
       icss-utils: 5.1.0(postcss@8.4.33)
       postcss: 8.4.33
 
+  /postcss-nested@5.0.6(postcss@8.4.33):
+    resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+    dependencies:
+      postcss: 8.4.33
+      postcss-selector-parser: 6.0.15
+    dev: false
+
+  /postcss-nested@6.0.1(postcss@8.4.33):
+    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+    dependencies:
+      postcss: 8.4.33
+      postcss-selector-parser: 6.0.15
+
   /postcss-normalize-charset@6.0.1(postcss@8.4.33):
     resolution: {integrity: sha512-aW5LbMNRZ+oDV57PF9K+WI1Z8MPnF+A8qbajg/T8PP126YrGX1f9IQx21GI2OlGz7XFJi/fNi0GTbY948XJtXg==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -11794,6 +11982,58 @@ packages:
       fast-diff: 1.3.0
     dev: true
 
+  /prettier-plugin-tailwindcss@0.5.11(prettier@3.2.4):
+    resolution: {integrity: sha512-AvI/DNyMctyyxGOjyePgi/gqj5hJYClZ1avtQvLlqMT3uDZkRbi4HhGUpok3DRzv9z7Lti85Kdj3s3/1CeNI0w==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+      prettier-plugin-twig-melody: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+      prettier-plugin-twig-melody:
+        optional: true
+    dependencies:
+      prettier: 3.2.4
+    dev: true
+
   /prettier@3.2.4:
     resolution: {integrity: sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ==}
     engines: {node: '>=14'}
@@ -13249,6 +13489,36 @@ packages:
       tslib: 2.6.2
     dev: true
 
+  /tailwindcss@3.4.1(ts-node@10.9.1):
+    resolution: {integrity: sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.5.3
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.2
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.21.0
+      lilconfig: 2.1.0
+      micromatch: 4.0.5
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.0.0
+      postcss: 8.4.33
+      postcss-import: 15.1.0(postcss@8.4.33)
+      postcss-js: 4.0.1(postcss@8.4.33)
+      postcss-load-config: 4.0.2(postcss@8.4.33)(ts-node@10.9.1)
+      postcss-nested: 6.0.1(postcss@8.4.33)
+      postcss-selector-parser: 6.0.15
+      resolve: 1.22.8
+      sucrase: 3.35.0
+    transitivePeerDependencies:
+      - ts-node
+
   /tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}