skills.rest
nickcorin
nickcorinCOMMUNITY
Explore all skills by this author →
𝕏@maxxedgoofGitHub

expo-tailwind-setup

Automate Tailwind CSS v4 and NativeWind v5 setup in Expo projects.

2|Updated Feb 27, 2020
Search Tags:#tailwind#react-native#expo#metro#nativewind#postcss
One-click install
npx skills add https://github.com/nickcorin/dotfiles --skill expo-tailwind-setup-nickcorin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-tailwind-setup
Source: https://github.com/nickcorin/dotfiles/tree/main/dot_config/opencode/skill/expo-tailwind-setup
Command: npx skills add https://github.com/nickcorin/dotfiles --skill expo-tailwind-setup-nickcorin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tailwind CSS setup in Expo projects to provide a universal styling system across iOS, Android, and Web.

Core Features & Use Cases

  • Tailwind v4 integration with Expo for consistent design tokens
  • NativeWind v5 and react-native-css for React Native styling with Tailwind classes
  • Metro config, PostCSS config, and global CSS setup to streamline styling across platforms
  • Platform-specific fonts and a reusable component wrapper approach for CSS-in-React-Native

Quick Start

Install Tailwind CSS v4, NativeWind v5, and react-native-css in your Expo project, update metro.config.js and postcss.config.mjs, create a global CSS with platform-specific fonts, and start applying Tailwind classes in your 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 project?▼

Tailwind CSS in an Expo project requires installing Tailwind v4, NativeWind v5, and react-native-css, then updating Metro and PostCSS configurations. This enables universal styling across iOS, Android, and Web.

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

NativeWind v5 works with Tailwind v4 in React Native to provide CSS-like utility classes. It integrates with react-native-css to enable a cohesive design system and platform-specific fonts across your Expo application.

What's the best way to configure Metro and PostCSS for universal Expo styling?▼

The best way to configure Metro and PostCSS for universal Expo styling is by customizing metro.config.js and postcss.config.mjs. This setup pairs NativeWind v5 with a global CSS baseline to streamline styling across platforms.

Can I use platform-specific fonts with Tailwind classes in Expo?▼

You can use platform-specific fonts with Tailwind classes in Expo by defining them within a global CSS baseline. This approach uses NativeWind and react-native-css to apply distinct typographic styles across iOS, Android, and Web.

Why do I need react-native-css for Tailwind integration?▼

You need react-native-css for Tailwind integration because it bridges Tailwind v4 utility classes with React Native components. Alongside NativeWind v5, it enables a reusable component wrapper approach for CSS-in-React-Native.

Related Skills

Explore More Software Engineering Skills→
imkdwimkdw
1

Frontend CSS

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

Community
Intermediate
paopp2paopp2

tailwindcss

Apply Tailwind CSS utility classes for responsive, themed UI styling.

Community
Intermediate
sao-codingsao-coding

expo-tailwind-setup

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

Community
Advanced
wfvuewfvue
3

tailwindcss

Apply Tailwind CSS v4 utilities with Vite plugin integration for responsive and dark mode styling.

Community
Intermediate