{"id":"bdc380b3-91f8-40a9-8fc3-47f74ff87729","shortId":"v37MPy","kind":"skill","title":"expo-tailwind-setup","tagline":"Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling","description":"# 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## When to Use\n- You need to set up Tailwind CSS v4 styling in an Expo app using `react-native-css` and NativeWind v5.\n- The task involves configuring Metro, PostCSS, global CSS, or package versions for Expo + Tailwind.\n- You want one styling setup that works across iOS, Android, and web in an Expo project.\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/postcss** - 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/postcss tailwind-merge clsx\n```\n\nAdd resolutions for lightningcss compatibility:\n\n```json\n// 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// metro.config.js\nconst { getDefaultConfig } = require(\"expo/metro-config\");\nconst { withNativewind } = require(\"nativewind/metro\");\n\n/** @type {import('expo/metro-config').MetroConfig} */\nconst config = getDefaultConfig(__dirname);\n\nmodule.exports = withNativewind(config, {\n  // inline variables break PlatformColor in CSS variables\n  inlineVariables: false,\n  // We add className support manually\n  globalClassNamePolyfill: false,\n});\n```\n\n### PostCSS Config\n\nCreate `postcss.config.mjs`:\n\n```js\n// postcss.config.mjs\nexport default {\n  plugins: {\n    \"@tailwindcss/postcss\": {},\n  },\n};\n```\n\n### Global CSS\n\nCreate `src/global.css`:\n\n```css\n@import \"tailwindcss/theme.css\" layer(theme);\n@import \"tailwindcss/preflight.css\" layer(base);\n@import \"tailwindcss/utilities.css\";\n\n/* Platform-specific font families */\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// DELETE babel.config.js if it only contains NativeWind config\n// The following is NO LONGER needed:\n// module.exports = function (api) {\n//   api.cache(true);\n//   return {\n//     presets: [\n//       [\"babel-preset-expo\", { jsxImportSource: \"nativewind\" }],\n//       \"nativewind/babel\",\n//     ],\n//   };\n// };\n```\n\n## CSS Component Wrappers\n\nSince react-native-css requires explicit CSS element wrapping, create reusable components:\n\n### Main Components (`src/tw/index.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// CSS-enabled Link\nexport const Link = (\n  props: React.ComponentProps<typeof 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// CSS Variable hook\nexport const useCSSVariable =\n  process.env.EXPO_OS !== \"web\"\n    ? useFunctionalVariable\n    : (variable: string) => `var(${variable})`;\n\n// View\nexport type ViewProps = React.ComponentProps<typeof 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// Text\nexport const Text = (\n  props: React.ComponentProps<typeof RNText> & { className?: string }\n) => {\n  return useCssElement(RNText, props, { className: \"style\" });\n};\nText.displayName = \"CSS(Text)\";\n\n// ScrollView\nexport const ScrollView = (\n  props: React.ComponentProps<typeof 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// Pressable\nexport const Pressable = (\n  props: React.ComponentProps<typeof RNPressable> & { className?: string }\n) => {\n  return useCssElement(RNPressable, props, { className: \"style\" });\n};\nPressable.displayName = \"CSS(Pressable)\";\n\n// TextInput\nexport const TextInput = (\n  props: React.ComponentProps<typeof RNTextInput> & { className?: string }\n) => {\n  return useCssElement(RNTextInput, props, { className: \"style\" });\n};\nTextInput.displayName = \"CSS(TextInput)\";\n\n// AnimatedScrollView\nexport const AnimatedScrollView = (\n  props: React.ComponentProps<typeof 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// TouchableHighlight with underlayColor extraction\nfunction XXTouchableHighlight(\n  props: React.ComponentProps<typeof RNTouchableHighlight>\n) {\n  const { underlayColor, ...style } = StyleSheet.flatten(props.style) || {};\n  return (\n    <RNTouchableHighlight\n      underlayColor={underlayColor}\n      {...props}\n      style={style}\n    />\n  );\n}\n\nexport const TouchableHighlight = (\n  props: React.ComponentProps<typeof RNTouchableHighlight>\n) => {\n  return useCssElement(XXTouchableHighlight, props, { className: \"style\" });\n};\nTouchableHighlight.displayName = \"CSS(TouchableHighlight)\";\n```\n\n### Image Component (`src/tw/image.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<typeof Image>;\n\nfunction CSSImage(props: React.ComponentProps<typeof AnimatedExpoImage>) {\n  // @ts-expect-error: Remap objectFit style to contentFit property\n  const { objectFit, objectPosition, ...style } =\n    StyleSheet.flatten(props.style) || {};\n\n  return (\n    <AnimatedExpoImage\n      contentFit={objectFit}\n      contentPosition={objectPosition}\n      {...props}\n      source={\n        typeof props.source === \"string\" ? { uri: props.source } : props.source\n      }\n      // @ts-expect-error: Style is remapped above\n      style={style}\n    />\n  );\n}\n\nexport const Image = (\n  props: React.ComponentProps<typeof CSSImage> & { className?: string }\n) => {\n  return useCssElement(CSSImage, props, { className: \"style\" });\n};\n\nImage.displayName = \"CSS(Image)\";\n```\n\n### Animated Components (`src/tw/animated.tsx`)\n\n```tsx\nimport * as TW from \"./index\";\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 \"@/tw\";\n\nexport default function MyScreen() {\n  return (\n    <ScrollView className=\"flex-1 bg-white\">\n      <View className=\"p-4 gap-4\">\n        <Text className=\"text-xl font-bold text-gray-900\">Hello Tailwind!</Text>\n        <Image\n          className=\"w-full h-48 rounded-lg object-cover\"\n          source={{ uri: \"https://example.com/image.jpg\" }}\n        />\n      </View>\n    </ScrollView>\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    /* Custom fonts */\n    --font-rounded: \"SF Pro Rounded\", sans-serif;\n\n    /* Custom line heights */\n    --text-xs--line-height: calc(1em / 0.75);\n    --text-sm--line-height: calc(1.25em / 0.875);\n    --text-base--line-height: calc(1.5em / 1);\n\n    /* Custom leading scales */\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/* src/css/sf.css */\n@layer base {\n  html {\n    color-scheme: light;\n  }\n}\n\n:root {\n  /* Accent colors with light/dark mode */\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  /* Gray scales */\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  /* Text colors */\n  --sf-text: light-dark(rgb(0 0 0), rgb(255 255 255));\n  --sf-text-2: light-dark(rgb(60 60 67 / 0.6), rgb(235 235 245 / 0.6));\n\n  /* Background colors */\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/* iOS native colors via platformColor */\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/* Register as Tailwind theme colors */\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<Text className=\"text-sf-text\">Primary text</Text>\n<Text className=\"text-sf-text-2\">Secondary text</Text>\n<View className=\"bg-sf-bg\">...</View>\n```\n\n## Using CSS Variables in JavaScript\n\nUse the `useCSSVariable` hook:\n\n```tsx\nimport { useCSSVariable } from \"@/tw\";\n\nfunction MyComponent() {\n  const blue = useCSSVariable(\"--sf-blue\");\n\n  return <View style={{ borderColor: blue }} />;\n}\n```\n\n## Key Differences from NativeWind v4 / Tailwind v3\n\n1. **No babel.config.js** - Configuration is now CSS-first\n2. **PostCSS plugin** - Uses `@tailwindcss/postcss` instead of `tailwindcss`\n3. **CSS imports** - Use `@import \"tailwindcss/...\"` 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/Android\n\n### TypeScript errors\n\nAdd className to component props:\n\n```tsx\ntype Props = React.ComponentProps<typeof RNView> & { className?: string };\n```\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["expo","tailwind","setup","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding"],"capabilities":["skill","source-sickn33","skill-expo-tailwind-setup","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/expo-tailwind-setup","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34793 github stars · SKILL.md body (12,373 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-24T00:50:54.554Z","embedding":null,"createdAt":"2026-04-18T21:36:54.356Z","updatedAt":"2026-04-24T00:50:54.554Z","lastSeenAt":"2026-04-24T00:50:54.554Z","tsv":"'-48':793 '/image.jpg':804 '/index':747 '/tw':779,1236 '0':958,1033,1034,1035,1070,1071,1072 '0.0.0':165 '0.6':1051,1056 '0.75':843 '0.875':853 '1':863,1257,1319,1350 '1.25':851,870 '1.30.1':181 '1.375':875 '1.5':861,880 '10':962 '102':1023 '122':959 '132':963 '142':1002,1003,1006,1007 '147':1004,1008 '174':1017,1018 '178':1019 '199':973 '1em':842 '2':1012,1043,1076,1124,1135,1190,1195,1208,1213,1266,1331,1357 '209':977 '235':1053,1054 '242':1081,1082 '245':1055 '247':1083 '255':960,964,986,990,1037,1038,1039,1066,1067,1068 '28':1085,1086 '3':1274,1339 '30':1087 '4':157,1284 '48':976,988 '5':1294 '5.0.0':159 '52':972 '58':992 '59':987 '6':1305 '60':1048,1049 '67':1050 '69':991 '89':974,978 '99':1021,1022 'accent':946 'across':54,104 'add':172,237,808,1368 'android':56,106,274,912 'anim':413,657,739,757 'animated.createanimatedcomponent':673 'animated.scrollview':593 'animatedexpoimag':672,700 'animatedscrollview':579,582 'api':362 'api.cache':363 'app':74,1329 'appl':922,933 'appli':1318,1345 'ask':1412 'autoprefix':182 'babel':321,341,368 'babel-preset-expo':367 'babel.config.js':335,347,1259 'back':1359 'background':1057 'base':265,856,939 'bash':150 'bg':1061,1075,1129,1134,1199,1203,1207,1212 'block':1356 'blue':953,1098,1149,1153,1240,1244,1249 'bordercolor':1248 'boundari':1420 'break':229 'calc':841,850,860 'check':1332 'clarif':1414 'classnam':238,456,462,491,502,513,519,530,538,551,557,568,574,585,595,630,728,734,788,1303,1369,1377 'clear':1387 'clsx':171 'color':924,935,942,947,1025,1058,1090,1142,1147,1155,1163,1171,1179,1187,1197,1205,1347 'color-schem':941 'color-sf-bg':1196,1204 'color-sf-blu':1146 'color-sf-gray':1170 'color-sf-green':1154 'color-sf-r':1162 'color-sf-text':1178,1186 'compat':176 'compon':375,389,391,636,740,767,1217,1295,1299,1334,1371 'config':201,221,226,244,322,353,1286,1307,1342 'configur':86,124,198,1260 'const':208,212,220,452,476,494,509,526,547,564,581,609,622,671,693,724,756,1239 'contain':351 'contentclassnam':587,597 'contentcontainerclassnam':532,540,589,599 'contentcontainerstyl':541,598,600 'contentfit':691,701 'contentposit':703 'cover':35,799 'creat':202,245,255,387,928 'criteria':1423 'css':8,16,24,32,39,47,68,79,90,118,122,128,129,164,232,254,257,374,381,384,403,448,472,505,522,543,560,577,633,645,737,765,817,895,926,930,936,1224,1264,1275,1290,1324 'css-enabl':447 'css-first':121,1263 'css-wrap':764 'cssimag':680,732 'custom':805,809,821,832,864 'dark':956,970,984,1000,1015,1031,1046,1064,1079,1363 'default':197,250,781 'delet':346 'depend':152 'describ':1391 'differ':1251,1311 'direct':1283 'directori':771 'dirnam':223 'element':385 'em':852,862,871,876,881 'enabl':449 'ensur':1320 'entri':1330 'environ':1403 'environment-specif':1402 'error':686,716,1367 'example.com':803 'example.com/image.jpg':802 'expect':685,715 'expert':1408 'explicit':383 'expo':2,11,27,42,73,95,111,154,187,195,370,410,669 'expo-imag':668 'expo-rout':409 'expo-tailwind-setup':1 'expo/metro-config':211,218 'export':249,451,475,487,493,508,525,546,563,580,621,675,723,755,780 'extract':604 'fall':1358 'fals':235,242,1314 'famili':272 'file':199,931,1325 'first':123,1265 'follow':355 'font':271,277,281,285,289,296,302,308,314,822,824,900,906,915,919 'font-mono':276,295 'font-round':280,313,823,905,918 'font-san':288,307,899,914 'font-serif':284,301 'full':791 'function':361,605,679,782,1237 'getdefaultconfig':209,222 'global':89,253 'global.css':814 'globalclassnamepolyfil':241 'gray':993,997,1011,1113,1173,1177 'green':967,1103,1157,1161 'guid':34 'h':792 'height':834,840,849,859 'hello':785 'hook':474,1231 'html':940 'imag':635,664,670,725,738,777,787 'image.displayname':736 'imageprop':677 'import':217,258,262,266,319,394,404,412,419,423,639,646,650,656,663,743,748,763,773,1233,1276,1278,1326 'includ':193 'inlin':227 'inlinevari':234,1313 'input':1417 'instal':149,151,155 'instead':1271,1280,1291 'involv':85 'io':55,105,293,897,1088,1094,1355 'javascript':1227 'js':206,247,345 'json':177 'jsximportsourc':371 'key':1250 'label':1120 'layer':260,264,818,938,1143 'lead':865,868,873,878 'leading-norm':877 'leading-snug':872 'leading-tight':867 'lg':796 'light':944,955,969,983,999,1014,1030,1045,1063,1078,1362 'light-dark':954,968,982,998,1013,1029,1044,1062,1077,1361 'light/dark':949 'lightningcss':175,180,190 'limit':1379 'line':833,839,848,858 'line-height':838,847,857 'link':405,450,453 'link.menu':466 'link.menuaction':468 'link.preview':470 'link.trigger':464 'longer':358 'main':390 'manual':240 'match':1388 'media':273,292,888,896,911,1093,1354 'merg':170 'metro':87,136,200,1306,1341 'metro.config.js':205,207 'metroconfig':219 'miss':1425 'mode':950 'modern':120 'module.exports':224,360 'mono':278,297 'monospac':279,300 'must':1297 'mycompon':1238 'myscreen':783 'nativ':15,31,46,78,127,133,142,163,380,402,417,446,644,655,661,753,1089 'nativewind':18,49,81,134,158,328,340,352,372,1253 'nativewind/babel':373 'nativewind/metro':215 'need':63,185,323,333,359 'nightly.5ce6396':166 'normal':283,291,879,917,921 'npx':153 'object':798 'object-cov':797 'objectfit':688,694,702 'objectposit':695,704 'one':99 'option':1312 'os':479 'output':1397 'overview':113 'packag':92 'package.json':178 'permiss':1418 'platform':269,883,887,892,1346 'platform-specif':268,882,891 'platformcolor':230,1092,1099,1104,1109,1114,1119,1125,1130,1136,1352 'plugin':145,251,1268 'postcss':88,144,191,243,1267 'postcss.config.mjs':246,248 'present':344 'preset':342,366,369 'pressabl':430,545,548,561 'pressable.displayname':559 'preview.2':160 'primari':1219 'pro':827 'process.env.expo':478 'project':112 'prop':454,461,496,501,511,518,528,537,549,556,566,573,583,594,607,618,624,629,681,705,726,733,1372,1375 'properti':692 'props.source':708,711,712 'props.style':613,698 'queri':889 'react':14,30,45,77,126,132,141,162,379,401,416,420,422,445,643,647,649,654,660,752 'react-nat':444,653 'react-native-css':13,29,44,76,125,161,378,400,642 'react-native-reanim':415,659,751 'react.componentprops':455,490,512,529,550,567,584,608,625,678,682,727,1376 'reanim':418,662,754 'red':981,1108,1165,1169 'regist':1138 'remap':687,719 'remov':338 'requir':210,214,382,1416 'resolut':173,179 'return':365,458,498,515,534,553,570,591,614,626,699,730,784,1245 'reusabl':388 'review':1409 'rgb':957,961,971,975,985,989,1001,1005,1016,1020,1032,1036,1047,1052,1065,1069,1080,1084 'rnanim':749,758 'rnanimated.createanimatedcomponent':760 'rnimag':666,674 'rnpressabl':432,555 'rnscrollview':435,536 'rntext':429,517 'rntextinput':441,572 'rntouchablehighlight':438,615 'rnview':426,500 'root':275,294,898,913,945,1095 'round':282,315,318,795,825,828,907,910,920 'rounded-lg':794 'router':411 'routerlink':407,460 'routerlink.menu':467 'routerlink.menuaction':469 'routerlink.preview':471 'routerlink.trigger':465 'runtim':130 'safeti':1419 'san':290,309,830,901,916 'sans-serif':829 'scale':866,994 'scheme':943 'scope':1390 'scrollview':433,524,527,544,776 'scrollview.displayname':542 'secondari':1221 'secondarylabel':1126 'secondarysystembackground':1137 'semant':934 'serif':286,287,303,306,831 'set':5,36,65 'setup':4,25,101,115 'sf':826,952,966,980,996,1010,1027,1041,1060,1074,1097,1102,1107,1112,1117,1122,1128,1133,1148,1152,1156,1160,1164,1168,1172,1176,1180,1184,1188,1193,1198,1202,1206,1211,1243 'sf-bg':1059,1073,1127,1132,1201,1210 'sf-blue':951,1096,1151,1242 'sf-gray':995,1009,1111,1175 'sf-green':965,1101,1159 'sf-red':979,1106,1167 'sf-text':1026,1040,1116,1121,1183,1192 'sinc':377 'skill':1382 'skill-expo-tailwind-setup' 'sm':846 'snug':874 'sourc':706,800 'source-sickn33' 'specif':270,884,893,1404 'src/css/sf.css':937 'src/global.css':256 'src/tw/animated.tsx':741 'src/tw/image.tsx':637 'src/tw/index.tsx':392 'stop':1410 'string':457,483,492,514,531,533,552,569,586,588,590,709,729,1378 'style':22,53,70,100,463,503,520,539,558,575,596,611,619,620,631,689,696,717,721,722,735,885,894,1247,1316 'stylesheet':442,651 'stylesheet.flatten':612,697 'substitut':1400 'success':1422 'support':239,1304 'system':311,903,923 'system-ui':310,902 'systembackground':1131 'systemblu':1100 'systemgray':1115 'systemgreen':1105 'systemr':1110 'tailwind':3,7,23,38,67,96,117,139,147,169,325,337,786,1140,1255,1282 'tailwind-merg':168 'tailwind.config.js':1293 'tailwindcss':156,1273,1279 'tailwindcss/postcss':143,167,252,1270 'tailwindcss/preflight.css':263 'tailwindcss/theme.css':259 'tailwindcss/utilities.css':267 'task':84,1386 'test':1406 'text':427,507,510,523,775,836,845,855,1024,1028,1042,1118,1123,1181,1185,1189,1194,1220,1222 'text-bas':854 'text-sm':844 'text-x':835 'text.displayname':521 'textinput':439,562,565,578 'textinput.displayname':576 'theme':261,806,810,816,819,820,1141,1144,1145,1285,1288 'tight':869 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'touchablehighlight':436,601,623,634 'touchablehighlight.displayname':632 'transform':137 'treat':1395 'troubleshoot':1315 'true':364 'ts':684,714 'ts-expect-error':683,713 'tsx':393,638,742,772,1218,1232,1373 'tw':745,770 'tw.view':761 'type':216,488,676,1374 'typeof':707 'typescript':1366 'ui':299,305,312,317,904,909 'ui-monospac':298 'ui-round':316,908 'ui-serif':304 'underlaycolor':603,610,616,617 'univers':21,52 'updat':204 'uri':710,801 'usag':762 'use':43,61,75,116,815,886,1215,1223,1228,1269,1277,1287,1308,1351,1380 'usecssel':395,459,499,516,535,554,571,592,627,640,731,1301,1338 'usecssvari':477,1230,1234,1241 'usefunctionalvari':398,481 'usenativevari':396 'v3':1256 'v4':9,40,69,119,148,326,1254 'v5':19,50,82,135,329 'valid':1405 'var':484,1150,1158,1166,1174,1182,1191,1200,1209 'variabl':228,233,473,482,485,807,811,927,1225 'verifi':1340 'version':93 'via':1091 'view':424,486,495,506,759,774,1246 'view.displayname':504 'viewprop':489,497 'w':790 'w-full':789 'want':98 'web':58,108,480 'web/android':1365 'withnativewind':213,225,1309,1344 'work':103,1349 'wrap':386,766,1298,1336 'wrapper':376,1296 'xs':837 'xxtouchablehighlight':606,628","prices":[{"id":"ac340586-b030-4c58-8ddc-98659dc986d1","listingId":"bdc380b3-91f8-40a9-8fc3-47f74ff87729","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:36:54.356Z"}],"sources":[{"listingId":"bdc380b3-91f8-40a9-8fc3-47f74ff87729","source":"github","sourceId":"sickn33/antigravity-awesome-skills/expo-tailwind-setup","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/expo-tailwind-setup","isPrimary":false,"firstSeenAt":"2026-04-18T21:36:54.356Z","lastSeenAt":"2026-04-24T00:50:54.554Z"}],"details":{"listingId":"bdc380b3-91f8-40a9-8fc3-47f74ff87729","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"expo-tailwind-setup","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34793,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-24T00:28:59Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"15c15c5fc44a697b2f8e6b7e173f52ae10e9b1a2","skill_md_path":"skills/expo-tailwind-setup/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/expo-tailwind-setup"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"expo-tailwind-setup","license":"MIT","description":"Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling"},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/expo-tailwind-setup"},"updatedAt":"2026-04-24T00:50:54.554Z"}}