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?

The Problem

shadcn/ui and tweakcn provide beautiful design systems using CSS variables:

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

colors: {
  background: 'hsl(var(--background))',
  foreground: 'hsl(var(--foreground))'
}

But React Native's NativeWind doesn't support var() calls - it needs static values.

The Solution

This tool automatically converts shadcn/tweakcn's global.css into React Native-compatible formats:

Input (global.css from shadcn/tweakcn):

:root {
  --background: 0 0% 100%;
  --primary: 221.2 83.2% 53.3%;
}
.dark {
  --background: 222.2 84% 4.9%;
}

Output (tailwind.config.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:

export const Colors = {
  light: { background: "hsl(0 0% 100%)" },
  dark: { background: "hsl(222.2 84% 4.9%)" },
};

Who Needs This?

• 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

Where Does global.css Come From?

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:

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

npm install -g nativewind-cn

Usage

Basic Usage

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

Generates tailwind.config.js in the current directory.

With Colors File

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

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

Custom Paths

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

Color Format Conversion

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

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

Custom Content Globs

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 <path> | Input CSS file (required) | - | | --out <path> | Output directory | Current directory | | --format <format> | Color format: keep, hex, rgb, hsl | keep | | --colors | Generate colors.ts file | false | | --colors-path <path> | Path for colors.ts | <out>/colors.ts | | --tailwind-path <path> | Path for Tailwind config | <out>/tailwind.config.js | | --content <globs> | Semicolon-separated content globs | ./app/**/*.{js,jsx,ts,tsx};./src/**/*.{js,jsx,ts,tsx} | | --dark-selector <selector> | Dark mode CSS selector | .dark | | --force | Overwrite existing files | false |

Output Examples

Input: global.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;
}

Output: tailwind.config.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: [],
};

Output: colors.ts (with --colors flag)

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

Tailwind Config (kebab-case preserved)

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

Colors.ts (camelCase)

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

Supported CSS Features

Parsed:

• :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

Ignored:

• @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

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

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.