expo-tailwind-setup
Tailwind CSS v4 in Expo einrichten
Expo-Entwickler haben Schwierigkeiten bei der Konfiguration von Tailwind CSS v4 für plattformübergreifendes Styling. Diese Skill bietet vollständige Einrichtungsanweisungen für react-native-css und NativeWind v5 und ermöglicht universelles Styling für iOS, Android und Web.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"expo-tailwind-setup" 사용 중입니다. Set up Tailwind CSS v4 in Expo with NativeWind v5
예상 결과:
- 1. Installiere Abhängigkeiten: npx expo install tailwindcss@^4 nativewind@5.0.0-preview.2 react-native-css@0.0.0-nightly.5ce6396 @tailwindcss/postcss tailwind-merge clsx
- 2. Füge lightningcss-Auflösung in package.json hinzu
- 3. Konfiguriere metro.config.js mit withNativeWind Transformer
- 4. Erstelle postcss.config.mjs mit @tailwindcss/postcss Plugin
- 5. Erstelle src/global.css mit Tailwind-Imports
- 6. Erstelle CSS-umschlossene Komponenten mit useCssElement Hook
"expo-tailwind-setup" 사용 중입니다. How do I use CSS variables in my components?
예상 결과:
- Importiere den useCSSVariable Hook aus deinen tw-Komponenten:
- import { useCSSVariable } from '@/tw';
- Verwende in deiner Komponente:
- const blue = useCSSVariable('--sf-blue');
- return <View style={{ borderColor: blue }} />;
보안 감사
안전Documentation-only skill containing setup instructions for Tailwind CSS v4 in Expo. All 65 static findings are false positives: backticks are markdown code blocks, URL is example image, environment access is platform detection. No executable code or credential access.
품질 점수
만들 수 있는 것
Neue Expo-Projekteinrichtung
Tailwind CSS v4 zu einem neuen Expo-Projekt mit der neuesten NativeWind v5 und react-native-css für plattformübergreifendes Styling hinzufügen.
Plattformspezifisches Styling
Plattformspezifische Schriftarten und Farben mit CSS Media Queries und CSS-Variablen für iOS, Android und Web implementieren.
Migration von NativeWind v4
Die wichtigsten Unterschiede zwischen NativeWind v4 und v5 verstehen, einschließlich der Entfernung der Babel-Konfiguration und der neuen CSS-first-Konfiguration.
이 프롬프트를 사용해 보세요
Richte Tailwind CSS v4 in meinem Expo-Projekt mit react-native-css und NativeWind v5 ein. Enthält Installationsschritte und Konfigurationsdateien.
Konfiguriere meine Expo-App mit Tailwind CSS v4: Richte Metro-Konfiguration, PostCSS-Konfiguration, globale CSS-Datei und CSS-umschlossene View-, Text-, Pressable- und Image-Komponenten ein.
Plattformspezifisches Styling zu meiner Expo-App hinzufügen. Erstelle CSS-Variablen für iOS-Systemfarben und Android-Plattformfarben mit Light-Dark-Fallback für Web.
Definiere benutzerdefinierte Theme-Variablen in meiner global.css-Datei für benutzerdefinierte Schriftarten und Farben. Zeige, wie CSS-Variablen in JavaScript-Komponenten mit dem useCSSVariable-Hook verwendet werden.
모범 사례
- Setze inlineVariables: false in der Metro-Konfiguration, um PlatformColor in CSS-Variablen nicht zu zerstören
- Verwende Plattform-Media Queries (@media ios/android) für plattformspezifische Schriftart- und Farbhandhabung
- Umschließe React Native-Komponenten mit useCssElement, um className-Unterstützung zu ermöglichen
피하기
- Erstelle KEINE babel.config.js mit NativeWind-Presets für Tailwind v4 - die Konfiguration ist jetzt CSS-first
- Verwende KEIN autoprefixer - lightningcss in Expo handhabt Vendor-Präfixe automatisch
- Überspringe NICHT das Erstellen von CSS-umschlossenen Komponenten - className funktioniert nicht ohne useCssElement