[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6P2Q2KVFVTDC7P45ZN2MVA1":3,"skill-same:01M6P2Q2KVFVTDC7P45ZN2MVA1":77},{"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":43,"linkOnly":44,"markdownContent":45,"markdownBody":46,"frontMatter":47,"refName":34,"commitSha":52,"skillDirectory":53,"forksCount":13,"repositoryHtmlUrl":54,"repositoryHomepageUrl":6,"ownerHtmlUrl":55,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":56,"install":57,"resources":70},"01M6P2Q2KVFVTDC7P45ZN2MVA1","expo-tailwind-setup",null,"Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling","duc-duy-1612\u002FOnline-Delivery-Systems-Web","duc-duy-1612","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F192231384?v=4","01M6NSDKQQDKVTHZ8DZMZ1VYY6","01M6NSDKW8DDVTQHBT1HBDDJPT",0,"MIT","https:\u002F\u002Fgithub.com\u002Fduc-duy-1612\u002FOnline-Delivery-Systems-Web\u002Fblob\u002Fmain\u002F.agents\u002Fskills_archive\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,38,39,40,41,42],"setup","expo tailwind setup","Tailwind","expo","styling","for","tree","with","native","critical","wed","main","react-native","css","up","SET","license","official","react","github","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\nrisk: critical\nsource: https:\u002F\u002Fgithub.com\u002Fexpo\u002Fskills\u002Ftree\u002Fmain\u002Fplugins\u002Fexpo\u002Fskills\u002Fexpo-tailwind-setup\nsource_repo: expo\u002Fskills\nsource_type: official\ndate_added: 2026-07-01\nlicense: MIT\nlicense_source: https:\u002F\u002Fgithub.com\u002Fexpo\u002Fskills\u002Fblob\u002Fmain\u002FLICENSE\n---\n\n# Tailwind CSS Setup for Expo with react-native-css\n## When to Use\n\nUse this skill when you need set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling.\n\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\n## Limitations\n\n- Use this skill only when the task clearly matches its upstream product or API scope.\n- Verify commands, API behavior, pricing, quotas, credentials, and deployment effects against current official documentation before making changes.\n- Do not treat generated examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.\n","# Tailwind CSS Setup for Expo with react-native-css\n## When to Use\n\nUse this skill when you need set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling.\n\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\n## Limitations\n\n- Use this skill only when the task clearly matches its upstream product or API scope.\n- Verify commands, API behavior, pricing, quotas, credentials, and deployment effects against current official documentation before making changes.\n- Do not treat generated examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.\n",{"name":5,"risk":32,"source":48,"license":14,"date_added":49,"description":7,"source_repo":50,"source_type":40,"license_source":51},"https:\u002F\u002Fgithub.com\u002Fexpo\u002Fskills\u002Ftree\u002Fmain\u002Fplugins\u002Fexpo\u002Fskills\u002Fexpo-tailwind-setup",1782864000000,"expo\u002Fskills","https:\u002F\u002Fgithub.com\u002Fexpo\u002Fskills\u002Fblob\u002Fmain\u002FLICENSE","f3312ba749561b6159f477dbfc9313c875d40a56",".agents\u002Fskills_archive\u002Fexpo-tailwind-setup","https:\u002F\u002Fgithub.com\u002Fduc-duy-1612\u002FOnline-Delivery-Systems-Web","https:\u002F\u002Fgithub.com\u002Fduc-duy-1612","2026-10-25 23:50:58",{"source":8,"skillName":5,"commands":58,"prompt":68,"zipAvailable":69},[59,62,65],{"tool":60,"command":61},"npx","npx skills add duc-duy-1612\u002FOnline-Delivery-Systems-Web --skill expo-tailwind-setup",{"tool":63,"command":64},"bunx","bunx skills add duc-duy-1612\u002FOnline-Delivery-Systems-Web --skill expo-tailwind-setup",{"tool":66,"command":67},"pnpm","pnpm dlx skills add duc-duy-1612\u002FOnline-Delivery-Systems-Web --skill expo-tailwind-setup","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fduc-duy-1612\u002FOnline-Delivery-Systems-Web\u002Fblob\u002Fmain\u002F.agents\u002Fskills_archive\u002Fexpo-tailwind-setup\u002FSKILL.md",true,[71],{"path":72,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":75,"sourceHtmlUrl":76},"agents\u002Fopenai.yaml","REFERENCE","参考文档",359,"https:\u002F\u002Fgithub.com\u002Fduc-duy-1612\u002FOnline-Delivery-Systems-Web\u002Fblob\u002Fmain\u002F.agents\u002Fskills_archive\u002Fexpo-tailwind-setup\u002Fagents\u002Fopenai.yaml",[78,105,129,152,180,203],{"skillNo":79,"name":80,"nameZh":6,"description":81,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":87,"publishedAt":43},"01M6Q0FA5FZ410Z33Z3TFQ4DBA","zero-trust","Implement zero-trust network architecture. Configure identity-based access, micro-segmentation, and continuous verification. Use when implementing modern security architectures.","https:\u002F\u002Fgithub.com\u002Fduc-duy-1612\u002FOnline-Delivery-Systems-Web\u002Fblob\u002Fmain\u002F.agents\u002Fskills_archive\u002Fzero-trust\u002FSKILL.md",[84],{"categoryNo":85,"categoryName":86,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000011","运维与部署",[88,89,90,91,92,93,80,94,95,96,97,98,99,34,100,32,101,102,103,104],"ZeRO","trust","zero trust","architecture","assessment","verification","segmentation","devops-security","access","configure","only","community","active","scope","scripts","relevant","implementing",{"skillNo":106,"name":107,"nameZh":6,"description":108,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":109,"categories":110,"keywords":111,"publishedAt":43},"01M6Q0F1YZJW3KX5FBKEVZ8CV4","zcode-delegate","Delegate coding tasks to the Z.AI ZCode CLI only when the user explicitly requests it, while the orchestrator retains review and landing responsibility.","https:\u002F\u002Fgithub.com\u002Fduc-duy-1612\u002FOnline-Delivery-Systems-Web\u002Fblob\u002Fmain\u002F.agents\u002Fskills_archive\u002Fzcode-delegate\u002FSKILL.md",[],[112,113,114,115,116,117,118,119,120,121,122,123,124,98,125,99,126,127,32,128],"delegate","zcode","zcode delegate","review","cli","orchestration","tasks","run","Bash","model","node","read","orchestrator","files","desktop app","app","agent-orchestration",{"skillNo":130,"name":131,"nameZh":6,"description":132,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":133,"categories":134,"keywords":135,"publishedAt":43},"01M6Q0ETK41VGNMYEXW0T00AJN","youtube-transcript","Fetch YouTube transcripts through DeepAPI or local fallback tooling and save clean text output.","https:\u002F\u002Fgithub.com\u002Fduc-duy-1612\u002FOnline-Delivery-Systems-Web\u002Fblob\u002Fmain\u002F.agents\u002Fskills_archive\u002Fyoutube-transcript\u002FSKILL.md",[],[136,137,138,139,42,140,141,39,142,143,144,145,146,99,34,147,148,149,150,151],"transcript","youtube transcript","youtube","safe","codex","research","https","text","fetch","tooling","clean","local","output","deepapi","youtube transcripts","blob",{"skillNo":153,"name":154,"nameZh":6,"description":155,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":156,"categories":157,"keywords":169,"publishedAt":43},"01M6Q0EPPH2PVMDW40017F8WX0","youtube-transcript-skills","Fetch YouTube video transcripts, search videos\u002Fchannels, browse channels, and extract playlists via the getyoutubetranscript.com API - free tier, no card required.","https:\u002F\u002Fgithub.com\u002Fduc-duy-1612\u002FOnline-Delivery-Systems-Web\u002Fblob\u002Fmain\u002F.agents\u002Fskills_archive\u002Fyoutube-transcript-skills\u002FSKILL.md",[158,161,164],{"categoryNo":159,"categoryName":160,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":162,"categoryName":163,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":165,"categoryName":166,"taxonomyType":167,"taxonomyTypeDesc":168},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[136,137,138,170,139,171,42,140,39,172,173,174,175,144,176,99,34,177,178,179],"youtube transcript skills","gemini","search","api","Video","browse","api-integration","free","card","channels",{"skillNo":181,"name":182,"nameZh":6,"description":183,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":184,"categories":185,"keywords":190,"publishedAt":43},"01M6Q0EAB96PX83W5PTE8A0R8D","youtube-notetaker","Turn YouTube talks into local study notes with slides, transcripts, editable annotations, and a markdown-backed viewer.","https:\u002F\u002Fgithub.com\u002Fduc-duy-1612\u002FOnline-Delivery-Systems-Web\u002Fblob\u002Fmain\u002F.agents\u002Fskills_archive\u002Fyoutube-notetaker\u002FSKILL.md",[186,189],{"categoryNo":187,"categoryName":188,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000003","演示文稿",{"categoryNo":162,"categoryName":163,"taxonomyType":20,"taxonomyTypeDesc":21},[138,191,192,116,139,193,40,194,195,39,174,196,197,198,199,34,200,147,201,202],"youtube notetaker","notetaker","workflow","notes","code","markdown","slides","annotations","README","study","dair-academy","viewer",{"skillNo":204,"name":205,"nameZh":6,"description":206,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":207,"categories":208,"keywords":210,"publishedAt":43},"01M6Q0E55F0GW5MX48V8HXS8B5","youtube-full","Fetch YouTube transcripts, search videos, browse channels, and extract playlists via TranscriptAPI — no yt-dlp, no Google API key, works from any cloud server.","https:\u002F\u002Fgithub.com\u002Fduc-duy-1612\u002FOnline-Delivery-Systems-Web\u002Fblob\u002Fmain\u002F.agents\u002Fskills_archive\u002Fyoutube-full\u002FSKILL.md",[209],{"categoryNo":159,"categoryName":160,"taxonomyType":20,"taxonomyTypeDesc":21},[211,138,212,213,139,171,172,214,215,173,174,175,144,216,176,99,34,177,217,150],"youtube full","full","google","server","dlp","credits","automatic"]