Tailwind CLI

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

Setup

1. Create a PostCSS config file

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

2. Add the native tailwind plugin to your `tailwind.config.js`

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

2. Create a input file

// input.css
@tailwind components;
@tailwind utilities;

3. Run Tailwind CLI

Running the Tailwind CLI will generate tailwindcss-react-native-output.js. This can be configured via the PostCSS options

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

4. Update the TailwindProvider

import { TailwindProvider } from 'tailwindcss-react-native'
+ import * as tailwindProviderProps from "./tailwindcss-react-native-output"

function MyAppsProviders ({ children }) {
    return (
-       <TailwindProvider>{children}</TailwindProvider>
+       <TailwindProvider {...tailwindProviderProps}>{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 --postcss postcss.config.js --watch\" \"expo start\""
  },
  // ...
}

1.8 KiB Raw Blame History