CODEWITHSUNDEEP
reactjsreact-nativeexpotailwind-cssnativewind
Amine Merad
Amine Merad

Reputation: 1

Tailwind CSS with NativeWind in a React Native project created with Expo

I’ve created a new React Native project using Expo and configured NativeWind following the official documentation. However, the Tailwind styles (e.g., text-2xl, text-red-500) are not applying to my components.

npm install nativewind tailwindcss react-native-reanimated react-native-safe-area-context

tailwind.config.js : 
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,jsx,ts,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 = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};

Imported global.css into the root of my project

Despite all of this, the Tailwind classes don’t seem to apply to my components , this is a simple implementation :

import React from 'react';
import {  Image, Platform } from 'react-native';

import { HelloWave } from '@/components/HelloWave';
import ParallaxScrollView from '@/components/ParallaxScrollView';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';

const Profile = () => {
  return (
    <ParallaxScrollView
      headerBackgroundColor={{ light: '#FFB6C1', dark: '#800020' }}
      headerImage={
        <Image
          source={require('@/assets/images/user-avatar.png')} // Use a relevant avatar or placeholder
          style={styles.avatar}
        />
      }>
      <ThemedView>
        <ThemedText  className="text-3xl">Welcome Back!</ThemedText>
        <HelloWave />
      </ThemedView>
      <ThemedView>
        <ThemedText type="subtitle">Your Info</ThemedText>
        <ThemedText>
          Edit your profile to update your information. Tap{' '}
          <ThemedText type="defaultSemiBold">Save</ThemedText> when you're done.
        </ThemedText>
      </ThemedView>
      <ThemedView >
        <ThemedText type="subtitle">Settings</ThemedText>
        <ThemedText className="text-red">
          Adjust your preferences in the settings tab.
        </ThemedText>
      </ThemedView>
    </ParallaxScrollView>
  );
};

export default Profile;

the versions am using : -Expo: ~52.0.11 -React Native: 0.76.3 -React: 18.3.1 -NativeWind: ^4.1.23 -TailwindCSS: ^3.4.15

Upvotes: 0

Views: 443

Answers (1)

divine
divine

Reputation: 1

do you use typescript? you might need to create a nativewind-env.d.ts file with just this line in it:

/// <reference types="nativewind/types" />

and in your metro.config.js file, make sure you have this setup:

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require("nativewind/metro");

const config = getDefaultConfig(__dirname);

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

Upvotes: 0

Related Questions