expo/expo-tailwind-setup

expo-tailwind-setup은(는) 무엇을 하나요?

Expo에서 react-native-css와 NativeWind v5를 사용하여 Tailwind CSS v4를 설정하여 범용 스타일링을 적용합니다.

개요

이 스킬은 Expo 프로젝트에 Tailwind CSS v4를 통합하는 과정을 안내합니다. Tailwind CSS는 유틸리티 우선의 CSS 프레임워크로, 미리 정의된 클래스를 사용하여 빠르고 일관된 스타일링을 제공합니다. react-native-css와 NativeWind v5는 이러한 기능을 React Native 환경으로 확장하여 네이티브 앱에서도 동일한 스타일링 접근 방식을 사용할 수 있게 합니다.

설정 단계

1. 패키지 설치

   npx expo install nativewind tailwindcss react-native-css
   

2. 설정 파일 생성

   프로젝트 루트에 tailwind.config.js 파일을 생성합니다.

   // tailwind.config.js
   module.exports = {
     content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
     presets: [require("nativewind/preset")],
     theme: {
       extend: {},
     },
     plugins: [],
   };
   

3. babel.config.js 업데이트

   babel.config.js에 NativeWind 플러그인을 추가합니다.

   // babel.config.js
   module.exports = function (api) {
     api.cache(true);
     return {
       presets: [
         ["babel-preset-expo", { jsxImportSource: "nativewind" }],
         "nativewind/babel",
       ],
     };
   };
   

4. 메트로 설정

   metro.config.js 파일을 생성하거나 업데이트하여 CSS를 지원하도록 설정합니다.

   // metro.config.js
   const { getDefaultConfig } = require("expo/metro-config");
   const { withNativeWind } = require("nativewind/metro");
   
   const config = getDefaultConfig(__dirname);
   
   module.exports = withNativeWind(config, { input: "./global.css" });
   

5. 글로벌 CSS 파일 생성

   global.css 파일을 생성하고 Tailwind 지시어를 추가합니다.

   /* global.css */
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

6. 앱 루트에서 CSS 가져오기

   앱의 진입점(app/_layout.tsx 또는 App.tsx)에서 global.css를 가져옵니다.

   // app/_layout.tsx
   import "../global.css";
   

7. 사용 예제

   이제 Tailwind 클래스를 컴포넌트에서 직접 사용할 수 있습니다.

   import { Text, View } from "react-native";
   
   export default function Home() {
     return (
       <View className="flex-1 items-center justify-center bg-white">
         <Text className="text-3xl font-bold text-blue-500">
           Hello, Tailwind!
         </Text>
       </View>
     );
   }
   

지원 플랫폼

• iOS
• Android
• Web

참고 사항

• Tailwind CSS v4는 v3와 문법이 다를 수 있으므로 공식 문서를 참조하세요.
• NativeWind v5는 React Native의 스타일 시스템과 완전히 호환됩니다.
• react-native-css는 CSS를 네이티브 스타일로 변환하는 데 사용됩니다.