Version: v5

    NativeWind

    NativeWind brings Tailwind CSS utility classes to React Native, enabling rapid, consistent styling. With Re.Pack, you can seamlessly integrate NativeWind through a dedicated plugin.

    @callstack/repack-plugin-nativewind is a plugin for Re.Pack 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:

    1. Install NativeWind - follow everything except the metro setup.
    2. Setup Tailwind CSS
    3. Import your CSS file
    4. (Optional) Setup TypeScript support

    Then install the Re.Pack NativeWind plugin and its dependencies:

    npm
    yarn
    pnpm
    bun
    deno
    Version Alignment

    The NativeWind plugin is versioned together with Re.Pack. For best compatibility, align the version of @callstack/repack-plugin-nativewind with your @callstack/repack version in the project.

    A note on dependencies:

    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

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

    Troubleshooting

    • Styles not applying?

      • Ensure your CSS import is present and the plugin is added to your rspack/webpack config.
      • Make sure you have the nativewind/babel preset applied in your babel config.

    • TypeScript issues?

      Follow the NativeWind TypeScript setup guide.

    Further Resources

    Need React or React Native expertise you can count on?

    Let's talk