Skip to main content

PostCSS

You can use PostCSS to generate CSS stylesheets. This allows you to use className to style your React Native Web components using CSS.

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

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")]],
};

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 nativewind-output.js

Import your styles​

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