skills.rest
zester4
zester4COMMUNITY
Explore all skills by this author →
GitHub

expo-tailwind-setup

Configures Tailwind CSS v4 with NativeWind v5 and react-native-css in Expo projects.

2|1|Updated Jun 9, 2026
Search Tags:#styling#tailwind css#react native#expo#metro#nativewind#react-native-css
One-click install
npx skills add https://github.com/zester4/zilmate --skill expo-tailwind-setup-zester4
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-tailwind-setup
Source: https://github.com/zester4/zilmate/tree/main/.agents/skills/expo-tailwind-setup
Command: npx skills add https://github.com/zester4/zilmate --skill expo-tailwind-setup-zester4

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tailwindcss, nativewind, react-native-css, @tailwindcss/postcss, tailwind-merge, clsx.

What problem does it solve? Setting up Tailwind CSS v4 in an Expo React Native project involves many breaking changes from NativeWind v4, including new Metro and PostCSS configuration, CSS-first theming, and mandatory component wrappers for className support. This Skill provides the complete, correct setup procedure so styling works across iOS, Android, and Web without trial and error. ## Core Features & Use Cases - Full Installation & Configuration: Installs tailwindcss v4, nativewind v5 preview, react-native-css, and @tailwindcss/postcss, then configures metro.config.js, postcss.config.mjs, and global.css. - CSS Component Wrappers: Provides ready-to-use typed wrappers (View, Text, ScrollView, Pressable, TextInput, Image, Animated) built on useCssElement so className styling works in React Native. - Theming & Platform Styles: Covers @theme custom variables, platform media queries, Apple system colors via platformColor, and the useCSSVariable hook for JS access. - Use Case: You are starting a new Expo app and want utility-first styling. Use this Skill to install dependencies, wire up Metro and PostCSS, create the tw component wrappers, and start writing className-based styles immediately. ## Quick Start Use the expo-tailwind-setup skill to install and configure Tailwind CSS v4 with NativeWind v5 and react-native-css in my Expo project, including the Metro config, global CSS, and typed component wrappers.

Frequently Asked Questions about expo-tailwind-setup

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Tailwind CSS v4 in an Expo project?▼

Install tailwindcss v4, nativewind v5 preview, react-native-css, and @tailwindcss/postcss, then configure metro.config.js with withNativewind, add a postcss.config.mjs, and create a global.css importing tailwindcss layers. No babel.config.js is needed with this stack.

How to use className styling in React Native components?▼

Wrap React Native components with the useCssElement hook from react-native-css, mapping className to the style prop. Create reusable typed wrappers for View, Text, ScrollView, Pressable, TextInput, and Image, then import them instead of the raw React Native components.

Does NativeWind v5 need a babel config?▼

No. With Tailwind v4 and NativeWind v5, configuration is CSS-first and babel.config.js is not required. Remove any nativewind/babel presets and jsxImportSource settings left over from NativeWind v4 setups.

What changed from NativeWind v4 and Tailwind v3 to v5?▼

Key changes include no babel config, the @tailwindcss/postcss plugin replacing the tailwindcss PostCSS plugin, @import statements replacing @tailwind directives, @theme in CSS replacing tailwind.config.js, and mandatory useCssElement wrappers for className support.

Why are Tailwind styles not applying in my Expo app?▼

Check that the global CSS file is imported in your app entry, that components are wrapped with useCssElement rather than used raw, and that metro.config.js applies withNativewind with inlineVariables set to false.

Can I use iOS system colors with Tailwind in Expo?▼

Yes. Define CSS variables using platformColor inside @media ios blocks, with light-dark() fallbacks for web and Android, then register them as Tailwind theme colors via @theme so classes like text-sf-text and bg-sf-bg work.

Related Skills

Explore More Software Engineering Skills→
ricablericable

expo-app-design

Build cross-platform Expo app interfaces with Expo Router and NativeWind styling.

Community
Intermediate
desdat1desdat1

tailwind

Builds cohesive dark-theme UI with Tailwind utility classes.

Community
Basic
truongnattruongnat

design-system-patterns

Implement design tokens, theme switching, and component architecture patterns for design systems.

Community
Intermediate
Selfdb-ioSelfdb-io

tailwind-setup

Integrate Tailwind v4 with NativeWind v5 for Expo apps.

Community
Intermediate