Tailwind(Nativewind) css is not working with React + Vite in React-Native-Web

[cfg-deepika]

Summary

Hello!

We are working with Storybook 8 with React + Vite. We are using Tailwind CSS with Nativewind. We have configured everything mentioned in the Tailwind, Nativewind, and Storybook migration/setup guide.

But TailwindCSS classes won't show up

Additional information

main.ts

import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-controls",
    "@storybook/addon-actions",
    "@storybook/addon-measure",
    "@storybook/addon-viewport",
    "@storybook/preset-create-react-app",
    "@storybook/addon-backgrounds",
    "@storybook/addon-interactions",
  ],
  core: {
    builder: {
      name: "@storybook/builder-vite",
      options: {},
    },
  },
  framework: {
    name: "@storybook/react-vite",
    options: {
      legacyRootApi: true,
    },
  },
  docs: {},
};
export default config;

preview.ts

import "tailwindcss/tailwind.css";
import "./global.css";

const preview = { 
   parameters: {
    viewport: customViewports,
    backgrounds: customBackGrounds
  }
}

export default preview;

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

postcss.config.js

module.exports = {
  plugins: {
    "tailwindcss/nesting": {},
    tailwindcss: { config: "./tailwind.config.mts" }, // also tried with tailwindcss: {}
    autoprefixer: {},
  },
};

tailwind.config.mts

import type { Config } from "tailwindcss";

export default {
  content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
  prefix: "foo-",
  theme: {},
  variants: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

vite.config.mts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

const extensions = [
  ".web.tsx",
  ".tsx",
  ".web.ts",
  ".ts",
  ".web.jsx",
  ".jsx",
  ".web.js",
  ".js",
  ".css",
  ".json",
  ".mjs",
];

export default defineConfig({
  clearScreen: true,
  mode: "development",
  css: {
    postcss: "./postcss.config.js",
  },
  plugins: [react()],
  resolve: {
    extensions: extensions,
    alias: {
      "react-native": "react-native-web",
      "@storybook/react-native": "@storybook/react",
    },
  },
  server: {
    open: true,
    port: 3000,
  },

  optimizeDeps: {
    esbuildOptions: {
      resolveExtensions: extensions,
      // https://github.com/vitejs/vite-plugin-react/issues/192#issuecomment-1627384670
      jsx: "automatic",
      loader: { ".js": "jsx" },
    },
  },
});

dependencies versions

"nativewind": "^2.0.11",

"@storybook/react": "^8.1.6",
"@storybook/builder-vite": "8.1.6",
"@storybook/react-vite": "^8.1.6",
"@storybook/react-native": "^7.6.19",

"autoprefixer": "^10.4.19",
"postcss": "^7",
"storybook": "^8.1.6",
"tailwindcss": "3.3.2",
"vite": "^5.2.13",

TextComponent.tsx

<View className="flex-1 items-center justify-center">
     <Text className="text-red-600">Styling not working!</Text>
 </View>

Please suggest, what we are missing here!

Create a reproduction

No response

[NicoVogel]

TLDR

// vite.config.ts
  {
    plugins: [
      react({
        babel: {
          // https://www.nativewind.dev/guides/babel-transform-only
          plugins: [['nativewind/babel', { mode: 'transformOnly' }]],
        },
      }),
    ],
    resolve: {
      alias: {
        'react-native': 'react-native-web',
      },
    },
  };

How it works

I don't use Storybook, but I got it working by applying the babel config metioned in the docs.

As vite is totally capable of compiling tailwind out of the box, I went with the transformOnly mode.

The react plugin uses babel already under the hood (see source).

So, all that is really needed is to ensure that the nativewind plugin is used by react babel setup and ensure that vite resolves react-native as the react-native-web package