nativewind-cn

Transform 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.

Why This Tool?

$3

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.

$3

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%)" },
};
`

$3

- 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

$3

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.css
- Vite: src/index.css or src/styles/globals.css

You can also browse ready-made themes at shadcn themes.

Installation

`bash
npm install -g nativewind-cn
`

Usage

$3

`bash
nativewind-cn --in ./global.css --out ./
`

Generates tailwind.config.js in the current directory.

$3

`bash
nativewind-cn --in ./global.css --out ./ --colors
`

Generates both tailwind.config.js and colors.ts.

$3

`bash
nativewind-cn \
--in ./styles/theme.css \
--tailwind-path ./tailwind.config.js \
--colors-path ./src/constants/Colors.ts \
--colors
`

$3

`bash
nativewind-cn --in ./global.css --format hex
`

Options: keep (default), hex, rgb, hsl

$3

`bash
nativewind-cn \
--in ./global.css \
--content "./app//.{js,jsx,ts,tsx};./components//.tsx"
`

Use semicolons (;) to separate multiple globs.

CLI Options

| 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 | /colors.ts |
| --tailwind-path | Path for Tailwind config | /tailwind.config.js |
| --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 |

Output Examples

$3

`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;
}
`

$3

`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: [],
};
`

$3

`ts
export const Colors = {
light: {
background: "#ffffff",
primary: "#f59e0b",
cardForeground: "#0a0a0a",
chart1: "#f59e0b",
},
dark: {
background: "#0a0a0a",
primary: "#fbbf24",
chart1: "#fbbf24",
},
} as const;
`

How It Works

1. Parsing: Extracts CSS variables from :root and .dark blocks using deterministic regex matching
2. Conversion: Optionally converts colors between hex/rgb/hsl formats
3. Mapping:
- Light theme variables → direct keys (background, primary-foreground)
- Dark theme variables → keys with -dark suffix (background-dark)
- Chart colors → special handling (chart-1 → chart1 and chart1Dark)
4. Generation:
- Tailwind config: Static values ready for NativeWind
- Colors file: camelCase keys for inline usage

Naming Conventions

$3

- --background → background
- --primary-foreground → primary-foreground
- --chart-1 → chart1 (exception)
- Dark variants add -dark: background-dark, except charts: chart1Dark

$3

- --background → background
- --primary-foreground → primaryForeground
- --card-foreground → cardForeground
- --chart-1 → chart1

Supported CSS Features

$3

- :root { --var: value; }
- .dark { --var: value; } (or custom selector via --dark-selector)
- CSS comments / ... /
- Hex colors: #fff, #ffffff
- RGB/RGBA: rgb(255, 255, 255), rgba(0, 0, 0, 0.5)
- HSL/HSLA: hsl(0, 0%, 100%), hsla(0, 0%, 0%, 0.5)
- Text values: "Inter", sans-serif, 0.75rem

$3

- @theme inline { ... } blocks
- Other CSS at-rules
- Non-variable declarations

Limitations

- 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

Testing

`bash
npm test


or


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

Development

`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
``

License

MIT

Contributing

Issues and PRs welcome! This tool intentionally avoids AI/LLM dependencies to remain offline-capable and deterministic.