Expo Tailwind Styling Setup
Configure Tailwind CSS v4, NativeWind v5, and cross-platform styling for Expo apps.
The material mainly directs local dependency installation and configuration, with no credential theft, covert exfiltration, or destructive defaults. However, it introduces preview/nightly dependencies and omits data-flow disclosure, user confirmation, rollback guidance, and dependency auditing, so points are deducted.
The installation, Metro, PostCSS, CSS, and wrapper paths are fairly complete, but preview/nightly versions reduce reproducibility and no tests are provided. Potential implementation issues include the AnimatedScrollView property mapping and the declaration order of ImageProps, while abnormal-input handling and failure diagnostics are thin; therefore the static score remains low.
The target scenario is clear and covers Tailwind setup for Expo on iOS, Android, and Web. Compatibility boundaries such as Expo SDK, project layout, entry-file imports, and non-fit cases are not sufficiently stated, and trigger conditions are absent. The core function does not require overseas services, although package retrieval may be network-sensitive, so points are deducted.
The skill has readable sections, installation steps, configuration examples, usage examples, and troubleshooting, with version and MIT metadata. The README adds installation, update, source-of-truth, and repository maintenance context, but the skill lacks a changelog, compatibility matrix, explicit maintenance owner, and fuller limitation disclosure, so points are deducted.
It covers the core configuration for Tailwind v4, NativeWind v5, react-native-css, and CSS wrappers and is useful as a reference. However, there is no execution evidence, dependencies are preview versions, examples may need correction, and entry imports, validation commands, and upgrade alternatives are incomplete; users may still need substantial review, so the static score is below the cap.
The files provide concrete commands, configuration, and code that are partly auditable. They contain no committed test suite, CI coverage, or third-party execution evidence for the key path, so independent reproduction is limited and only a small score is justified.
- The installation command uses a NativeWind preview and a react-native-css nightly build; verify compatibility with the target Expo SDK, React Native version, and package manager first.
- Treat the snippets as starting points and run TypeScript, Metro, and iOS/Android/Web checks; specifically review the AnimatedScrollView prop mapping, Image wrapper types, and global.css entry import.
- Dependency installation causes external package downloads and lockfile changes; obtain user approval and preserve existing configuration and lockfiles for rollback.
What does this skill do, and when should you use it?
This skill guides Expo developers through a Tailwind CSS v4 setup using react-native-css and NativeWind v5 for shared iOS, Android, and Web styling. It covers dependency installation, Metro and PostCSS configuration, global CSS, theme variables, platform-specific styles, and Apple semantic colors. It also supplies wrapper examples for CSS-enabled React Native components, images, links, and animations. The guide is aimed at teams adopting Tailwind CSS v4’s CSS-first configuration model.
It instructs the user to install the required packages and pin lightningcss through package.json resolutions; create or update metro.config.js, postcss.config.mjs, and src/global.css; remove obsolete NativeWind Babel configuration; implement useCssElement wrappers for View, Text, ScrollView, Pressable, TextInput, Image, Link, and animated components; define custom theme variables, platform media queries, and Apple system colors; and troubleshoot missing styles, platform colors, and TypeScript className errors.
- An Expo developer building one styled interface for iOS, Android, and Web with Tailwind CSS v4.
- An Expo team migrating from NativeWind v4 or Tailwind CSS v3 to the Tailwind CSS v4 configuration model.
- A React Native project that needs className support and can maintain explicit CSS component wrappers.
- An Expo app that needs CSS variables for iOS semantic colors, light/dark mode, and platform-specific fonts.
- A developer diagnosing Metro, CSS import, platform-color, or className typing issues in an Expo project.
What are this skill's strengths and limitations?
- Covers installation, configuration, component wrappers, and troubleshooting in one guide.
- Targets shared styling across iOS, Android, and Web.
- Clearly explains that Tailwind CSS v4 and NativeWind v5 do not require NativeWind Babel configuration.
- Includes concrete examples for platform fonts, Apple semantic colors, and CSS variables.
- The repository is MIT-licensed and identified in the README as maintained by the Expo team.
- Uses a NativeWind v5 preview release and a react-native-css nightly release, with no stability assessment in the source.
- Requires several custom CSS wrapper components, adding integration and maintenance work.
- Provides no test suite, test results, or verified platform compatibility matrix.
- Does not document an upgrade policy, known limitations, or rollback procedure.
- Covers Tailwind styling setup only, not Expo builds, distribution, or EAS workflows.
How do you install this skill?
From the root of an Expo project, run:
npx expo install tailwindcss@^4 [email protected] [email protected] @tailwindcss/postcss tailwind-merge clsx
Then add this resolution to package.json:
{
"resolutions": {
"lightningcss": "1.30.1"
}
}
Place the skill folder in the skill directory used by the Agent Skills-compatible client. The README documents installation of the full repository with npx skills@latest add expo/skills --skill '*', but does not provide a command that installs only expo-tailwind-setup.
How do you use this skill?
Ask the agent, for example: “Set up Tailwind CSS v4, react-native-css, and NativeWind v5 in this Expo project, including the CSS component wrappers.” The agent should then configure Metro, PostCSS, and global CSS, import the CSS-wrapped components, and use className-based styling. The source does not document a client-specific invocation syntax or automatic execution behavior.
How does this skill compare with similar options?
Compared with NativeWind v4 or Tailwind CSS v3, this guide uses a CSS-first approach: @tailwindcss/postcss, CSS @import statements, and @theme replace the older configuration pattern; components are wrapped with useCssElement, and Metro uses withNativewind with different options.