Quick Start

Expo

cd my-expo-app
npx lunar-css init

Generated files:

lunar.config.ts        # token source of truth
metro.config.js        # withLunarCSS wrapped
.gitignore             # .lunarcss/ ignored
tsconfig.json          # types: ["@lunar-kit/css/types"] appended

Use className immediately:

import { View, Text } from 'react-native'

export default function Screen() {
  return (
    <View className="flex-1 items-center justify-center bg-zinc-900">
      <Text className="text-2xl font-bold text-white">Hello LunarCSS</Text>
    </View>
  )
}

Start the dev server:

npx expo start

Next.js

cd my-next-app
npx lunar-css init

Generated files:

lunar.config.ts
app/globals.css        # @import "tailwindcss" + @plugin "@lunar-kit/css"
.gitignore
tsconfig.json

Add the PostCSS plugin to postcss.config.js:

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    '@lunar-kit/css': {},
  },
}

Import globals.css from your root layout:

// app/layout.tsx
import './globals.css'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Use className as usual — Tailwind compiles it, custom tokens work cross-platform:

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col items-center bg-zinc-950 p-24">
      <h1 className="text-4xl font-bold text-white">Hello LunarCSS</h1>
    </main>
  )
}

React Native (bare)

cd my-rn-app
npx lunar-css init

Same files as Expo, but metro.config.js uses @react-native/metro-config + mergeConfig:

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config')
const { withLunarCSS } = require('@lunar-kit/css/metro')

const config = {}
module.exports = withLunarCSS(mergeConfig(getDefaultConfig(__dirname), config))

Manual setup (no CLI)

If you prefer to wire things manually:

Mobile

Create lunar.config.ts (see Configuration)
Wrap metro.config.js:

const { getDefaultConfig } = require('expo/metro-config')
const { withLunarCSS } = require('@lunar-kit/css/metro')

const config = getDefaultConfig(__dirname)
module.exports = withLunarCSS(config)

Add types to tsconfig.json:

{ "compilerOptions": { "types": ["@lunar-kit/css/types"] } }

Web

Create lunar.config.ts
Add to postcss.config.js:

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    '@lunar-kit/css': {},
  },
}

Add to your entry CSS:

@import "tailwindcss";
@plugin "@lunar-kit/css";