Gitsunmin

TIL

TIL
(=Today I Learned)

Native Wind

NativeWind?

NativeWind는 Tailwind CSS의 문법을 React Native에서 사용할 수 있게 해주는 라이브러리입니다.

  • className으로 스타일을 지정
  • tailwind.config.js로 컨테트 커스텀 가능
  • 다크모드, 카스텝 테마, 디자인 시스템 적용 가능
  • 코드가 간결해지고, 스타일 일괄성 유지가 쉽음

기본 사용 예시

import { Text, View } from 'react-native';

export default function App() {
  return (
    <View className="flex-1 justify-center items-center bg-white dark:bg-black">
      <Text className="text-lg font-bold text-black dark:text-white">
        Hello NativeWind!
      </Text>
    </View>
  );
}

카스텝 디자인 시스템 연동

Tailwind의 theme.extend를 통해 Figma에서 출첤한 디자인 토큰을 반영 가능:

// tailwind.config.js
theme: {
  extend: {
    colors: {
      primary: "#007AFF",
      text: "#1A1A1A",
    },
    spacing: {
      s: 8,
      m: 16,
      l: 24,
    },
    borderRadius: {
      md: 8,
      lg: 16,
    },
  },
},

🌙 다크모드 대응

React Native의 useColorScheme()와 NativeWind의 dark: prefix로 쉽게 처리 가능:

<View className="bg-white dark:bg-black">
  <Text className="text-black dark:text-white">다크모드 지원!</Text>
</View>

🔍 도입 시 장점

  • Tailwind에 익스케롤한 팀이라면 진입장법 없음
  • 스타일 일괄성 유지에 유니
  • 빠른 UI 프로토타이핑 가능
  • 디자인 토큰 적용이 쉽음
  • 다크모드, 반응형 클래스도 지원

📌 마무리

NativeWind는 디자인 시스템 적용과 생산성 효율 상에서 매우 효과적인 선택입니다.
성능 이수는 특정 상황에 한정되며, 대부모의 일반적인 사용에서는 큰 문제가 없습니다.
디자인 토큰 기반으로 Figma 연동까지 고려한다면 더욱 강력한 도구가 됩니다.