Can't NativeWind be applied to React-Native-Web and VITE?

I installed react-native-web and nativewind in react-native.

{
  "name": "viteProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest",
    "web": "vite"
  },
  "dependencies": {
    "@vitejs/plugin-react": "^4.3.1",
    "autoprefixer": "^10.4.20",
    "nativewind": "^2.0.11",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.4",
    "react-native-web": "^0.19.12",
    "vite": "^5.3.5"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.74.86",
    "@react-native/eslint-config": "0.74.86",
    "@react-native/metro-config": "0.74.86",
    "@react-native/typescript-config": "0.74.86",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "babel-plugin-react-native-web": "^0.19.12",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "tailwindcss": "^3.3.2",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

I created vite.config.ts and wrote it as shown below.

import {defineConfig} from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';

const extensions = [
  '.web.tsx',
  '.tsx',
  '.web.ts',
  '.ts',
  '.web.jsx',
  '.jsx',
  '.web.js',
  '.js',
  '.css',
  '.json',
  '.mjs',
];
export default defineConfig({
  plugins: [react()],
  resolve: {
    extensions: extensions,
    alias: {
      'react-native': 'react-native-web',
    },
  },
  css: {
    postcss: {
      plugins: [tailwindcss, autoprefixer],
    },
  },
});

Afterwards, I wrote the following in App.tsx,

import {Text, View} from 'react-native';
import React from 'react';

export const App = () => {
  return (
    <View>
      <Text className={'border bg-red-600'}>test text</Text>
    </View>
  );
};

When I run vite, the 'test text' element is visible, but the tailwind is not applied. Is vite set up incorrectly? When checking the element using developer tools on the web, it seems that the tailwind class is not created properly.

<div dir="auto" class="css-text-146c3p1">test text</div>

in vite.config.ts

import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';

I added the plugin like this,

className of nativewind is not generated in web

    <View>
      <Text className={'border bg-red-600'}>test text</Text>
    </View>

This part doesn't seem to be converted properly on the web. What part is wrong?

babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: ['nativewind/babel'],
};

index.tsx

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import {App} from './App';
import {name as appName} from './app.json';
import {NativeWindStyleSheet} from 'nativewind';
import {Platform} from 'react-native';

NativeWindStyleSheet.setOutput({
  default: 'native',
});

AppRegistry.registerComponent(appName, () => App);

if (Platform.OS === 'web') {
  AppRegistry.runApplication(appName, {
    initialProps: {},
    rootTag: document.getElementById('root'),
  });
}

I encountered the same issue when creating a monorepo with Expo and Vite + React app.

In my case, I followed these steps and fixed the problem:

1. Install the vite-plugin-react-native-web (development)
2. Please incorporate this code into your project. vite.config.ts:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import reactNativeWeb from 'vite-plugin-react-native-web';

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          [
            '@babel/plugin-transform-react-jsx',
            {
              runtime: 'automatic',
              importSource: 'nativewind',
            },
          ],
        ],
      },
    }),
    reactNativeWeb(),
  ],
  server: {
    port: 3000,
  },
});

3. Update tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './index.html',
    './src/**/*.{js,jsx,ts,tsx}',
    '../../packages/ui/components/**/*.{js,jsx,ts,tsx}'
  ],
  important: 'html',
  presets: [require('nativewind/preset')],
  theme: {
    extend: {},
  },
  plugins: [],
}

Restart the serve end enjoy :)

My dependencies:

{
    "react-native-web": "^0.19.12",
    "tailwind-merge": "^2.5.3",
    "nativewind": "^4.0.1",
    "tailwindcss": "^3.4.13"
}