skills.rest
Liinkiing
LiinkiingCOMMUNITY
Explore all skills by this author →
GitHub

expo-tailwind-setup

Configure Expo projects with Tailwind CSS v4, NativeWind v5, and react-native-css.

6|Updated Jan 24, 2025
Search Tags:#css#tailwind#react-native#expo#nativewind#postcss
One-click install
npx skills add https://github.com/Liinkiing/larastack --skill expo-tailwind-setup-liinkiing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-tailwind-setup
Source: https://github.com/Liinkiing/larastack/tree/main/.agents/skills/expo-tailwind-setup
Command: npx skills add https://github.com/Liinkiing/larastack --skill expo-tailwind-setup-liinkiing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Expo apps often struggle to maintain consistent, scalable styling across iOS, Android, and web. This Skill wires Tailwind CSS v4 with NativeWind v5 and react-native-css to give you a unified, utility-first styling approach in React Native code.

Core Features & Use Cases

  • Tailwind v4 integration across Expo, RN, and web via NativeWind.
  • Unified runtime styling using react-native-css to apply Tailwind utilities in RN components.
  • No Babel config needed; CSS-first workflow with PostCSS plugin.
  • Rapid cross-platform prototyping: iterate typography, spacing, and theming with Tailwind utilities across platforms.

Quick Start

Follow these steps to bootstrap the setup in a new or existing Expo project:

  • Install required dependencies: npx expo install tailwindcss@^4 [email protected] [email protected] @tailwindcss/postcss
  • Create or update metro.config.js to integrate NativeWind with inlineVariables: false and globalClassNamePolyfill: false
  • Create postcss.config.mjs with the Tailwind plugin configured
  • Create a global CSS file (e.g., src/global.css) importing Tailwind layers and platform-specific font variables
  • Remove any unused babel.config.js if present; the setup does not require Babel presets

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 project?▼

Setting up Tailwind CSS in Expo requires installing tailwindcss, nativewind, and react-native-css, then configuring Metro and PostCSS to enable utility-first styling across iOS, Android, and web.

Does Tailwind CSS v4 work with NativeWind in React Native?▼

Tailwind CSS v4 works with NativeWind v5 in React Native by using a CSS-first workflow with the PostCSS plugin and react-native-css, eliminating the need for Babel config.

Do I need Babel config to run NativeWind v5 in Expo?▼

You do not need Babel config to run NativeWind v5 in Expo; the setup uses a CSS-first workflow with PostCSS instead, allowing you to remove existing babel.config.js files.

What's the best way to style Expo apps consistently across iOS, Android, and web?▼

Wiring Tailwind CSS v4 with NativeWind v5 is the best way to style Expo apps consistently across iOS, Android, and web, applying unified utility-based styling directly in React Native components.

Why is my Tailwind CSS not working in my Expo Metro bundler?▼

Tailwind CSS fails in Expo Metro when metro.config.js lacks NativeWind integration with inlineVariables disabled, or when postcss.config.mjs is missing the Tailwind plugin configuration.

Related Skills

Explore More Software Engineering Skills→
sofia-municipalitysofia-municipality
9

expo-tailwind-setup

Configures Expo projects with Tailwind CSS v4 using metro and postcss configs.

Official
Advanced
lexand-devlexand-dev

expo-tailwind-setup

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

Community
Intermediate
dcoondcoon

expo-tailwind-setup

Automate Tailwind CSS v4 setup in Expo apps with NativeWind and PostCSS.

Community
Advanced
tenequmtenequm
32

styling-with-tailwind

Apply Tailwind CSS utility classes and shadcn/ui patterns to style React interfaces.

Community
Intermediate