Automates the setup of Tailwind CSS v4 and NativeWind v5 in Expo applications.
Install
mkdir -p .claude/skills/expo-tailwind-setup && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/1718" && unzip -o skill.zip -d .claude/skills/expo-tailwind-setup && rm skill.zipInstalls to .claude/skills/expo-tailwind-setup
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Framework (OSS). Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal stylingKey capabilities
- →Install Tailwind CSS v4 and NativeWind v5
- →Configure Metro and PostCSS for universal styling
- →Create CSS-enabled component wrappers
- →Define platform-specific theme variables
- →Implement Apple system color support
How it works
It replaces Babel-based configuration with a CSS-first approach using PostCSS and component wrappers that map classNames to native styles.
Inputs & outputs
When to use expo-tailwind-setup
- →Setting up a new Expo project with Tailwind
- →Migrating existing Expo styles to Tailwind CSS
- →Configuring NativeWind v5
About expo-tailwind-setup
Installs and configures Tailwind CSS v4 for Expo projects. It integrates react-native-css and NativeWind v5 to enable standardized, universal styling across mobile components.
Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling
When not to use it
- →When using Babel-based NativeWind configurations
Prerequisites
Limitations
- →Requires manual component wrapping for className support
- →Platform colors require specific media query blocks
How it compares
It eliminates the need for babel.config.js and uses modern CSS-first configuration for universal styling across mobile and web.
Compared to similar skills
expo-tailwind-setup side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| expo-tailwind-setup (this skill) | 3 | 2mo | Review | Intermediate |
| zustand | 113 | 3mo | No flags | Intermediate |
| react | 34 | 3mo | No flags | Intermediate |
| vue-best-practices | 19 | 6mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by expo
View all by expo →You might also like
zustand
lobehub
Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.
react
lobehub
React component development guide. Use when working with React components (.tsx files), creating UI, using @lobehub/ui components, implementing routing, or building frontend features. Triggers on React component creation, modification, layout implementation, or navigation tasks.
vue-best-practices
antfu
MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.
web-games
davila7
Web browser game development principles. Framework selection, WebGPU, optimization, PWA.
react-component-patterns
HoangNguyen0403
Modern React component architecture and composition patterns.
zustand-5
prowler-cloud
Zustand 5 state management patterns. Trigger: When implementing client-side state with Zustand (stores, selectors, persist middleware, slices).