@callstack/repack-plugin-nativewind

A toolkit to build your React Native application with Rspack or Webpack.

@callstack/repack-plugin-nativewind is a plugin for @callstack/repack that enables integrating NativeWind into your React Native projects.

About

This plugin seamlessly integrates NativeWind with Re.Pack's build process by:

• Configuring PostCSS and Tailwind CSS processing for your stylesheets
• Handling conversion of CSS to React Native-compatible styles
• Setting up proper SWC transformations for NativeWind's JSX runtime

Installation

First, follow these steps from the official NativeWind installation guide:

• Install NativeWind
• Setup Tailwind CSS
• Import your CSS file
• (Optional) Setup TypeScript support

Then install the Re.Pack NativeWind plugin and it's dependencies:

npm install -D @callstack/repack-plugin-nativewind postcss postcss-loader autoprefixer

These additional dependencies (postcss, postcss-loader, and autoprefixer) are required for processing Tailwind CSS with Webpack/Rspack, as specified in the official Tailwind CSS Rspack guide. They enable PostCSS processing and autoprefixing of CSS styles in your build pipeline.

Usage

Note: If you are using Webpack (not Rspack), you need to add the following configuration to your babel.config.js:

plugins: [
  [
    '@babel/plugin-transform-react-jsx',
    {
      runtime: 'automatic',
      importSource: 'nativewind',
    },
  ],
],

Plugin

To add the plugin to your Re.Pack configuration, update your rspack.config.js or webpack.config.js as follows:

import { NativeWindPlugin } from "@callstack/repack-plugin-nativewind";

export default (env) => {
  // ...
  return {
    // ...
    plugins: [
      // ...
      new NativeWindPlugin(),
    ],
  };
};

Check out our website at https://re-pack.dev for more info and documentation or our GitHub: https://github.com/callstack/repack.