Repolode
제출하기
nativewind

nativewind/nativewind

빌드 시 컴파일해 React Native 앱에서 Tailwind CSS 유틸리티 클래스를 사용할 수 있게 해주는 스타일링 라이브러리입니다.

GitHub에서 보기웹사이트
스타
8,118
포크
411
열린 이슈
67
마지막 커밋
4일 전

어떤 프로젝트인가요?

NativeWind를 사용하면 React Native 개발자가 Tailwind CSS 유틸리티 클래스로 컴포넌트 스타일을 지정할 수 있습니다. 컴포넌트 라이브러리가 아니라 스타일링 라이브러리이므로 클래스와 스타일 간 매핑을 제공하며, UI 컴포넌트는 직접 만들거나 NativeWind를 기반으로 하는 서드파티 키트를 사용하면 됩니다.

스타일은 앱 빌드 단계에서 Tailwind CSS 컴파일러로 처리되며, 작은 런타임이 기기 방향이나 라이트·다크 모드 변경과 같은 반응형 스타일을 적용합니다. 플랫폼에 따라 적절한 스타일 시스템을 선택합니다. 예를 들어 네이티브에서는 StyleSheet.create를, react-native-web을 사용하는 웹에서는 CSS를 사용합니다.

CSS 변수, 다크 모드, 임의 클래스, 미디어 쿼리, 애니메이션과 트랜지션, 컨테이너 쿼리(스타일 기반 컨테이너 쿼리는 제외), 호환되는 컴포넌트의 hover·focus·active 상태, 그리고 group 구문을 사용한 부모 상태 수정자를 지원합니다.

핵심 기능

  • 01React Native 플랫폼 전반에서 작동하며, 플랫폼별로 적절한 스타일 시스템을 사용합니다.
  • 02Tailwind CSS 컴파일러를 사용해 빌드 시 스타일을 계산합니다.
  • 03다크 모드, 임의 클래스, 미디어 쿼리, CSS 변수를 지원합니다.
  • 04애니메이션, 트랜지션, 컨테이너 쿼리를 지원합니다.
  • 05group 구문을 사용해 부모의 의사 클래스 상태에 따라 자식 요소의 스타일을 지정할 수 있습니다.

활용 사례

  • Tailwind 스타일 클래스를 사용해 iOS, Android, 웹용 React Native 또는 Expo 앱을 빌드합니다.
  • 웹 프로젝트의 Tailwind 작업 방식과 클래스 이름을 모바일 코드베이스에서 재사용합니다.
  • 모바일 앱에 CSS 변수와 다크 모드를 활용한 일관된 테마 시스템을 추가합니다.

빠른 시작

  1. 1

    NativeWind v4.1이 사전 구성된 새 Expo 프로젝트 만들기

    npx rn-new@latest --nativewind
  2. 2

    또는 NativeWind v5(릴리스 후보)로 프로젝트 만들기

    npx rn-new@next --nativewind
  3. 3

    또는 설치 가이드에 따라 기존 프로젝트에 NativeWind 추가하기

사용 전 알아둘 점

  • 버전 5는 아직 릴리스 후보입니다.

포함된 컬렉션

Android 앱 및 휴대폰 도구

토픽

#react-native#tailwind-css#css#styling#react#cross-platform#mobile#nativewind#react-native-web#tailwind

자주 묻는 질문

nativewind은(는) 무엇인가요?
빌드 시 컴파일해 React Native 앱에서 Tailwind CSS 유틸리티 클래스를 사용할 수 있게 해주는 스타일링 라이브러리입니다. NativeWind를 사용하면 React Native 개발자가 Tailwind CSS 유틸리티 클래스로 컴포넌트 스타일을 지정할 수 있습니다. 컴포넌트 라이브러리가 아니라 스타일링 라이브러리이므로 클래스와 스타일 간 매핑을 제공하며, UI 컴포넌트는 직접 만들거나 NativeWind를 기반으로 하는 서드파티 키트를 사용하면 됩니다.
nativewind은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
nativewind은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
nativewind은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. nativewind의 마지막 커밋은 2026년 11월 2일입니다.
nativewind은(는) 어디에 사용할 수 있나요?
Tailwind 스타일 클래스를 사용해 iOS, Android, 웹용 React Native 또는 Expo 앱을 빌드합니다. 웹 프로젝트의 Tailwind 작업 방식과 클래스 이름을 모바일 코드베이스에서 재사용합니다. 모바일 앱에 CSS 변수와 다크 모드를 활용한 일관된 테마 시스템을 추가합니다.
nativewind는 어떻게 설치하나요?
NativeWind v4.1이 사전 구성된 새 Expo 프로젝트 만들기: npx rn-new@latest --nativewind 또는 NativeWind v5(릴리스 후보)로 프로젝트 만들기: npx rn-new@next --nativewind 또는 설치 가이드에 따라 기존 프로젝트에 NativeWind 추가하기
nativewind은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/nativewind/nativewind

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트