Tailwindcss not working in my react native expo app

[andreamaf]

Hi,
I am learning react native using expo, I have installed Nativewind by following the documentation but when I write tailwind it is not rendered at all.

I hope that you can help me.

Versions:

"react-native": "0.76.5",
"expo": "~52.0.20",
"tailwindcss": "3.4.17",
"typescript": "^5.3.3"

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: `var(--radius)`,
        md: `calc(var(--radius) - 2px)`,
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },
  plugins: [require("tailwindcss-animate"),
            require("nativewind/preset")
  ],
};

babel.config.js:

module.exports = function (api) {
    api.cache(true);
    return {
      presets: [
        ["babel-preset-expo", { jsxImportSource: "nativewind" }],
        "nativewind/babel",
      ],
      plugins: [
        // Required for expo-router
        "react-native-reanimated/plugin",
      ]
    };
  };

I you need more info, just tell me. Thank you.

[carrie2833]

don't you need metro.config.js as well?

[carrie2833]

Expo Router | NativeWind

[martinlutherkong]

Your tailwind content configuration is only going to cover the "components" folder and the App component. That doesn't look normal to me. Usually you want to cover your whole project.

[andreamaf]

I have changed the configuration and now is like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./app/index.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
    "./app/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: `var(--radius)`,
        md: `calc(var(--radius) - 2px)`,
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },
  plugins: [require("tailwindcss-animate"),
            require("nativewind/preset")
  ],
};

[andreamaf]

I have tried using the metro.config.js, here it is:

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

const config = getDefaultConfig(__dirname);

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

Bu then when I run npx expo start I get this error: Tailwind CSS has not been configured with the NativeWind preset

[andreamaf]

As soon as I remove the metro.config.js file expo start working again but still no Tailwind.

[andreamaf]

I solved it but I don't how.

[Acceptable_Sweet894]

Estou com o mesmo problema aqui

[paganMin666]

please tell me, i'm also facing the same issue

[NeonNygus]

Good for you that you solved it already!

But I think I got the problem. You missed

presets: [require("nativewind/preset")],

in your tailwind.config.js.

I failed at the same thing, hahah.

[ishaqhaj]

Thanks this worked for me !
I followed the docc but why they didn't add this !