리액트 네이티브 CLI Nativewind 적용

npm install nativewind react-native-reanimated react-native-safe-area-context
npm install --dev tailwindcss@^3.4.17 prettier-plugin-tailwindcss@^0.5.11
npm install react-native-worklets

npm install nativewind react-native-reanimated react-native-safe-area-context
npm install --dev prettier@3
npm install --dev tailwindcss@^3.4.17 prettier-plugin-tailwindcss@^0.5.11
npm install react-native-worklets

npx tailwindcss init

//tailwindcss.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  // NOTE: Update this to include the paths to all files that contain Nativewind classes.
  content: ["./App.tsx", "./components/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
};

//global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

// babel.config.js
module.exports = {
  presets: ["module:@react-native/babel-preset", "nativewind/babel"],
  plugins: ["react-native-worklets/plugin"],
};

//metro.config.js
const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
const { withNativeWind } = require("nativewind/metro");

const config = mergeConfig(getDefaultConfig(__dirname), {
  /* your config */
});

module.exports = withNativeWind(config, { input: "./global.css" });

import "./global.css";
import { Text, View } from "react-native";

export default function App() {
  return (
    <View className="flex-1 items-center justify-center bg-white">
      <Text className="text-xl font-bold text-blue-500">
        Welcome to Nativewind!
      </Text>
    </View>
  );
}