[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M713FC4XRK8MA7J7HTAA6WYM":3,"skill-same:01M713FC4XRK8MA7J7HTAA6WYM":64},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":38,"linkOnly":39,"markdownContent":40,"markdownBody":41,"frontMatter":42,"refName":44,"commitSha":45,"skillDirectory":46,"forksCount":13,"repositoryHtmlUrl":47,"repositoryHomepageUrl":6,"ownerHtmlUrl":48,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":49,"install":50,"resources":63},"01M713FC4XRK8MA7J7HTAA6WYM","expo-tailwind-setup",null,"Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling","ilderaj\u002Fagent-plugin-marketplace","ilderaj","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6321440?v=4","01M70DFHF3YADN6NHGSEZ49NT7","01M70DFHFX74C9CEGTTQ8V8GXW",0,"MIT","https:\u002F\u002Fgithub.com\u002Filderaj\u002Fagent-plugin-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fcodex--expo\u002Fskills\u002Fexpo-tailwind-setup\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37],"Tailwind","expo tailwind setup","expo","setup","SET","css","for","up","react","with","native","react-native","styling","Tailwind CSS","nativewind","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":14,"version":43,"description":7},"1.0.0","main","7e72d1e8c9a4b4e902f4b6d40505bc124fe29973","plugins\u002Fcodex--expo\u002Fskills\u002Fexpo-tailwind-setup","https:\u002F\u002Fgithub.com\u002Filderaj\u002Fagent-plugin-marketplace","https:\u002F\u002Fgithub.com\u002Filderaj","2026-05-09 23:15:35",{"source":8,"skillName":5,"commands":51,"prompt":61,"zipAvailable":62},[52,55,58],{"tool":53,"command":54},"npx","npx skills add ilderaj\u002Fagent-plugin-marketplace --skill expo-tailwind-setup",{"tool":56,"command":57},"bunx","bunx skills add ilderaj\u002Fagent-plugin-marketplace --skill expo-tailwind-setup",{"tool":59,"command":60},"pnpm","pnpm dlx skills add ilderaj\u002Fagent-plugin-marketplace --skill expo-tailwind-setup","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Filderaj\u002Fagent-plugin-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fcodex--expo\u002Fskills\u002Fexpo-tailwind-setup\u002FSKILL.md",true,[],[65,92,119,144,177,202],{"skillNo":66,"name":67,"nameZh":6,"description":68,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":69,"licenseFileUrl":70,"sourceHtmlUrl":71,"categories":72,"keywords":73,"publishedAt":38},"01M713XGWR5JXWPR2A2YJ14YS3","android-emulator-qa","Use when validating Android feature flows in an emulator with adb-driven launch, input, UI-tree inspection, screenshots, and logcat capture.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Filderaj\u002Fagent-plugin-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fcodex--test-android-apps\u002Fskills\u002Fandroid-emulator-qa\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Filderaj\u002Fagent-plugin-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fcodex--test-android-apps\u002Fskills\u002Fandroid-emulator-qa\u002FSKILL.md",[],[74,75,76,77,78,79,80,81,82,83,84,32,85,86,87,88,89,90,91],"android emulator qa","qa","android","emulator","tree","feature","flows","inspection","use","when","android feature","adb","launch","input","capture","ui","screenshots","driven",{"skillNo":93,"name":94,"nameZh":6,"description":95,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":96,"categories":97,"keywords":101,"publishedAt":38},"01M713VQM4KXQZ2X2PMC3TE5Z2","supabase-postgres-best-practices","Postgres performance optimization and best practices from Supabase. Use this skill when writing, reviewing, or optimizing Postgres queries, schema designs, or database configurations.","https:\u002F\u002Fgithub.com\u002Filderaj\u002Fagent-plugin-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fcodex--supabase\u002Fskills\u002Fsupabase-postgres-best-practices\u002FSKILL.md",[98],{"categoryNo":99,"categoryName":100,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000010","后端与接口",[102,103,104,105,106,107,108,109,29,110,111,112,113,114,115,82,116,117,118,83],"postgres best practices","supabase","postgres","supabase postgres best practices","best practices","categories","postgres performance","advanced","Optimization","performance","correct","schema","writing","impact","Rules","critical","database",{"skillNo":120,"name":121,"nameZh":6,"description":122,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":69,"licenseFileUrl":123,"sourceHtmlUrl":124,"categories":125,"keywords":127,"publishedAt":38},"01M713TS0QPNEMPP63WQ9AW7PH","sentry","Use when the user asks to inspect Sentry issues or events, summarize recent production errors, or pull basic Sentry health data via the Sentry API; perform read-only queries with the bundled script and require `SENTRY_AUTH_TOKEN`.","https:\u002F\u002Fgithub.com\u002Filderaj\u002Fagent-plugin-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fcodex--sentry\u002Fskills\u002Fsentry\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Filderaj\u002Fagent-plugin-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fcodex--sentry\u002Fskills\u002Fsentry\u002FSKILL.md",[126],{"categoryNo":99,"categoryName":100,"taxonomyType":20,"taxonomyTypeDesc":21},[121,128,129,130,131,132,133,83,134,135,136,137,138,139,140,141,142,82,143,32],"auth","inspect","sentry issues","issues","errors","only","api","read","token","data","health data","events","pull","read-only","basic","health",{"skillNo":145,"name":146,"nameZh":6,"description":147,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":148,"categories":149,"keywords":161,"publishedAt":38},"01M713TNCA0H80TDG9ZM1YR0RK","render-workflows","Sets up, develops, tests, and deploys Render Workflows. Covers first-time scaffolding (via CLI or manual), SDK installation (Python or TypeScript), task patterns (retries, subtasks, fan-out), local development, Dashboard deployment, and troubleshooting. Use when a user wants to set up Render Workflows for the first time, scaffold a workflow service, add or modify workflow tasks, test workflows locally, or deploy workflows to Render.","https:\u002F\u002Fgithub.com\u002Filderaj\u002Fagent-plugin-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fcodex--render\u002Fskills\u002Frender-workflows\u002FSKILL.md",[150,153,156],{"categoryNo":151,"categoryName":152,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":154,"categoryName":155,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000013","分析与可视化",{"categoryNo":157,"categoryName":158,"taxonomyType":159,"taxonomyTypeDesc":160},"01JBSEEDCAT000000000000033","数据分析师","PROFESSION","适用职业",[162,163,164,27,165,166,29,167,168,169,170,30,171,172,173,174,82,83,175,176],"render workflows","render","workflows","local development","development","scaffolding","deployment","time","manual","python","local","tests","retries","workflow","tasks",{"skillNo":178,"name":179,"nameZh":6,"description":180,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":181,"categories":182,"keywords":186,"publishedAt":38},"01M713TJ4WWJN4D7BNFPQMV39C","render-monitor","Monitor Render services in real-time. Check health, performance metrics, logs, and resource usage. Use when users want to check service status, view metrics, monitor performance, or verify deployments are healthy.","https:\u002F\u002Fgithub.com\u002Filderaj\u002Fagent-plugin-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fcodex--render\u002Fskills\u002Frender-monitor\u002FSKILL.md",[183],{"categoryNo":184,"categoryName":185,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[163,187,188,111,169,189,190,83,191,192,193,194,195,196,197,198,199,200,82,201],"render monitor","monitor","render mcp","MCP","logs","monitoring","cli","status","Tools","metrics","usage","view","real-time","deployments","healthy",{"skillNo":203,"name":204,"nameZh":6,"description":205,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":206,"categories":207,"keywords":209,"publishedAt":38},"01M713TDTYVHWYS06Y9QJ1QYE0","render-migrate-from-heroku","Migrate from Heroku to Render by reading local project files and generating equivalent Render services. Triggers: any mention of migrating from Heroku, moving off Heroku, Heroku to Render migration, or switching from Heroku. Reads Procfile, dependency files, and app config from the local repo. Optionally uses Heroku MCP to enrich with live config vars, add-on details, and dyno sizes. Uses Render MCP or Blueprint YAML to create services.","https:\u002F\u002Fgithub.com\u002Filderaj\u002Fagent-plugin-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fcodex--render\u002Fskills\u002Frender-migrate-from-heroku\u002FSKILL.md",[208],{"categoryNo":184,"categoryName":185,"taxonomyType":20,"taxonomyTypeDesc":21},[163,210,211,212,213,214,215,216,189,172,217,190,218,219,220,221,222,223,224,225],"migrate","heroku","render migrate from heroku","app","creation","enrich","project","files","switching","Blueprint","mcp server","create","server","verification","dependency","config"]