Skip to main content Skills Marketplace Descubre y explora habilidades de IA creadas por la comunidad.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Mostrar detalles del prompt Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/ARareUsername/tbats-dev --skill expo-tailwind-setupEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Descargar Zip Descargando... Más de este repositorio UI/UX design intelligence for web and mobile. Searchable local database with 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Use when designing, building, or reviewing UI: pages, components, color schemes, typography, layout, accessibility, animation, or data visualization.
Security audit, hardening, threat modeling (STRIDE/PASTA), Red/Blue Team, OWASP checks, code review, incident response, and infrastructure security for any project.
Ingeniero de Sistemas de Andru.ia. Diseña, redacta y despliega nuevas habilidades (skills) dentro del repositorio siguiendo el Estándar de Diamante.
Ocupaciones relacionadas SOC
Basado en la clasificación ocupacional SOC
Explorador de archivos
2 archivos name expo-tailwind-setup description Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling risk unknown source https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-tailwind-setup source_repo expo/skills source_type official date_added "2026-07-01T00:00:00.000Z" license MIT license_source https://github.com/expo/skills/blob/main/LICENSE
Tailwind CSS Setup for Expo with react-native-css
When to Use
Use this skill when you need set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling.
This guide covers setting up Tailwind CSS v4 in Expo using react-native-css and NativeWind v5 for universal styling across iOS, Android, and Web.
Overview
This setup uses:
Tailwind CSS v4 - Modern CSS-first configurationreact-native-css - CSS runtime for React NativeNativeWind v5 - Metro transformer for Tailwind in React Native@tailwindcss/postcss - PostCSS plugin for Tailwind v4
Installation
npx expo install tailwindcss@^4 nativewind@5.0.0-preview.2 react-native-css@0.0.0-nightly.5ce6396 @tailwindcss/postcss tailwind-merge clsx
Add resolutions for lightningcss compatibility:
{
"resolutions" : {
"lightningcss" : "1.30.1"
}
}
autoprefixer is not needed in Expo because of lightningcss
postcss is included in expo by default
Configuration Files
Metro Config
Create or update metro.config.js:
const { getDefaultConfig } = require ("expo/metro-config" );
const { withNativewind } = require ("nativewind/metro" );
const config = getDefaultConfig (__dirname);
module .exports = withNativewind
inlineVariables
false
globalClassNamePolyfill
false
PostCSS Config Create postcss.config.mjs:
export default {
plugins : {
"@tailwindcss/postcss" : {},
},
};
Global CSS @import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" ;
@media android {
:root {
--font-mono : monospace;
--font-rounded : normal;
--font-serif : serif;
--font-sans : normal;
}
}
@media ios {
:root {
--font-mono : ui-monospace;
--font-serif : ui-serif;
--font-sans : system-ui;
--font-rounded : ui-rounded;
}
}
IMPORTANT: No Babel Config Needed With Tailwind v4 and NativeWind v5, you do NOT need a babel.config.js for Tailwind. Remove any NativeWind babel presets if present:
CSS Component Wrappers Since react-native-css requires explicit CSS element wrapping, create reusable components:
Main Components (src/tw/index.tsx) import {
useCssElement,
useNativeVariable as useFunctionalVariable,
} from "react-native-css" ;
import { Link as RouterLink } from "expo-router" ;
import Animated from "react-native-reanimated" ;
import React from "react" ;
import {
View as RNView ,
Text as RNText ,
Pressable as RNPressable ,
ScrollView as RNScrollView ,
TouchableHighlight as RNTouchableHighlight ,
TextInput as RNTextInput ,
StyleSheet ,
} from "react-native" ;
export const Link = (
props : React .ComponentProps <typeof RouterLink > & { className?: string }
) => {
return useCssElement (RouterLink , props, { className : "style" });
};
Link .Trigger = RouterLink .Trigger ;
Link .Menu = RouterLink .Menu ;
Link .MenuAction = RouterLink .MenuAction ;
Link .Preview = RouterLink .Preview ;
export const useCSSVariable =
process.env .EXPO_OS !== "web"
? useFunctionalVariable
: (variable : string `var(${variable} )` ;
export type ViewProps = React .ComponentProps <typeof RNView > & {
className ?: string ;
};
export const View = (props : ViewProps return useCssElement (RNView , props, { className : "style" });
};
View .displayName = "CSS(View)" ;
export const Text = (
props : React .ComponentProps <typeof RNText > & { className?: string }
) => {
return useCssElement (RNText , props, { className : "style" });
};
Text .displayName = "CSS(Text)" ;
export const ScrollView = (
props : React .ComponentProps <typeof RNScrollView > & {
className?: string ;
contentContainerClassName?: string ;
}
) => {
return useCssElement (RNScrollView , props, {
className : "style" ,
contentContainerClassName : "contentContainerStyle" ,
});
};
ScrollView .displayName = "CSS(ScrollView)" ;
export const Pressable = (
props : React .ComponentProps <typeof RNPressable > & { className?: string }
) => {
return useCssElement (RNPressable , props, { className : "style" });
};
Pressable .displayName = "CSS(Pressable)" ;
export const TextInput = (
props : React .ComponentProps <typeof RNTextInput > & { className?: string }
) => {
return useCssElement (RNTextInput , props, { className : "style" });
};
TextInput .displayName = "CSS(TextInput)" ;
export const AnimatedScrollView = (
props : React .ComponentProps <typeof Animated .ScrollView > & {
className?: string ;
contentClassName?: string ;
contentContainerClassName?: string ;
}
) => {
return useCssElement (Animated .ScrollView , props, {
className : "style" ,
contentClassName : "contentContainerStyle" ,
contentContainerClassName : "contentContainerStyle" ,
});
};
function XXTouchableHighlight (
props : React .ComponentProps <typeof RNTouchableHighlight >
) {
const { underlayColor, ...style } = StyleSheet .flatten (props.style ) || {};
return (
<RNTouchableHighlight
underlayColor ={underlayColor}
{...props }
style ={style}
/> export const TouchableHighlight = (
props : React .ComponentProps <typeof RNTouchableHighlight >
) => {
return useCssElement (XXTouchableHighlight , props, { className : "style" });
};
TouchableHighlight .displayName = "CSS(TouchableHighlight)" ;
Image Component (src/tw/image.tsx) import { useCssElement } from "react-native-css" ;
import React from "react" ;
import { StyleSheet } from "react-native" ;
import Animated from "react-native-reanimated" ;
import { Image as RNImage } from "expo-image" ;
const AnimatedExpoImage = Animated .createAnimatedComponent (RNImage );
export type ImageProps = React .ComponentProps <typeof Image >;
function CSSImage (props : React .ComponentProps <typeof AnimatedExpoImage >const { objectFit, objectPosition, ...style } =
StyleSheet .flatten (props.style ) || {};
return (
<AnimatedExpoImage
contentFit ={objectFit}
contentPosition ={objectPosition}
{...props }
source ={
typeof props.source === "string" ? { uri: props.source } : props.source
}
// @ts-expect-error: Style is remapped above
style ={style}
/> export const Image = (
props : React .ComponentProps <typeof CSSImage > & { className?: string }
) => {
return useCssElement (CSSImage , props, { className : "style" });
};
Image .displayName = "CSS(Image)" ;
Animated Components (src/tw/animated.tsx) import * as TW from "./index" ;
import RNAnimated from "react-native-reanimated" ;
export const Animated = {
...RNAnimated ,
View : RNAnimated .createAnimatedComponent (TW .View ),
};
Usage Import CSS-wrapped components from your tw directory:
import { View , Text , ScrollView , Image } from "@/tw" ;
export default function MyScreen (return (
<ScrollView className ="flex-1 bg-white" >
<View className ="p-4 gap-4" >
<Text className ="text-xl font-bold text-gray-900" > Hello Tailwind!</Text >
<Image
className ="w-full h-48 rounded-lg object-cover"
source ={{ uri: "https: //example.com /image.jpg " }}
/>
</View >
</ScrollView >
Custom Theme Variables Add custom theme variables in your global.css using @theme:
@layer theme {
@theme {
--font-rounded : "SF Pro Rounded" , sans-serif;
--text-xs--line-height : calc (1em / 0.75 );
--text-sm--line-height : calc (1.25em / 0.875 );
--text-base--line-height : calc (1.5em / 1 );
--leading-tight : 1.25em ;
--leading-snug : 1.375em ;
--leading-normal : 1.5em ;
}
}
Platform-Specific Styles Use platform media queries for platform-specific styling:
@media ios {
:root {
--font-sans : system-ui;
--font-rounded : ui-rounded;
}
}
@media android {
:root {
--font-sans : normal;
--font-rounded : normal;
}
}
Apple System Colors with CSS Variables Create a CSS file for Apple semantic colors:
@layer base {
html {
color-scheme : light;
}
}
:root {
--sf-blue : light-dark (rgb (0 122 255 ), rgb (10 132 255 ));
--sf-green : light-dark (rgb (52 199 89 ), rgb (48 209 89 ));
--sf-red : light-dark (rgb (255 59 48 ), rgb (255 69 58 ));
--sf-gray : light-dark (rgb (142 142 147 ), rgb (142 142 147 ));
--sf-gray-2 : light-dark (rgb (174 174 178 ), rgb (99 99 102 ));
--sf-text : light-dark (rgb (0 0 0 ), rgb (255 255 255 ));
--sf-text-2 : light-dark (rgb (60 60 67 / 0.6 ), rgb (235 235 245 / 0.6 ));
--sf-bg : light-dark (rgb (255 255 255 ), rgb (0 0 0 ));
--sf-bg-2 : light-dark (rgb (242 242 247 ), rgb (28 28 30 ));
}
@media ios {
:root {
--sf-blue : platformColor (systemBlue);
--sf-green : platformColor (systemGreen);
--sf-red : platformColor (systemRed);
--sf-gray : platformColor (systemGray);
--sf-text : platformColor (label);
--sf-text-2 : platformColor (secondaryLabel);
--sf-bg : platformColor (systemBackground);
--sf-bg-2 : platformColor (secondarySystemBackground);
}
}
@layer theme {
@theme {
--color-sf-blue : var (--sf-blue);
--color-sf-green : var (--sf-green);
--color-sf-red : var (--sf-red);
--color-sf-gray : var (--sf-gray);
--color-sf-text : var (--sf-text);
--color-sf-text-2 : var (--sf-text-2 );
--color-sf-bg : var (--sf-bg);
--color-sf-bg-2 : var (--sf-bg-2 );
}
}
<Text className="text-sf-text" >Primary text</Text >
<Text className ="text-sf-text-2" > Secondary text</Text > <View className ="bg-sf-bg" > ...</View >
Using CSS Variables in JavaScript Use the useCSSVariable hook:
import { useCSSVariable } from "@/tw" ;
function MyComponent (const blue = useCSSVariable ("--sf-blue" );
return <View style ={{ borderColor: blue }} />
Key Differences from NativeWind v4 / Tailwind v3
No babel.config.js - Configuration is now CSS-firstPostCSS plugin - Uses @tailwindcss/postcss instead of tailwindcssCSS imports - Use @import "tailwindcss/..." instead of @tailwind directivesTheme config - Use @theme in CSS instead of tailwind.config.jsComponent wrappers - Must wrap components with useCssElement for className supportMetro config - Use withNativewind with different options (inlineVariables: false)
Troubleshooting
Styles not applying
Ensure you have the CSS file imported in your app entry
Check that components are wrapped with useCssElement
Verify Metro config has withNativewind applied
Platform colors not working
Use platformColor() in @media ios blocks
Fall back to light-dark() for web/Android
TypeScript errors Add className to component props:
type Props = React .ComponentProps <typeof RNView > & { className ?: string };
Limitations
Use this skill only when the task clearly matches its upstream product or API scope.
Verify commands, API behavior, pricing, quotas, credentials, and deployment effects against current official documentation before making changes.
Do not treat generated examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.
