#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
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 install -D @callstack/repack-plugin-nativewind postcss postcss-loader autoprefixer

Note: 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(),
    ],
  };
};

#Troubleshooting

• Styles not applying? Ensure your CSS import is present and the plugin is added to your config.
• PostCSS errors? Double-check that all required dependencies are installed and your postcss.config.js is set up.
• TypeScript issues? Follow the NativeWind TypeScript setup guide.

#Further Resources

• NativeWind Documentation
• Tailwind CSS Documentation
• Re.Pack NativeWind Plugin Repo