Skip to main content

Tailwind CLI

The Tailwind CLI can be used to output pre-compiled RN StyleSheet objects.

Before you start, please follow the setup guide for Tailwind CLI

Web​

Add the NativeWind plugin to your tailwind.config.js​

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

Native​

Add NativeWind to your PostCSS config​

Add tailwindcss and to your postcss.config.js.

// postcss.config.js
module.exports = {
  plugins: [require("tailwindcss"), require("nativewind/postcss")],
};

Create a PostCSS config file​

// postcss.config.js
module.exports = {
  plugins: {
    "nativewind/postcss": {
      output: "nativewind-output.js",
    },
  },
};

Add the NativeWind plugin to your tailwind.config.js​

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

Run Tailwind CLI​

Running the Tailwind CLI will generate nativewind-output.js.

npx tailwindcss -i input.css --postcss postcss.config.js

Import your styles​

// App.jsx
+ import "./nativewind-output"

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 --postcss postcss.config.js --watch\" \"expo start\""
  },
  // ...
}