[ BUG ] Styles don't seem to be applied

[Enrique-Ambrocio]

Describe the bug I have an expo project in a monorepo using Yarn workspaces. Over the past couple of days been trying to implement NativeWind using the expo router v4 guide along with react-native-reusables setup guide. Using tailwind by itself works, but not when using the components provided by react-native-resuables ~ styles are not applied. I continue to get the warning WARN "hsla(0)" is not a valid color or brush. Unsure why this is happening.

Any help would be greatly appreciated.

bable.config.js

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

metro.config.js

const projectRoot = __dirname;
const workspaceRoot = path.resolve(projectRoot, '../..');

const config = getDefaultConfig(projectRoot, { isCSSEnabled: true });

config.watchFolders = [workspaceRoot];

config.resolver.nodeModulesPaths = [
  path.resolve(projectRoot, 'node_modules'),
  path.resolve(workspaceRoot, 'node_modules'),
];

config.resolver.disableHierarchicalLookup = true;

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

tailwind.config.js

const { hairlineWidth } = require('nativewind/theme');

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: ['./app/**/*.{ts,tsx,jsx}', './components/**/*.{ts,tsx,jsx}'],
  presets: [require("nativewind/preset")],
  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))',
        },
      },
      borderWidth: {
        hairline: hairlineWidth(),
      },
    },
  },
  plugins: [],
};

global.css

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
  }

  .dark:root {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }
}

React Native: 0.72.10 Expo: 49 Tailwindcss: 3.4.10 Nativewind: 4.0.1

[periakteon]

Could you run npx expo start --clear and try again?

[Enrique-Ambrocio]

Hey! Ran the command, and got the following: Warning: Failed prop type: Invalid prop color supplied to Text: hsla(240) Valid color formats are:

  - '#f0fc' (#rgba)
  - '#ff00ff' (#rrggbb)
  - '#ff00ff00' (#rrggbbaa)
  - 'rgb(255, 255, 255)'
  - 'rgba(255, 255, 255, 1.0)'
  - 'hsl(360, 100%, 100%)'
  - 'hsla(360, 100%, 100%, 1.0)'
  - 'transparent'
  - 'red'
  - 0xff00ff00 (0xrrggbbaa)

Bad object: {
  "fontSize": 14,
  "lineHeight": 21,
  "color": "hsla(240)",
  "fontWeight": "500"
}```

[Enrique-Ambrocio]

I reproduced the error by:

1. Running the npx create-expo-app@latest command to create a starter expo router template.
2. Creating a development build running the command: npx expo run:ios
3. Installing and configuring NativeWind.
4. Setting up react-native-resuables per docs
5. Import components and use them

Still don't get styles completely applied.

[periakteon]

I reproduced the error by:

1. Running the npx create-expo-app@latest command to create a starter expo router template.
2. Creating a development build running the command: npx expo run:ios
3. Installing and configuring NativeWind.
4. Setting up react-native-resuables per docs
5. Import components and use them

Still don't get styles completely applied.

Could you re-build your app? Maybe it should work.

[Enrique-Ambrocio]

Still unfortunately doesn't work.

[techednelson]

Try to update Nativewind 4.0.36, I think it will be solved. I had a similar issue with css styling and it was due to Nativewind bugs. After updating to 4.0.36, the problems disappeared.

[Enrique-Ambrocio]

Try to update Nativewind 4.0.36, I think it will be solved. I had a similar issue with css styling and it was due to Nativewind bugs. After updating to 4.0.36, the problems disappeared.

Thanks a lot for the reply! Looks like I am no longer receiving that error, but some styles are still not applied as shown below. This is the dialogue component.

[mrzachnugent]

@Enrique-Ambrocio This looks like a NativeWind caching issue. Try using npx expo start --clear again.

[mrzachnugent]

@Enrique-Ambrocio Please provide a minimal reproduction repo

[Enrique-Ambrocio]

@Enrique-Ambrocio Please provide a minimal reproduction repo

Tried reproducing the error multiple times using a single application, and everything worked just fine. Thinking it might be some configuration with my mono repo because styles are not applied completely (even after clearing the cache and rebuilding the styles). Mind if I share it with you?

[namdh03]

Try to update Nativewind 4.0.36, I think it will be solved. I had a similar issue with css styling and it was due to Nativewind bugs. After updating to 4.0.36, the problems disappeared.

Thank you from the bottom of my heart. Your kindness and support mean the world to me.

When using React Native Reusables, here's the step-by-step process I followed:

1. npx create-expo-app@latest rnr-ts --template blank-typescript
2. Set up NativeWind (without using Expo Router).
3. Set up React Native Reusables using Manual Installation.
4. Install the button component in React Native Reusables with the CLI, but it didn’t seem to work with variables in the global.css or tailwind.config.js file.

After trying many solutions and doing a lot of research, I finally found your advice: simply upgrading NativeWind from version 4.0.1 to 4.0.36. It worked like magic!