className="bg-primary text-white
hover:bg-primary/90
dark:bg-primary/80"
// Better spacing
className="px-4 py-2 space-y-2"
// Enhanced typography
className="text-base font-medium leading-relaxed"
// Improved shadows
className="shadow-sm hover:shadow-md"
className="grid grid-cols-2 md:grid-cols-4 gap-4"
className="@container:p-4 @lg:p-6"
className="data-[state=active]:bg-primary
data-[disabled]:opacity-50"
npm create gluestack@alpha
npx gluestack-ui@alpha upgrade
npm install @gluestack-ui/core@^4.1.0-alpha.0 \
@gluestack-ui/utils@^4.1.0-alpha.0 \
uniwind@latest \
tailwindcss@^4.0.0
const { getDefaultConfig } = require('expo/metro-config');
const { withUniwindConfig } = require('uniwind/metro');
const config = getDefaultConfig(__dirname);
module.exports = withUniwindConfig(config, {
cssEntryFile: './global.css',
dtsFile: './uniwind-types.d.ts',
extraThemes: ['dark'],
});
@import "tailwindcss";
@import 'uniwind';
/* ─── UniWind theme variants ─────────────────────────────────────
Switched at runtime via Uniwind.setTheme('light' | 'dark' | 'adaptive').
Variable values match the nativewind config.ts tokens so that the
same Tailwind utility classes (bg-primary, text-foreground, etc.)
produce identical output regardless of styling engine. */
@layer theme {
:root {
@variant light {
--primary: 23 23 23;
--primary-foreground: 250 250 250;
--card: 255 255 255;
--secondary: 245 245 245;
--secondary-foreground: 23 23 23;
--background: 255 255 255;
--popover: 255 255 255;
--popover-foreground: 10 10 10;
--muted: 245 245 245;
--muted-foreground: 115 115 115;
--destructive: 231 0 11;
--foreground: 10 10 10;
--border: 229 229 229;
--input: 229 229 229;
--ring: 212 212 212;
--accent: 247 247 247;
--accent-foreground: 52 52 52;
}
@variant dark {
--primary: 255 245 245;
--primary-foreground: 23 23 23;
--card: 23 23 23;
--secondary: 38 38 38;
--secondary-foreground: 250 250 250;
--background: 10 10 10;
--popover: 23 23 23;
--popover-foreground: 250 250 250;
--muted: 38 38 38;
--muted-foreground: 161 161 161;
--destructive: 255 100 103;
--foreground: 250 250 250;
--border: 46 46 46;
--input: 46 46 46;
--accent: 38 38 38;
--accent-foreground: 250 250 250;
--ring: 115 115 115;
}
}
}
/* ─── Tailwind v4 color mappings ─────────────────────────────────
Maps the theme CSS variables above to Tailwind color utilities.
bg-primary → rgb(var(--primary)), text-foreground → rgb(var(--foreground)), etc. */
@theme inline {
--color-primary: rgb(var(--primary));
--color-primary-foreground: rgb(var(--primary-foreground));
--color-card: rgb(var(--card));
--color-secondary: rgb(var(--secondary));
--color-secondary-foreground: rgb(var(--secondary-foreground));
--color-background: rgb(var(--background));
--color-popover: rgb(var(--popover));
--color-popover-foreground: rgb(var(--popover-foreground));
--color-muted: rgb(var(--muted));
--color-muted-foreground: rgb(var(--muted-foreground));
--color-destructive: rgb(var(--destructive));
--color-foreground: rgb(var(--foreground));
--color-border: rgb(var(--border));
--color-input: rgb(var(--input));
--color-ring: rgb(var(--ring));
--color-accent: rgb(var(--accent));
--color-accent-foreground: rgb(var(--accent-foreground));
}
// Before (v4.0 with cssInterop)
import { cssInterop } from 'nativewind';
const _UIIcon = createIcon({...});
cssInterop(_UIIcon, { className: 'style' });
export const UIIcon = _UIIcon;
// After (v4.1 with Uniwind)
import { withUniwind } from 'uniwind';
const _UIIcon = createIcon({...});
export const UIIcon = withUniwind(_UIIcon);
# You can safely remove this file
rm tailwind.config.js
❌ Invalid utility class 'bg-primry' in Button component
Did you mean 'bg-primary'?
src/components/Button.tsx:12:15npx uniwind inspect src/components/Button.tsx
npm create gluestack@alpha
npx gluestack-ui@alpha upgrade