nativewind/website/docs/compilation/cli-css.md

import StartCoding from "../_start-coding-components.md" import ReactNativeWebPreview from "./_react-native-web-0-18-preview.md"

Tailwind CLI (CSS) 🔬

This preview feature allows you to use the Tailwind CLI to generate CSS stylesheets. You can then use className to style your React Native Web components using CSS.

Setup

1. Setup Tailwind CSS

Follow the setup guide for Tailwind CLI.

2. Modify your tailwind.config.js to include the CSS plugin

// tailwind.config.js
+ const tailwindcssReactNative = require("tailwindcss-react-native/tailwind/css")
+
module.exports = {
  content: [
    './App.{js,ts,jsx,tsx}',
  ],
+ plugins: [tailwindcssReactNative()],
};

3. Enable preview features

You will need to enable preview features on your TailwindProvider

import { TailwindProvider } from 'tailwindcss-react-native'

function MyAppsProviders ({ children }) {
  return (
-   <TailwindProvider>{children}</TailwindProvider>
+   <TailwindProvider preview={true}>{children}</TailwindProvider>
  )
}

Watching for changes

You can use the Tailwind CLI with the --watch flag to automatically compile on save.

This can be combined with concurrently to create a streamlined development environment.

// package.json
{
  "scripts": {
-   "start": "expo start"
+   "start": "concurrently \"tailwindcss -i input.css -o output.css --watch\" \"expo start:web\""
  },
  // ...
}