skills.rest
justincourses
justincoursesCOMMUNITY
Explore all skills by this author →
Website𝕏@interjcGitHub

tailwind-setup

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

2|2|Updated Oct 28, 2024
Search Tags:#tailwind#react-native#expo#metro#nativewind#postcss
One-click install
npx skills add https://github.com/justincourses/static-page --skill tailwind-setup-justincourses
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-setup
Source: https://github.com/justincourses/static-page/tree/main/expo-quick-start/.opencode/skill/tailwind-setup
Command: npx skills add https://github.com/justincourses/static-page --skill tailwind-setup-justincourses

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tailwind CSS setup in Expo projects is complex and repetitive; this Skill provides a guided, config-driven approach to integrate Tailwind v4 with react-native-css and NativeWind v5 for universal styling across iOS, Android, and Web.

Core Features & Use Cases

  • Unified styling across platforms: Apply Tailwind utility classes to React Native and web components in Expo projects.
  • Config-driven setup: Streamlines Metro, PostCSS, and CSS wrapper configurations, plus global styles for consistency.
  • Use Case: A developer creates a single design system that works identically on mobile and web with minimal custom CSS.

Quick Start

Install and configure Tailwind v4 with NativeWind v5 and react-native-css in your Expo project to enable cross-platform styling.

Frequently Asked Questions about 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 an Expo project requires configuring NativeWind v5 and react-native-css alongside Metro and PostCSS to enable unified utility-class styling across iOS, Android, and Web.

Does NativeWind v5 work with Tailwind v4 in Expo?▼

Yes, NativeWind v5 integrates with Tailwind v4 in Expo by applying a config-driven setup that connects PostCSS and Metro configurations to bridge web styling utilities with React Native components.

Can I use the same Tailwind styles for React Native and web targets?▼

You can apply identical Tailwind utility classes to React Native and web components within Expo projects, establishing a single design system that works consistently across mobile and web platforms with minimal custom CSS.

What is the best way to configure Metro and PostCSS for NativeWind?▼

The optimal approach to configure Metro and PostCSS for NativeWind involves using a config-driven setup that streamlines the necessary wrapper configurations and global styles for Tailwind v4 integration in Expo.

Why does my Tailwind styling not apply correctly in Expo?▼

Tailwind styling often fails to apply in Expo when Metro, PostCSS, or global CSS wrapper configurations are incomplete, making a guided setup necessary to properly connect react-native-css with NativeWind v5.

Related Skills

Explore More Software Engineering Skills→
FutureAtomsFutureAtoms
1

react-native-2026-expo-dev-workflow

Guide React Native Expo SDK 54 development builds and debugging with DevTools.

Community
Advanced
imkdwimkdw
1

Frontend CSS

Apply Tailwind CSS utility classes with custom design tokens and dark mode.

Community
Intermediate
addisualemuaddisualemu

expo-ui-agent

Generate and modify Expo screens and UI components with NativeWind styling.

Community
Intermediate
DexploarerDexploarer
6

react-native-component-generator

Generate cross-platform React Native components with TypeScript and platform-specific code.

Community
Advanced