Nitrowind 1.0 beta — Tailwind CSS v4 at native speed

Nitrowind 1.0 beta is here. It brings the Tailwind CSS v4 workflow to React Native while moving runtime-dependent style updates into a native C++ engine.

Instead of resolving every theme, state, or environment change again on the JavaScript thread, Nitrowind compiles CSS and class candidates ahead of time. Its native dependency graph can then update linked Fabric nodes where the change happens.

Why Nitrowind exists

React Native styling is expressive, but advanced CSS workflows often require JavaScript work, custom wrappers, or one-off native implementations. Nitrowind is designed around a different boundary:

• Tailwind CSS v4 remains the authoring language.
• Metro compiles utilities and plain CSS before the app runs.
• A shared C++ registry tracks style rules and runtime dependencies.
• iOS and Android apply supported paint, layout, and interaction updates natively.
• Web keeps standards-based CSS behavior as the fallback.

The result is a familiar utility-first workflow without turning the JavaScript thread into a styling engine.

Install Nitrowind 1.0 beta

yarn add @nitrofoundation/nitrowind@1.0.0-beta.0 @nitrofoundation/nitrocss@1.0.0-beta.0 tailwindcss react-native-nitro-modules

const { getDefaultConfig } = require('expo/metro-config');
const { withNitrowindMetroConfig } = require('@nitrofoundation/nitrowind/metro');

module.exports = withNitrowindMetroConfig(getDefaultConfig(__dirname), {
  input: './global.css',
});

@import 'tailwindcss';

@theme {
  --color-brand: oklch(0.72 0.11 178);
  --color-surface: #ffffff;
  --color-on-surface: #111827;
}

.dark {
  --color-surface: #09090b;
  --color-on-surface: #f9fafb;
}

import './global.css';
import { NitrowindProvider, Text, View } from '@nitrofoundation/nitrowind';

export default function App() {
  return (
    <NitrowindProvider>
      <View className="flex-1 items-center justify-center bg-surface pt-safe">
        <Text className="text-xl font-bold text-brand">Hello Nitrowind</Text>
      </View>
    </NitrowindProvider>
  );
}

cd ios && pod install

For troubleshooting and framework-specific details, use the complete installation guide.

Features supported in 1.0 beta

Native runtime and adaptive styling

• Light, dark, and named themes with native dependency updates
• Color-scheme, dimensions, orientation, RTL, and font-scale variants
• Safe-area utilities for padding, margin, position, and sizing
• Interactive states and parent group-state propagation
• Responsive utilities and width, height, named, and custom container queries

Native paint and effects

• Background images with cover, contain, repeat, stretch, and focal positioning
• Linear, radial, and conic gradients, including arbitrary values and gradient borders
• Display P3 wide-gamut colors and native semantic colors
• URL and gradient masks
• Geometric clip paths
• Box shadows, text shadows, transforms, filters, and backdrop filters where supported

Motion and component integration

• CSS keyframes and utility animations such as animate-spin, animate-bounce, and animate-pulse
• Entering, exiting, and layout animation helpers through the optional Reanimated integration
• Native scroll-driven animation timelines without a JavaScript onScroll loop
• Class-aware View, Text, image, pressable, and scrollable primitives
• react-native-svg paint primitives
• Native prop remapping for component-specific host properties

See the platform compatibility matrix for the exact iOS, Android, and web boundaries of every feature.

What moves to native

Nitrowind does not claim that JavaScript disappears from React Native. Components, application state, and event handlers remain yours. The important difference is what happens after a supported style dependency has been registered.

Theme tokens, runtime state, safe-area values, dimensions, container sizes, and scroll timelines can notify the native dependency graph. Nitrowind can update the affected nodes without asking JavaScript to resolve the complete style again.

That boundary matters most in interfaces that respond continuously: adaptive themes, interactive groups, responsive containers, and scroll-driven motion.

Help shape the stable release

The 1.0 beta is an invitation to test Nitrowind in real applications. Useful contributions include minimal reproductions, platform compatibility reports, documentation improvements, compiler fixtures, and native performance traces.

Nitrowind is open source under the MIT license. Start with the repository, read the documentation, or open an issue with a focused reproduction.

This release was created and is maintained by Ashwith Joylan.