Transform shadcn/tweakcn themes for NativeWind - Convert CSS variables to static Tailwind configs
npm install nativewind-cnTransform shadcn/tweakcn global.css CSS variables into React Native NativeWind-compatible Tailwind config. Parses :root and .dark blocks, outputs static values (no var() calls), and optionally generates a type-safe Colors.ts for inline styling.
> Note: This is an independent tool and is not affiliated with or endorsed by NativeWind. It is designed to help developers convert shadcn/ui and tweakcn themes for use with NativeWind in React Native projects.
shadcn/ui and tweakcn provide beautiful design systems using CSS variables:
``css`
:root {
--background: 0 0% 100%;
--foreground: 222.2 47.4% 11.2%;
--primary: 221.2 83.2% 53.3%;
}
These are used in Tailwind with var() functions:
`js`
colors: {
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))'
}
But React Native's NativeWind doesn't support var() calls - it needs static values.
This tool automatically converts shadcn/tweakcn's global.css into React Native-compatible formats:
Input (global.css from shadcn/tweakcn):
`css`
:root {
--background: 0 0% 100%;
--primary: 221.2 83.2% 53.3%;
}
.dark {
--background: 222.2 84% 4.9%;
}
Output (tailwind.config.js):
`js`
colors: {
background: 'hsl(0 0% 100%)',
primary: 'hsl(221.2 83.2% 53.3%)',
'background-dark': 'hsl(222.2 84% 4.9%)'
}
Bonus: Type-safe Colors.ts for inline styling:
`ts`
export const Colors = {
light: { background: "hsl(0 0% 100%)" },
dark: { background: "hsl(222.2 84% 4.9%)" },
};
- Building cross-platform apps (Next.js + React Native) with unified design tokens
- Using shadcn/ui or tweakcn themes and want the same colors in React Native
- Maintaining design system consistency across web and mobile
- Avoiding manual copy-paste of 20-30 color variables every theme update
The easiest way to get a global.css file is using tweakcn - a visual theme builder:
1. Visit tweakcn.com
2. Customize your theme with the visual editor
3. Download or copy/paste the generated global.css content
Alternatively, you can generate it with shadcn/ui:
`bash`
npx shadcn@latest init
Typical file locations:
- Next.js: src/app/globals.css or app/globals.csssrc/index.css
- Vite: or src/styles/globals.css
You can also browse ready-made themes at shadcn themes.
`bash`
npm install -g nativewind-cn
`bash`
nativewind-cn --in ./global.css --out ./
Generates tailwind.config.js in the current directory.
`bash`
nativewind-cn --in ./global.css --out ./ --colors
Generates both tailwind.config.js and colors.ts.
`bash`
nativewind-cn \
--in ./styles/theme.css \
--tailwind-path ./tailwind.config.js \
--colors-path ./src/constants/Colors.ts \
--colors
`bash`
nativewind-cn --in ./global.css --format hex
Options: keep (default), hex, rgb, hsl
`bash`
nativewind-cn \
--in ./global.css \
--content "./app//.{js,jsx,ts,tsx};./components//.tsx"
Use semicolons (;) to separate multiple globs.
| Option | Description | Default |
| ---------------------------- | ----------------------------------------- | ------------------------------------------------------- |
| --in | Input CSS file (required) | - |--out
| | Output directory | Current directory |--format
| | Color format: keep, hex, rgb, hsl | keep |--colors
| | Generate colors.ts file | false |--colors-path
| | Path for colors.ts | |--tailwind-path
| | Path for Tailwind config | |--content
| | Semicolon-separated content globs | ./app//.{js,jsx,ts,tsx};./src//.{js,jsx,ts,tsx} |--dark-selector
| | Dark mode CSS selector | .dark |--force
| | Overwrite existing files | false |
`css
:root {
--background: #ffffff;
--primary: #f59e0b;
--card-foreground: #0a0a0a;
--chart-1: #f59e0b;
--radius: 0.75rem;
--font-sans: "Inter", sans-serif;
}
.dark {
--background: #0a0a0a;
--primary: #fbbf24;
--chart-1: #fbbf24;
}
`
`js`
/* @type {import('tailwindcss').Config} /
module.exports = {
darkMode: "class",
content: ["./app//.{js,jsx,ts,tsx}", "./src//.{js,jsx,ts,tsx}"],
presets: [require("nativewind/preset")],
theme: {
extend: {
colors: {
background: "#ffffff",
primary: "#f59e0b",
"card-foreground": "#0a0a0a",
chart1: "#f59e0b",
"background-dark": "#0a0a0a",
"primary-dark": "#fbbf24",
chart1Dark: "#fbbf24",
},
fontFamily: {
sans: ['"Inter"', "sans-serif"],
},
borderRadius: {
sm: "0.5rem",
md: "0.625rem",
lg: "0.75rem",
xl: "1rem",
},
boxShadow: {
xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
},
},
},
plugins: [],
};
`ts`
export const Colors = {
light: {
background: "#ffffff",
primary: "#f59e0b",
cardForeground: "#0a0a0a",
chart1: "#f59e0b",
},
dark: {
background: "#0a0a0a",
primary: "#fbbf24",
chart1: "#fbbf24",
},
} as const;
1. Parsing: Extracts CSS variables from :root and .dark blocks using deterministic regex matchingbackground
2. Conversion: Optionally converts colors between hex/rgb/hsl formats
3. Mapping:
- Light theme variables → direct keys (, primary-foreground)-dark
- Dark theme variables → keys with suffix (background-dark)chart-1
- Chart colors → special handling ( → chart1 and chart1Dark)
4. Generation:
- Tailwind config: Static values ready for NativeWind
- Colors file: camelCase keys for inline usage
- --background → background--primary-foreground
- → primary-foreground--chart-1
- → chart1 (exception)-dark
- Dark variants add : background-dark, except charts: chart1Dark
- --background → background--primary-foreground
- → primaryForeground--card-foreground
- → cardForeground--chart-1
- → chart1
- :root { --var: value; }.dark { --var: value; }
- (or custom selector via --dark-selector)/ ... /
- CSS comments #fff
- Hex colors: , #ffffffrgb(255, 255, 255)
- RGB/RGBA: , rgba(0, 0, 0, 0.5)hsl(0, 0%, 100%)
- HSL/HSLA: , hsla(0, 0%, 0%, 0.5)"Inter", sans-serif
- Text values: , 0.75rem
- @theme inline { ... } blocks
- Other CSS at-rules
- Non-variable declarations
- No automatic color palette generation (no 50-950 shades) - could be added with explicit option
- Only parses CSS variable declarations (not calculations like calc())
- Complex color functions may be kept as-is if not convertible
`bash`
npm testor
bun test
The test suite covers:
- CSS parsing (:root, .dark, comments, edge cases)
- Variable extraction and naming conversions
- Color format conversions
- Config and colors file generation
`bash``
git clone https://github.com/yourusername/nativewind-cn.git
cd nativewind-cn
bun install
bun test
bun run dev --in ./fixtures/global.css --out ./fixtures --force --colors
MIT
Issues and PRs welcome! This tool intentionally avoids AI/LLM dependencies to remain offline-capable and deterministic.