Использование Tailwind CSS в React Native с помощью NativeWind

Apr 23, 2026 · 4 min read

Использование Tailwind CSS в React Native с помощью NativeWind

Если вы создавали веб-приложения с Tailwind CSS, переход на API StyleSheet в React Native ощущается как шаг назад. Вы теряете utility-first подход, привычные имена классов и скорость разработки. NativeWind устраняет этот разрыв, привнося стилизацию в стиле Tailwind в React Native — без необходимости в браузере или CSS-движке.

В этой статье объясняется, как работает NativeWind, что предоставляет текущая стабильная версия и где находятся реальные ограничения.

Ключевые выводы

NativeWind преобразует имена классов Tailwind CSS в объекты StyleSheet для React Native, предоставляя вам utility-first подход на мобильных платформах без CSS-движка.
NativeWind v4 — это текущая production-ready версия, ориентированная на Tailwind CSS v3, а не v4. Существует preview-версия v5, совместимая с Tailwind v4, но она пока не является версией по умолчанию.
NativeWind использует трансформацию jsxImportSource вместе с интеграцией Babel, что делает className композируемым с утилитами типа clsx и cn.
NativeWind поддерживает тёмный режим, групповые варианты и большинство распространённых утилит Tailwind, но breakpoints, тени и анимации ведут себя по-другому на нативных платформах.

Что на самом деле делает NativeWind

В React Native нет CSS-движка. Каждый стиль должен быть JavaScript-объектом, передаваемым в проп style. NativeWind находится между вашим кодом и этим требованием: вы пишете строки className с использованием синтаксиса Tailwind, а NativeWind компилирует и применяет эти стили для React Native — комбинируя обработку во время сборки с лёгким runtime-слоем для условной стилизации.

Результат выглядит так:

<View className="flex-1 items-center justify-center bg-blue-500">
  <Text className="text-white text-lg font-bold">Hello</Text>
</View>

Это не Tailwind CSS, работающий нативно. Это NativeWind, интерпретирующий словарь классов Tailwind и преобразующий их в стили, понятные React Native. Это различие важно, когда вы сталкиваетесь с ограничениями.

NativeWind v4: стабильный production-путь

По состоянию на начало 2026 года NativeWind v4 является production-ready версией. Она ориентирована на Tailwind CSS v3, а не v4. Существует preview-версия v5, совместимая с Tailwind v4, но она пока не является путём по умолчанию. Если вы начинаете новый проект, используйте NativeWind v4 с tailwindcss@^3.4.

NativeWind v4 представила более предсказуемую архитектуру, построенную на трансформации jsxImportSource, при этом сохраняя интеграцию с Babel. На практике это означает:

Проп className сохраняется на компонентах, а не удаляется во время сборки
Вы можете использовать утилиты типа clsx или cn напрямую с className
Настройка более консистентна в Metro и других инструментах

NativeWind v4 также представила собственный импорт StyleSheet, который расширяет встроенную версию React Native. Он корректно обрабатывает слияние пропов style и className — то, с чем стандартный StyleSheet испытывает трудности при работе с трансформациями и тенями.

Настройка NativeWind с Expo

Expo — наиболее распространённая среда для NativeWind, обеспечивающая наиболее гладкую настройку. Основные шаги:

Установите nativewind, react-native-reanimated, react-native-safe-area-context и tailwindcss@^3.4 как зависимости
Выполните npx tailwindcss init и добавьте nativewind/preset в ваш конфиг Tailwind
Создайте global.css со стандартными директивами Tailwind (@tailwind base;, @tailwind components;, @tailwind utilities;) и импортируйте его в точке входа приложения
Настройте babel.config.js с jsxImportSource: "nativewind" и включите Babel-плагин NativeWind
Оберните ваш конфиг Metro с помощью withNativeWind

Для TypeScript-проектов добавьте файл nativewind-env.d.ts с /// <reference types="nativewind/types" /> для получения корректной поддержки пропа className на нативных компонентах.

Если вы хотите полностью пропустить конфигурацию, npx rn-new --nativewind создаст минимальный Expo-проект с уже настроенным NativeWind.

Тёмный режим, варианты и реальные ограничения

NativeWind v4 поддерживает вариант dark: через хук useColorScheme, который возвращает colorScheme, setColorScheme и toggleColorScheme. Вы применяете стили тёмного режима точно так же, как на вебе:

<Text className="text-gray-900 dark:text-white">Label</Text>

Групповые варианты также работают — Pressable с className="group" может управлять стилями дочерних элементов через group-active: или group-hover:.

Где это отличается от веб-версии Tailwind:

Breakpoints не переносятся напрямую на мобильные экраны. Префиксы sm:, md:, lg: в Tailwind разработаны для ширины viewport, а не для форм-факторов устройств. Для адаптивных мобильных макетов вы часто будете использовать API Dimensions или хук useWindowDimensions из React Native.
Некоторые style-пропы требуют альтернативных API. Например, специфичная для списков стилизация вроде columnWrapperStyle может по-прежнему обрабатываться вне className, в зависимости от компонента.
Тени ведут себя по-другому на нативных платформах. React Native использует платформо-специфичные свойства теней (shadowColor, shadowOffset, shadowOpacity, shadowRadius на iOS и elevation на Android), поэтому результат не эквивалентен CSS box-shadow.
Анимации через utility-классы являются экспериментальными и непоследовательны между iOS и Android. Для чего-либо сложного используйте React Native Reanimated напрямую.

Заключение

NativeWind — это слой трансляции, а не CSS runtime. Он предоставляет вам словарь и workflow Tailwind в контексте React Native, что действительно полезно — особенно для команд, уже владеющих Tailwind. Но он не стирает границу платформы. Вы всё равно будете иногда писать пропы style, обходить нативные ограничения и мыслить в модели компоновки React Native.

Для большинства разработчиков, знакомых с Tailwind, этот компромисс того стоит. Прирост продуктивности от utility-first стилизации в React Native реален, а NativeWind v4 достаточно стабилен для production-использования.

Часто задаваемые вопросы

Да, NativeWind работает с bare React Native проектами. Настройка требует ручной конфигурации Metro bundler с wrapper'ом withNativeWind и обеспечения того, чтобы ваш Babel-конфиг включал настройку jsxImportSource. Expo упрощает этот процесс, но это не жёсткое требование. В bare-проекте вам потребуется самостоятельно обрабатывать линковку нативных модулей.

NativeWind v4 поддерживает кастомные темы, определённые в вашем tailwind.config.js, включая кастомные цвета, отступы, шрифты и breakpoints. Большинство стандартных плагинов Tailwind, генерирующих utility-классы, работают как ожидается. Однако плагины, зависящие от браузерных CSS-функций, таких как псевдоэлементы или CSS Grid, могут не транслироваться в стили React Native.

NativeWind предоставляет платформенные варианты, такие как ios: и android:, которые позволяют применять стили условно в зависимости от запущенной платформы. Например, вы можете написать className с ios:shadow-lg android:elevation-4 для отдельного таргетирования каждой платформы. Это отражает то, как разработчики React Native обычно обрабатывают платформенные различия с использованием Platform API.

NativeWind использует комбинацию компиляции во время сборки и runtime-разрешения стилей. Хотя большая часть стилизации оптимизирована и кэширована, всё ещё существует некоторый runtime-оверхед для обработки условных и динамических классов. В большинстве приложений разница в производительности незначительна, но это не чисто zero-cost трансформация времени компиляции. Производительность hot-reload во время разработки может быть немного медленнее из-за дополнительного этапа обработки.

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.