Skip to main content
Version: v2

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";