skills.rest
gmackie
gmackieCOMMUNITY
Explore all skills by this author →
Website𝕏@grahammackieGitHub

expo-tailwind-setup

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

Updated Mar 27, 2026
Search Tags:#styling#React Native#mobile#Expo#tailwind css#NativeWind#metro
One-click install
npx skills add https://github.com/gmackie/agent-skills --skill expo-tailwind-setup-gmackie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-tailwind-setup
Source: https://github.com/gmackie/agent-skills/tree/main/skills/expo-tailwind-setup
Command: npx skills add https://github.com/gmackie/agent-skills --skill expo-tailwind-setup-gmackie

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 in an Expo React Native project involves coordinating Metro, PostCSS, global CSS, and component wrappers, and the v4/v5 toolchain differs significantly from older NativeWind setups, leading to misconfiguration and broken styles. ## Core Features & Use Cases - Complete toolchain configuration: Installs and wires up Tailwind CSS v4, NativeWind v5, react-native-css, Metro, and PostCSS with the correct options such as inlineVariables disabled. - CSS-enabled component wrappers: Provides typed wrapper components (View, Text, ScrollView, Image, Pressable, and more) built on useCssElement so className styling works across iOS, Android, and Web. - Theming and platform styling: Covers @theme custom variables, platform media queries, Apple system colors via platformColor, and the useCSSVariable hook for JavaScript access. - Use Case: You are starting a new Expo app and want universal Tailwind styling. Use this Skill to install dependencies, generate metro.config.js and postcss.config.mjs, create global.css, and scaffold the tw component directory in one pass. ## Quick Start Use the expo-tailwind-setup skill to configure Tailwind CSS v4 with NativeWind v5 and react-native-css in my Expo project, including the Metro and PostCSS configs and the CSS-wrapped components.

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 in an Expo React Native project?▼

Install tailwindcss v4, nativewind v5 preview, react-native-css, and @tailwindcss/postcss via npx expo install, then configure Metro with withNativewind, add a PostCSS config, and create a global.css importing the Tailwind layers. Wrap components with useCssElement to enable className support.

What is the difference between NativeWind v5 and NativeWind v4 setup?▼

NativeWind v5 with Tailwind v4 removes the babel.config.js requirement and uses CSS-first configuration with @import statements and @theme blocks instead of tailwind.config.js. It also requires @tailwindcss/postcss and explicit component wrapping via useCssElement from react-native-css.

Does Tailwind v4 in Expo need a babel config?▼

No, Tailwind CSS v4 with NativeWind v5 does not need a babel.config.js. You should remove any NativeWind babel presets, since configuration is now handled through CSS imports, PostCSS, and the Metro withNativewind wrapper.

Why are my Tailwind styles not applying in Expo?▼

Styles fail to apply when the global CSS file is not imported in the app entry, components are not wrapped with useCssElement, or the Metro config is missing withNativewind. Verify all three, and ensure inlineVariables is set to false in the Metro options.

Can I use iOS system colors with Tailwind in React Native?▼

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

Related Skills

Explore More Software Engineering Skills→
cometchatcometchat
74

cometchat-native-expo-patterns

Configure CometChat integration patterns for Expo managed workflow projects.

Official
Advanced
carlos3gcarlos3g
2

expo-deployment

Automate Expo app deployment to iOS, Android, web, and API routes with EAS.

Community
Intermediate
EdgeHuntEdgeHunt

ck:ui-styling

Streamline React UI styling with shadcn/ui and Tailwind CSS design systems.

Official
Advanced
Alejandro05-afkAlejandro05-afk

expo-mobile-ui

Generate Expo/React Native mobile UI code with NativeWind, Tamagui, or StyleSheet.

Community
Intermediate