Configuration

Nativewind v5 uses Tailwind CSS v4, which introduces a CSS-first configuration model. Instead of a tailwind.config.js file, you configure your project directly in CSS.

CSS Setup

Your main CSS file should import Tailwind's layers and the Nativewind theme:

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";
 
@import "nativewind/theme";

The nativewind/theme import provides:

• Elevation scale (--elevation-xs through --elevation-2xl)
• Platform-specific font families (System/Georgia/Menlo on iOS, system defaults on Android)
• Custom utilities (elevation-*, tint-*, ripple-*, corner-*, color-*)
• Custom variants (ios:, android:, native:, web:, tv:)
• A leading-* override for unit-less line-height values
• Safe area utilities via tailwindcss-safe-area

Metro Configuration

Configure Metro using withNativewind in your Metro config:

const { getDefaultConfig } = require("expo/metro-config");
const { withNativewind } = require("nativewind/metro");
 
const config = getDefaultConfig(__dirname);
 
module.exports = withNativewind(config);

See the withNativewind API reference for available options.

Babel Configuration

The Nativewind import rewrite plugin is applied by the Metro integration. Keep babel-preset-expo and unrelated Babel plugins. Remove the v4 nativewind/babel preset and Nativewind jsxImportSource setting.

Optional: tailwind.config.js

Tailwind CSS v4 still supports a JavaScript config file for advanced use cases. Reference it with @config:

@config "./tailwind.config.js";

However, most configuration can be done directly in CSS using @theme, @utility, and @custom-variant. See the Theme page for details.

Content Sources

Tailwind CSS v4 automatically detects your source files. You can explicitly configure content sources using @source:

@source "../components/**/*.tsx";
@source "../screens/**/*.tsx";