#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

#Usage

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