PostCSS

Setup

1. Create a PostCSS config file

Add tailwindcss and to your postcss.config.js file, or wherever PostCSS is configured in your project.

// postcss.config.js
module.exports = {
  plugins: [
    require("tailwindcss"),
    [
      require("tailwindcss-react-native/postcss"),
      {
        /* options */
      },
    ],
  ],
};

2. Add the `@tailwind` directives

Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.

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

3. Start your build process

Run your build process with npm run dev or whatever command is configured in your package.json file.

This will create tailwindcss-react-native-output.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>
    )
}

1.2 KiB Raw Blame History Unescape Escape