UI
NativeWind
Pre-configured Tailwind CSS for React Native with Metro bundler integration and TypeScript support.
Supported frameworks
Dependencies
What create-faster adds
Files added:
babel.config.js # Babel presets that compile className
metro.config.js # Metro bundler with NativeWind transformer
tailwind.config.js # Tailwind config with NativeWind preset
nativewind-env.d.ts # TypeScript types for className prop
src/styles/globals.css # Tailwind directives entry pointbabel.config.js
className is compiled by the NativeWind Babel preset, with the JSX import source of babel-preset-expo pointed at NativeWind:
module.exports = (api) => {
api.cache(true);
return {
presets: [['babel-preset-expo', { jsxImportSource: 'nativewind' }], 'nativewind/babel'],
};
};react-native-css-interop, babel-preset-expo and @babel/plugin-transform-react-jsx are listed as direct dependencies because NativeWind resolves them from the app root, which isolated installs (the default of bun and pnpm workspaces) do not expose through nativewind alone.
metro.config.js
Metro bundler configured with NativeWind:
const { getDefaultConfig } = require('expo/metro-config');
const { withNativeWind } = require('nativewind/metro');
const config = getDefaultConfig(__dirname);
module.exports = withNativeWind(config, { input: './src/styles/globals.css' });tailwind.config.js
Tailwind CSS configured with NativeWind preset:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
presets: [require('nativewind/preset')],
theme: {
extend: {},
},
plugins: [],
};