[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6CBZVCNHVJGG9CYM3VGQ2JD":3,"skill-same:01M6CBZVCNHVJGG9CYM3VGQ2JD":61},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":34,"linkOnly":35,"markdownContent":36,"markdownBody":37,"frontMatter":38,"refName":40,"commitSha":41,"skillDirectory":42,"forksCount":14,"repositoryHtmlUrl":43,"repositoryHomepageUrl":6,"ownerHtmlUrl":44,"ownerBlogUrl":45,"ownerDescription":6,"updatedAt":46,"install":47,"resources":60},"01M6CBZVCNHVJGG9CYM3VGQ2JD","expo-tailwind-setup",null,"Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling","epiphanyapps\u002Fmapyourhealth","epiphanyapps","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F7298208?v=4","01M6CBX8TV8415WB6ZC8SGRVKZ","Epiphany Apps LLC","01M6CBX8ZBWZX3B8YENG80VSHK",0,"MIT","https:\u002F\u002Fgithub.com\u002Fepiphanyapps\u002Fmapyourhealth\u002Fblob\u002Fmain\u002Fapps\u002Fmobile\u002F.agents\u002Fskills\u002Fexpo-tailwind-setup\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33],"setup","expo tailwind setup","Tailwind","expo","css","react","SET","up","styling","react-native","2026-11-10 10:12:30",false,"---\nname: expo-tailwind-setup\ndescription: Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling\nversion: 1.0.0\nlicense: MIT\n---\n\n# Tailwind CSS Setup for Expo with react-native-css\n\nThis guide covers setting up Tailwind CSS v4 in Expo using react-native-css and NativeWind v5 for universal styling across iOS, Android, and Web.\n\n## Overview\n\nThis setup uses:\n\n- **Tailwind CSS v4** - Modern CSS-first configuration\n- **react-native-css** - CSS runtime for React Native\n- **NativeWind v5** - Metro transformer for Tailwind in React Native\n- **@tailwindcss\u002Fpostcss** - PostCSS plugin for Tailwind v4\n\n## Installation\n\n```bash\n# Install dependencies\nnpx expo install tailwindcss@^4 nativewind@5.0.0-preview.2 react-native-css@0.0.0-nightly.5ce6396 @tailwindcss\u002Fpostcss tailwind-merge clsx\n```\n\nAdd resolutions for lightningcss compatibility:\n\n```json\n\u002F\u002F package.json\n{\n  \"resolutions\": {\n    \"lightningcss\": \"1.30.1\"\n  }\n}\n```\n\n- autoprefixer is not needed in Expo because of lightningcss\n- postcss is included in expo by default\n\n## Configuration Files\n\n### Metro Config\n\nCreate or update `metro.config.js`:\n\n```js\n\u002F\u002F metro.config.js\nconst { getDefaultConfig } = require(\"expo\u002Fmetro-config\");\nconst { withNativewind } = require(\"nativewind\u002Fmetro\");\n\n\u002F** @type {import('expo\u002Fmetro-config').MetroConfig} *\u002F\nconst config = getDefaultConfig(__dirname);\n\nmodule.exports = withNativewind(config, {\n  \u002F\u002F inline variables break PlatformColor in CSS variables\n  inlineVariables: false,\n  \u002F\u002F We add className support manually\n  globalClassNamePolyfill: false,\n});\n```\n\n### PostCSS Config\n\nCreate `postcss.config.mjs`:\n\n```js\n\u002F\u002F postcss.config.mjs\nexport default {\n  plugins: {\n    \"@tailwindcss\u002Fpostcss\": {},\n  },\n};\n```\n\n### Global CSS\n\nCreate `src\u002Fglobal.css`:\n\n```css\n@import \"tailwindcss\u002Ftheme.css\" layer(theme);\n@import \"tailwindcss\u002Fpreflight.css\" layer(base);\n@import \"tailwindcss\u002Futilities.css\";\n\n\u002F* Platform-specific font families *\u002F\n@media android {\n  :root {\n    --font-mono: monospace;\n    --font-rounded: normal;\n    --font-serif: serif;\n    --font-sans: normal;\n  }\n}\n\n@media ios {\n  :root {\n    --font-mono: ui-monospace;\n    --font-serif: ui-serif;\n    --font-sans: system-ui;\n    --font-rounded: ui-rounded;\n  }\n}\n```\n\n## IMPORTANT: No Babel Config Needed\n\nWith Tailwind v4 and NativeWind v5, you do NOT need a babel.config.js for Tailwind. Remove any NativeWind babel presets if present:\n\n```js\n\u002F\u002F DELETE babel.config.js if it only contains NativeWind config\n\u002F\u002F The following is NO LONGER needed:\n\u002F\u002F module.exports = function (api) {\n\u002F\u002F   api.cache(true);\n\u002F\u002F   return {\n\u002F\u002F     presets: [\n\u002F\u002F       [\"babel-preset-expo\", { jsxImportSource: \"nativewind\" }],\n\u002F\u002F       \"nativewind\u002Fbabel\",\n\u002F\u002F     ],\n\u002F\u002F   };\n\u002F\u002F };\n```\n\n## CSS Component Wrappers\n\nSince react-native-css requires explicit CSS element wrapping, create reusable components:\n\n### Main Components (`src\u002Ftw\u002Findex.tsx`)\n\n```tsx\nimport {\n  useCssElement,\n  useNativeVariable as useFunctionalVariable,\n} from \"react-native-css\";\n\nimport { Link as RouterLink } from \"expo-router\";\nimport Animated from \"react-native-reanimated\";\nimport React from \"react\";\nimport {\n  View as RNView,\n  Text as RNText,\n  Pressable as RNPressable,\n  ScrollView as RNScrollView,\n  TouchableHighlight as RNTouchableHighlight,\n  TextInput as RNTextInput,\n  StyleSheet,\n} from \"react-native\";\n\n\u002F\u002F CSS-enabled Link\nexport const Link = (\n  props: React.ComponentProps\u003Ctypeof RouterLink> & { className?: string }\n) => {\n  return useCssElement(RouterLink, props, { className: \"style\" });\n};\n\nLink.Trigger = RouterLink.Trigger;\nLink.Menu = RouterLink.Menu;\nLink.MenuAction = RouterLink.MenuAction;\nLink.Preview = RouterLink.Preview;\n\n\u002F\u002F CSS Variable hook\nexport const useCSSVariable =\n  process.env.EXPO_OS !== \"web\"\n    ? useFunctionalVariable\n    : (variable: string) => `var(${variable})`;\n\n\u002F\u002F View\nexport type ViewProps = React.ComponentProps\u003Ctypeof RNView> & {\n  className?: string;\n};\n\nexport const View = (props: ViewProps) => {\n  return useCssElement(RNView, props, { className: \"style\" });\n};\nView.displayName = \"CSS(View)\";\n\n\u002F\u002F Text\nexport const Text = (\n  props: React.ComponentProps\u003Ctypeof RNText> & { className?: string }\n) => {\n  return useCssElement(RNText, props, { className: \"style\" });\n};\nText.displayName = \"CSS(Text)\";\n\n\u002F\u002F ScrollView\nexport const ScrollView = (\n  props: React.ComponentProps\u003Ctypeof RNScrollView> & {\n    className?: string;\n    contentContainerClassName?: string;\n  }\n) => {\n  return useCssElement(RNScrollView, props, {\n    className: \"style\",\n    contentContainerClassName: \"contentContainerStyle\",\n  });\n};\nScrollView.displayName = \"CSS(ScrollView)\";\n\n\u002F\u002F Pressable\nexport const Pressable = (\n  props: React.ComponentProps\u003Ctypeof RNPressable> & { className?: string }\n) => {\n  return useCssElement(RNPressable, props, { className: \"style\" });\n};\nPressable.displayName = \"CSS(Pressable)\";\n\n\u002F\u002F TextInput\nexport const TextInput = (\n  props: React.ComponentProps\u003Ctypeof RNTextInput> & { className?: string }\n) => {\n  return useCssElement(RNTextInput, props, { className: \"style\" });\n};\nTextInput.displayName = \"CSS(TextInput)\";\n\n\u002F\u002F AnimatedScrollView\nexport const AnimatedScrollView = (\n  props: React.ComponentProps\u003Ctypeof Animated.ScrollView> & {\n    className?: string;\n    contentClassName?: string;\n    contentContainerClassName?: string;\n  }\n) => {\n  return useCssElement(Animated.ScrollView, props, {\n    className: \"style\",\n    contentClassName: \"contentContainerStyle\",\n    contentContainerClassName: \"contentContainerStyle\",\n  });\n};\n\n\u002F\u002F TouchableHighlight with underlayColor extraction\nfunction XXTouchableHighlight(\n  props: React.ComponentProps\u003Ctypeof RNTouchableHighlight>\n) {\n  const { underlayColor, ...style } = StyleSheet.flatten(props.style) || {};\n  return (\n    \u003CRNTouchableHighlight\n      underlayColor={underlayColor}\n      {...props}\n      style={style}\n    \u002F>\n  );\n}\n\nexport const TouchableHighlight = (\n  props: React.ComponentProps\u003Ctypeof RNTouchableHighlight>\n) => {\n  return useCssElement(XXTouchableHighlight, props, { className: \"style\" });\n};\nTouchableHighlight.displayName = \"CSS(TouchableHighlight)\";\n```\n\n### Image Component (`src\u002Ftw\u002Fimage.tsx`)\n\n```tsx\nimport { useCssElement } from \"react-native-css\";\nimport React from \"react\";\nimport { StyleSheet } from \"react-native\";\nimport Animated from \"react-native-reanimated\";\nimport { Image as RNImage } from \"expo-image\";\n\nconst AnimatedExpoImage = Animated.createAnimatedComponent(RNImage);\n\nexport type ImageProps = React.ComponentProps\u003Ctypeof Image>;\n\nfunction CSSImage(props: React.ComponentProps\u003Ctypeof AnimatedExpoImage>) {\n  \u002F\u002F @ts-expect-error: Remap objectFit style to contentFit property\n  const { objectFit, objectPosition, ...style } =\n    StyleSheet.flatten(props.style) || {};\n\n  return (\n    \u003CAnimatedExpoImage\n      contentFit={objectFit}\n      contentPosition={objectPosition}\n      {...props}\n      source={\n        typeof props.source === \"string\" ? { uri: props.source } : props.source\n      }\n      \u002F\u002F @ts-expect-error: Style is remapped above\n      style={style}\n    \u002F>\n  );\n}\n\nexport const Image = (\n  props: React.ComponentProps\u003Ctypeof CSSImage> & { className?: string }\n) => {\n  return useCssElement(CSSImage, props, { className: \"style\" });\n};\n\nImage.displayName = \"CSS(Image)\";\n```\n\n### Animated Components (`src\u002Ftw\u002Fanimated.tsx`)\n\n```tsx\nimport * as TW from \".\u002Findex\";\nimport RNAnimated from \"react-native-reanimated\";\n\nexport const Animated = {\n  ...RNAnimated,\n  View: RNAnimated.createAnimatedComponent(TW.View),\n};\n```\n\n## Usage\n\nImport CSS-wrapped components from your tw directory:\n\n```tsx\nimport { View, Text, ScrollView, Image } from \"@\u002Ftw\";\n\nexport default function MyScreen() {\n  return (\n    \u003CScrollView className=\"flex-1 bg-white\">\n      \u003CView className=\"p-4 gap-4\">\n        \u003CText className=\"text-xl font-bold text-gray-900\">Hello Tailwind!\u003C\u002FText>\n        \u003CImage\n          className=\"w-full h-48 rounded-lg object-cover\"\n          source={{ uri: \"https:\u002F\u002Fexample.com\u002Fimage.jpg\" }}\n        \u002F>\n      \u003C\u002FView>\n    \u003C\u002FScrollView>\n  );\n}\n```\n\n## Custom Theme Variables\n\nAdd custom theme variables in your global.css using `@theme`:\n\n```css\n@layer theme {\n  @theme {\n    \u002F* Custom fonts *\u002F\n    --font-rounded: \"SF Pro Rounded\", sans-serif;\n\n    \u002F* Custom line heights *\u002F\n    --text-xs--line-height: calc(1em \u002F 0.75);\n    --text-sm--line-height: calc(1.25em \u002F 0.875);\n    --text-base--line-height: calc(1.5em \u002F 1);\n\n    \u002F* Custom leading scales *\u002F\n    --leading-tight: 1.25em;\n    --leading-snug: 1.375em;\n    --leading-normal: 1.5em;\n  }\n}\n```\n\n## Platform-Specific Styles\n\nUse platform media queries for platform-specific styling:\n\n```css\n@media ios {\n  :root {\n    --font-sans: system-ui;\n    --font-rounded: ui-rounded;\n  }\n}\n\n@media android {\n  :root {\n    --font-sans: normal;\n    --font-rounded: normal;\n  }\n}\n```\n\n## Apple System Colors with CSS Variables\n\nCreate a CSS file for Apple semantic colors:\n\n```css\n\u002F* src\u002Fcss\u002Fsf.css *\u002F\n@layer base {\n  html {\n    color-scheme: light;\n  }\n}\n\n:root {\n  \u002F* Accent colors with light\u002Fdark mode *\u002F\n  --sf-blue: light-dark(rgb(0 122 255), rgb(10 132 255));\n  --sf-green: light-dark(rgb(52 199 89), rgb(48 209 89));\n  --sf-red: light-dark(rgb(255 59 48), rgb(255 69 58));\n\n  \u002F* Gray scales *\u002F\n  --sf-gray: light-dark(rgb(142 142 147), rgb(142 142 147));\n  --sf-gray-2: light-dark(rgb(174 174 178), rgb(99 99 102));\n\n  \u002F* Text colors *\u002F\n  --sf-text: light-dark(rgb(0 0 0), rgb(255 255 255));\n  --sf-text-2: light-dark(rgb(60 60 67 \u002F 0.6), rgb(235 235 245 \u002F 0.6));\n\n  \u002F* Background colors *\u002F\n  --sf-bg: light-dark(rgb(255 255 255), rgb(0 0 0));\n  --sf-bg-2: light-dark(rgb(242 242 247), rgb(28 28 30));\n}\n\n\u002F* iOS native colors via platformColor *\u002F\n@media ios {\n  :root {\n    --sf-blue: platformColor(systemBlue);\n    --sf-green: platformColor(systemGreen);\n    --sf-red: platformColor(systemRed);\n    --sf-gray: platformColor(systemGray);\n    --sf-text: platformColor(label);\n    --sf-text-2: platformColor(secondaryLabel);\n    --sf-bg: platformColor(systemBackground);\n    --sf-bg-2: platformColor(secondarySystemBackground);\n  }\n}\n\n\u002F* Register as Tailwind theme colors *\u002F\n@layer theme {\n  @theme {\n    --color-sf-blue: var(--sf-blue);\n    --color-sf-green: var(--sf-green);\n    --color-sf-red: var(--sf-red);\n    --color-sf-gray: var(--sf-gray);\n    --color-sf-text: var(--sf-text);\n    --color-sf-text-2: var(--sf-text-2);\n    --color-sf-bg: var(--sf-bg);\n    --color-sf-bg-2: var(--sf-bg-2);\n  }\n}\n```\n\nThen use in components:\n\n```tsx\n\u003CText className=\"text-sf-text\">Primary text\u003C\u002FText>\n\u003CText className=\"text-sf-text-2\">Secondary text\u003C\u002FText>\n\u003CView className=\"bg-sf-bg\">...\u003C\u002FView>\n```\n\n## Using CSS Variables in JavaScript\n\nUse the `useCSSVariable` hook:\n\n```tsx\nimport { useCSSVariable } from \"@\u002Ftw\";\n\nfunction MyComponent() {\n  const blue = useCSSVariable(\"--sf-blue\");\n\n  return \u003CView style={{ borderColor: blue }} \u002F>;\n}\n```\n\n## Key Differences from NativeWind v4 \u002F Tailwind v3\n\n1. **No babel.config.js** - Configuration is now CSS-first\n2. **PostCSS plugin** - Uses `@tailwindcss\u002Fpostcss` instead of `tailwindcss`\n3. **CSS imports** - Use `@import \"tailwindcss\u002F...\"` instead of `@tailwind` directives\n4. **Theme config** - Use `@theme` in CSS instead of `tailwind.config.js`\n5. **Component wrappers** - Must wrap components with `useCssElement` for className support\n6. **Metro config** - Use `withNativewind` with different options (`inlineVariables: false`)\n\n## Troubleshooting\n\n### Styles not applying\n\n1. Ensure you have the CSS file imported in your app entry\n2. Check that components are wrapped with `useCssElement`\n3. Verify Metro config has `withNativewind` applied\n\n### Platform colors not working\n\n1. Use `platformColor()` in `@media ios` blocks\n2. Fall back to `light-dark()` for web\u002FAndroid\n\n### TypeScript errors\n\nAdd className to component props:\n\n```tsx\ntype Props = React.ComponentProps\u003Ctypeof RNView> & { className?: string };\n```\n","# Tailwind CSS Setup for Expo with react-native-css\n\nThis guide covers setting up Tailwind CSS v4 in Expo using react-native-css and NativeWind v5 for universal styling across iOS, Android, and Web.\n\n## Overview\n\nThis setup uses:\n\n- **Tailwind CSS v4** - Modern CSS-first configuration\n- **react-native-css** - CSS runtime for React Native\n- **NativeWind v5** - Metro transformer for Tailwind in React Native\n- **@tailwindcss\u002Fpostcss** - PostCSS plugin for Tailwind v4\n\n## Installation\n\n```bash\n# Install dependencies\nnpx expo install tailwindcss@^4 nativewind@5.0.0-preview.2 react-native-css@0.0.0-nightly.5ce6396 @tailwindcss\u002Fpostcss tailwind-merge clsx\n```\n\nAdd resolutions for lightningcss compatibility:\n\n```json\n\u002F\u002F package.json\n{\n  \"resolutions\": {\n    \"lightningcss\": \"1.30.1\"\n  }\n}\n```\n\n- autoprefixer is not needed in Expo because of lightningcss\n- postcss is included in expo by default\n\n## Configuration Files\n\n### Metro Config\n\nCreate or update `metro.config.js`:\n\n```js\n\u002F\u002F metro.config.js\nconst { getDefaultConfig } = require(\"expo\u002Fmetro-config\");\nconst { withNativewind } = require(\"nativewind\u002Fmetro\");\n\n\u002F** @type {import('expo\u002Fmetro-config').MetroConfig} *\u002F\nconst config = getDefaultConfig(__dirname);\n\nmodule.exports = withNativewind(config, {\n  \u002F\u002F inline variables break PlatformColor in CSS variables\n  inlineVariables: false,\n  \u002F\u002F We add className support manually\n  globalClassNamePolyfill: false,\n});\n```\n\n### PostCSS Config\n\nCreate `postcss.config.mjs`:\n\n```js\n\u002F\u002F postcss.config.mjs\nexport default {\n  plugins: {\n    \"@tailwindcss\u002Fpostcss\": {},\n  },\n};\n```\n\n### Global CSS\n\nCreate `src\u002Fglobal.css`:\n\n```css\n@import \"tailwindcss\u002Ftheme.css\" layer(theme);\n@import \"tailwindcss\u002Fpreflight.css\" layer(base);\n@import \"tailwindcss\u002Futilities.css\";\n\n\u002F* Platform-specific font families *\u002F\n@media android {\n  :root {\n    --font-mono: monospace;\n    --font-rounded: normal;\n    --font-serif: serif;\n    --font-sans: normal;\n  }\n}\n\n@media ios {\n  :root {\n    --font-mono: ui-monospace;\n    --font-serif: ui-serif;\n    --font-sans: system-ui;\n    --font-rounded: ui-rounded;\n  }\n}\n```\n\n## IMPORTANT: No Babel Config Needed\n\nWith Tailwind v4 and NativeWind v5, you do NOT need a babel.config.js for Tailwind. Remove any NativeWind babel presets if present:\n\n```js\n\u002F\u002F DELETE babel.config.js if it only contains NativeWind config\n\u002F\u002F The following is NO LONGER needed:\n\u002F\u002F module.exports = function (api) {\n\u002F\u002F   api.cache(true);\n\u002F\u002F   return {\n\u002F\u002F     presets: [\n\u002F\u002F       [\"babel-preset-expo\", { jsxImportSource: \"nativewind\" }],\n\u002F\u002F       \"nativewind\u002Fbabel\",\n\u002F\u002F     ],\n\u002F\u002F   };\n\u002F\u002F };\n```\n\n## CSS Component Wrappers\n\nSince react-native-css requires explicit CSS element wrapping, create reusable components:\n\n### Main Components (`src\u002Ftw\u002Findex.tsx`)\n\n```tsx\nimport {\n  useCssElement,\n  useNativeVariable as useFunctionalVariable,\n} from \"react-native-css\";\n\nimport { Link as RouterLink } from \"expo-router\";\nimport Animated from \"react-native-reanimated\";\nimport React from \"react\";\nimport {\n  View as RNView,\n  Text as RNText,\n  Pressable as RNPressable,\n  ScrollView as RNScrollView,\n  TouchableHighlight as RNTouchableHighlight,\n  TextInput as RNTextInput,\n  StyleSheet,\n} from \"react-native\";\n\n\u002F\u002F CSS-enabled Link\nexport const Link = (\n  props: React.ComponentProps\u003Ctypeof RouterLink> & { className?: string }\n) => {\n  return useCssElement(RouterLink, props, { className: \"style\" });\n};\n\nLink.Trigger = RouterLink.Trigger;\nLink.Menu = RouterLink.Menu;\nLink.MenuAction = RouterLink.MenuAction;\nLink.Preview = RouterLink.Preview;\n\n\u002F\u002F CSS Variable hook\nexport const useCSSVariable =\n  process.env.EXPO_OS !== \"web\"\n    ? useFunctionalVariable\n    : (variable: string) => `var(${variable})`;\n\n\u002F\u002F View\nexport type ViewProps = React.ComponentProps\u003Ctypeof RNView> & {\n  className?: string;\n};\n\nexport const View = (props: ViewProps) => {\n  return useCssElement(RNView, props, { className: \"style\" });\n};\nView.displayName = \"CSS(View)\";\n\n\u002F\u002F Text\nexport const Text = (\n  props: React.ComponentProps\u003Ctypeof RNText> & { className?: string }\n) => {\n  return useCssElement(RNText, props, { className: \"style\" });\n};\nText.displayName = \"CSS(Text)\";\n\n\u002F\u002F ScrollView\nexport const ScrollView = (\n  props: React.ComponentProps\u003Ctypeof RNScrollView> & {\n    className?: string;\n    contentContainerClassName?: string;\n  }\n) => {\n  return useCssElement(RNScrollView, props, {\n    className: \"style\",\n    contentContainerClassName: \"contentContainerStyle\",\n  });\n};\nScrollView.displayName = \"CSS(ScrollView)\";\n\n\u002F\u002F Pressable\nexport const Pressable = (\n  props: React.ComponentProps\u003Ctypeof RNPressable> & { className?: string }\n) => {\n  return useCssElement(RNPressable, props, { className: \"style\" });\n};\nPressable.displayName = \"CSS(Pressable)\";\n\n\u002F\u002F TextInput\nexport const TextInput = (\n  props: React.ComponentProps\u003Ctypeof RNTextInput> & { className?: string }\n) => {\n  return useCssElement(RNTextInput, props, { className: \"style\" });\n};\nTextInput.displayName = \"CSS(TextInput)\";\n\n\u002F\u002F AnimatedScrollView\nexport const AnimatedScrollView = (\n  props: React.ComponentProps\u003Ctypeof Animated.ScrollView> & {\n    className?: string;\n    contentClassName?: string;\n    contentContainerClassName?: string;\n  }\n) => {\n  return useCssElement(Animated.ScrollView, props, {\n    className: \"style\",\n    contentClassName: \"contentContainerStyle\",\n    contentContainerClassName: \"contentContainerStyle\",\n  });\n};\n\n\u002F\u002F TouchableHighlight with underlayColor extraction\nfunction XXTouchableHighlight(\n  props: React.ComponentProps\u003Ctypeof RNTouchableHighlight>\n) {\n  const { underlayColor, ...style } = StyleSheet.flatten(props.style) || {};\n  return (\n    \u003CRNTouchableHighlight\n      underlayColor={underlayColor}\n      {...props}\n      style={style}\n    \u002F>\n  );\n}\n\nexport const TouchableHighlight = (\n  props: React.ComponentProps\u003Ctypeof RNTouchableHighlight>\n) => {\n  return useCssElement(XXTouchableHighlight, props, { className: \"style\" });\n};\nTouchableHighlight.displayName = \"CSS(TouchableHighlight)\";\n```\n\n### Image Component (`src\u002Ftw\u002Fimage.tsx`)\n\n```tsx\nimport { useCssElement } from \"react-native-css\";\nimport React from \"react\";\nimport { StyleSheet } from \"react-native\";\nimport Animated from \"react-native-reanimated\";\nimport { Image as RNImage } from \"expo-image\";\n\nconst AnimatedExpoImage = Animated.createAnimatedComponent(RNImage);\n\nexport type ImageProps = React.ComponentProps\u003Ctypeof Image>;\n\nfunction CSSImage(props: React.ComponentProps\u003Ctypeof AnimatedExpoImage>) {\n  \u002F\u002F @ts-expect-error: Remap objectFit style to contentFit property\n  const { objectFit, objectPosition, ...style } =\n    StyleSheet.flatten(props.style) || {};\n\n  return (\n    \u003CAnimatedExpoImage\n      contentFit={objectFit}\n      contentPosition={objectPosition}\n      {...props}\n      source={\n        typeof props.source === \"string\" ? { uri: props.source } : props.source\n      }\n      \u002F\u002F @ts-expect-error: Style is remapped above\n      style={style}\n    \u002F>\n  );\n}\n\nexport const Image = (\n  props: React.ComponentProps\u003Ctypeof CSSImage> & { className?: string }\n) => {\n  return useCssElement(CSSImage, props, { className: \"style\" });\n};\n\nImage.displayName = \"CSS(Image)\";\n```\n\n### Animated Components (`src\u002Ftw\u002Fanimated.tsx`)\n\n```tsx\nimport * as TW from \".\u002Findex\";\nimport RNAnimated from \"react-native-reanimated\";\n\nexport const Animated = {\n  ...RNAnimated,\n  View: RNAnimated.createAnimatedComponent(TW.View),\n};\n```\n\n## Usage\n\nImport CSS-wrapped components from your tw directory:\n\n```tsx\nimport { View, Text, ScrollView, Image } from \"@\u002Ftw\";\n\nexport default function MyScreen() {\n  return (\n    \u003CScrollView className=\"flex-1 bg-white\">\n      \u003CView className=\"p-4 gap-4\">\n        \u003CText className=\"text-xl font-bold text-gray-900\">Hello Tailwind!\u003C\u002FText>\n        \u003CImage\n          className=\"w-full h-48 rounded-lg object-cover\"\n          source={{ uri: \"https:\u002F\u002Fexample.com\u002Fimage.jpg\" }}\n        \u002F>\n      \u003C\u002FView>\n    \u003C\u002FScrollView>\n  );\n}\n```\n\n## Custom Theme Variables\n\nAdd custom theme variables in your global.css using `@theme`:\n\n```css\n@layer theme {\n  @theme {\n    \u002F* Custom fonts *\u002F\n    --font-rounded: \"SF Pro Rounded\", sans-serif;\n\n    \u002F* Custom line heights *\u002F\n    --text-xs--line-height: calc(1em \u002F 0.75);\n    --text-sm--line-height: calc(1.25em \u002F 0.875);\n    --text-base--line-height: calc(1.5em \u002F 1);\n\n    \u002F* Custom leading scales *\u002F\n    --leading-tight: 1.25em;\n    --leading-snug: 1.375em;\n    --leading-normal: 1.5em;\n  }\n}\n```\n\n## Platform-Specific Styles\n\nUse platform media queries for platform-specific styling:\n\n```css\n@media ios {\n  :root {\n    --font-sans: system-ui;\n    --font-rounded: ui-rounded;\n  }\n}\n\n@media android {\n  :root {\n    --font-sans: normal;\n    --font-rounded: normal;\n  }\n}\n```\n\n## Apple System Colors with CSS Variables\n\nCreate a CSS file for Apple semantic colors:\n\n```css\n\u002F* src\u002Fcss\u002Fsf.css *\u002F\n@layer base {\n  html {\n    color-scheme: light;\n  }\n}\n\n:root {\n  \u002F* Accent colors with light\u002Fdark mode *\u002F\n  --sf-blue: light-dark(rgb(0 122 255), rgb(10 132 255));\n  --sf-green: light-dark(rgb(52 199 89), rgb(48 209 89));\n  --sf-red: light-dark(rgb(255 59 48), rgb(255 69 58));\n\n  \u002F* Gray scales *\u002F\n  --sf-gray: light-dark(rgb(142 142 147), rgb(142 142 147));\n  --sf-gray-2: light-dark(rgb(174 174 178), rgb(99 99 102));\n\n  \u002F* Text colors *\u002F\n  --sf-text: light-dark(rgb(0 0 0), rgb(255 255 255));\n  --sf-text-2: light-dark(rgb(60 60 67 \u002F 0.6), rgb(235 235 245 \u002F 0.6));\n\n  \u002F* Background colors *\u002F\n  --sf-bg: light-dark(rgb(255 255 255), rgb(0 0 0));\n  --sf-bg-2: light-dark(rgb(242 242 247), rgb(28 28 30));\n}\n\n\u002F* iOS native colors via platformColor *\u002F\n@media ios {\n  :root {\n    --sf-blue: platformColor(systemBlue);\n    --sf-green: platformColor(systemGreen);\n    --sf-red: platformColor(systemRed);\n    --sf-gray: platformColor(systemGray);\n    --sf-text: platformColor(label);\n    --sf-text-2: platformColor(secondaryLabel);\n    --sf-bg: platformColor(systemBackground);\n    --sf-bg-2: platformColor(secondarySystemBackground);\n  }\n}\n\n\u002F* Register as Tailwind theme colors *\u002F\n@layer theme {\n  @theme {\n    --color-sf-blue: var(--sf-blue);\n    --color-sf-green: var(--sf-green);\n    --color-sf-red: var(--sf-red);\n    --color-sf-gray: var(--sf-gray);\n    --color-sf-text: var(--sf-text);\n    --color-sf-text-2: var(--sf-text-2);\n    --color-sf-bg: var(--sf-bg);\n    --color-sf-bg-2: var(--sf-bg-2);\n  }\n}\n```\n\nThen use in components:\n\n```tsx\n\u003CText className=\"text-sf-text\">Primary text\u003C\u002FText>\n\u003CText className=\"text-sf-text-2\">Secondary text\u003C\u002FText>\n\u003CView className=\"bg-sf-bg\">...\u003C\u002FView>\n```\n\n## Using CSS Variables in JavaScript\n\nUse the `useCSSVariable` hook:\n\n```tsx\nimport { useCSSVariable } from \"@\u002Ftw\";\n\nfunction MyComponent() {\n  const blue = useCSSVariable(\"--sf-blue\");\n\n  return \u003CView style={{ borderColor: blue }} \u002F>;\n}\n```\n\n## Key Differences from NativeWind v4 \u002F Tailwind v3\n\n1. **No babel.config.js** - Configuration is now CSS-first\n2. **PostCSS plugin** - Uses `@tailwindcss\u002Fpostcss` instead of `tailwindcss`\n3. **CSS imports** - Use `@import \"tailwindcss\u002F...\"` instead of `@tailwind` directives\n4. **Theme config** - Use `@theme` in CSS instead of `tailwind.config.js`\n5. **Component wrappers** - Must wrap components with `useCssElement` for className support\n6. **Metro config** - Use `withNativewind` with different options (`inlineVariables: false`)\n\n## Troubleshooting\n\n### Styles not applying\n\n1. Ensure you have the CSS file imported in your app entry\n2. Check that components are wrapped with `useCssElement`\n3. Verify Metro config has `withNativewind` applied\n\n### Platform colors not working\n\n1. Use `platformColor()` in `@media ios` blocks\n2. Fall back to `light-dark()` for web\u002FAndroid\n\n### TypeScript errors\n\nAdd className to component props:\n\n```tsx\ntype Props = React.ComponentProps\u003Ctypeof RNView> & { className?: string };\n```\n",{"name":5,"license":15,"version":39,"description":7},"1.0.0","main","415349a94ba1a83dfbd3fc8f28f1d4ce34df49ab","apps\u002Fmobile\u002F.agents\u002Fskills\u002Fexpo-tailwind-setup","https:\u002F\u002Fgithub.com\u002Fepiphanyapps\u002Fmapyourhealth","https:\u002F\u002Fgithub.com\u002Fepiphanyapps","www.epiphanyapps.com","2026-09-02 13:41:20",{"source":8,"skillName":5,"commands":48,"prompt":58,"zipAvailable":59},[49,52,55],{"tool":50,"command":51},"npx","npx skills add epiphanyapps\u002Fmapyourhealth --skill expo-tailwind-setup",{"tool":53,"command":54},"bunx","bunx skills add epiphanyapps\u002Fmapyourhealth --skill expo-tailwind-setup",{"tool":56,"command":57},"pnpm","pnpm dlx skills add epiphanyapps\u002Fmapyourhealth --skill expo-tailwind-setup","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fepiphanyapps\u002Fmapyourhealth\u002Fblob\u002Fmain\u002Fapps\u002Fmobile\u002F.agents\u002Fskills\u002Fexpo-tailwind-setup\u002FSKILL.md",true,[],[62,78,90,108,120,141],{"skillNo":63,"name":64,"nameZh":6,"description":65,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":66,"categories":67,"keywords":68,"publishedAt":34},"01M6CC1HHT3GY5AT1EKNVEPNB6","validate-skills","Validates skills in this repo against agentskills.io spec and Claude Code best practices. Use via \u002Fvalidate-skills command.","https:\u002F\u002Fgithub.com\u002Fepiphanyapps\u002Fmapyourhealth\u002Fblob\u002Fmain\u002Fapps\u002Fmobile\u002F.agents\u002Fskills\u002Fvalidate-skills\u002FSKILL.md",[],[69,70,71,72,73,74,75,76,77],"validate skills","validate","spec","code","best practices","validation","repo","command","use",{"skillNo":79,"name":80,"nameZh":6,"description":81,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":84,"publishedAt":34},"01M6CC1F7HJAT7VM6GSWPMJGPF","use-dom","Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally.","https:\u002F\u002Fgithub.com\u002Fepiphanyapps\u002Fmapyourhealth\u002Fblob\u002Fmain\u002Fapps\u002Fmobile\u002F.agents\u002Fskills\u002Fuse-dom\u002FSKILL.md",[],[85,77,86,87,88,72,89,27],"use dom","web","components","run","migrate",{"skillNo":91,"name":92,"nameZh":6,"description":93,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":94,"categories":95,"keywords":97,"publishedAt":34},"01M6CC1CDBNAEG4XPPAEDHK0K4","upgrading-react-native","React Native upgrade workflow covering updated templates, dependencies, and common pitfalls. Use when migrating a React Native app to a newer release.","https:\u002F\u002Fgithub.com\u002Fepiphanyapps\u002Fmapyourhealth\u002Fblob\u002Fmain\u002Fapps\u002Fmobile\u002F.agents\u002Fskills\u002Fupgrading-react-native\u002FSKILL.md",[96],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[98,99,29,100,101,102,103,104,105,106,77,33,107],"upgrading react native","react native","changelog","npm","release","ios","templates","common","workflow","android",{"skillNo":109,"name":110,"nameZh":6,"description":111,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":112,"categories":113,"keywords":114,"publishedAt":34},"01M6CC19S41G82VN6WRTTMZ233","upgrading-expo","Guidelines for upgrading Expo SDK versions and fixing dependency issues","https:\u002F\u002Fgithub.com\u002Fepiphanyapps\u002Fmapyourhealth\u002Fblob\u002Fmain\u002Fapps\u002Fmobile\u002F.agents\u002Fskills\u002Fupgrading-expo\u002FSKILL.md",[],[115,27,116,117,118,119],"upgrading expo","issues","sdk","guidelines","dependency",{"skillNo":121,"name":122,"nameZh":6,"description":123,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":124,"categories":125,"keywords":127,"publishedAt":34},"01M6CC0NPK5PVP2BG3QDW4KNV3","react-native-best-practices","Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.","https:\u002F\u002Fgithub.com\u002Fepiphanyapps\u002Fmapyourhealth\u002Fblob\u002Fmain\u002Fapps\u002Fmobile\u002F.agents\u002Fskills\u002Freact-native-best-practices\u002FSKILL.md",[126],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[99,73,29,128,129,130,131,118,132,133,134,135,136,137,138,139,140,33,27],"react native best practices","Optimization","memory","performance","debugging","tasks","js","performance optimization","bundle size","profiling","hermes","bridge","modules",{"skillNo":142,"name":143,"nameZh":6,"description":144,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":145,"categories":146,"keywords":153,"publishedAt":34},"01M6CC090RAFTKGJ7K9SF71HMA","native-data-fetching","Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, axios, React Query, SWR, error handling, caching strategies, offline support.","https:\u002F\u002Fgithub.com\u002Fepiphanyapps\u002Fmapyourhealth\u002Fblob\u002Fmain\u002Fapps\u002Fmobile\u002F.agents\u002Fskills\u002Fnative-data-fetching\u002FSKILL.md",[147,148],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":149,"categoryName":150,"taxonomyType":151,"taxonomyTypeDesc":152},"01JBSEEDCAT000000000000033","数据分析师","PROFESSION","适用职业",[154,155,29,132,156,157,158,159,160,161,77,162],"data","native data fetching","error handling","offline","swr","network","api","fetch","support"]