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

sidebar_position

sidebar_position
5

import ReactNativeWebPreview from "./_react-native-web-0-18-preview.md"

Tailwind CLI (CSS) 🔬

The Tailwind CLI can be used to generate CSS Stylesheets.

1. Setup Tailwind CSS

Follow the setup guide for Tailwind CLI.

2. Setup tailwindcss-react-native

Follow the general setup instructions to setup tailwindcss-react-native.

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>
  )
}

5. Write components using the Component API

import { Text } from "react-native";
import { styled } from "tailwindcss-react-native";

const StyledText = styled(Text);

export function BoldText(props) {
  return <StyledText className="font-bold" {...props} />;
}

6. Update your scripts (optional)

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\""
  },
  // ...
}