tailwind.config.js not working on v5. How to extend styles to include or custom styles?

[anxheloo]

I am trying to create a latest expo project with v5 and test it out, i followed all the steps in the docs and it is working.

The problem comes when i want to create some custom styles by extending colors and other properties like we did in earlier versions using tailwind.config.js.

After several tries it is not working. I check the docs but nothing can help me out.

Is this possible or is this an upcoming feature in the stable released version ?

Below you will find a repoduction link :
1-Clone the repo : https://github.com/anxheloo/musicplayer
2-npm install
3-npx expo start

[FlynnHillier]

Nativewind v5 uses tailwind v4, which no longer uses tailwind.config.js

To extend properties you'll instead want to use your stylesheet directly. See the tailwind docs here

[anxheloo]

Is there a guide on how to also implement dynamic custom themes based from local storage? @FlynnHillier , Thanks in advance

[FlynnHillier]

Is there a guide on how to also implement dynamic custom themes based from local storage? @FlynnHillier , Thanks in advance

Not that I'm aware of. There very well might be though - you'd have to dig around unfortunately.

[dantrain]

Just to say that there are currently references to tailwind.config.js in the v5 docs which I found confusing:
https://www.nativewind.dev/v5/guides/themes

I'd suggest removing this page until new documentation is ready.

[anxheloo]

A lot of confusing @dantrain

[danstepanov]

Thanks for the callouts y'all, I'll look into that doc but for now, @anxheloo you can start a project with npx rn-new@next --nativewind --expo-router

[hadus07]

You might want to include the following in your global.css file. Make sure you add it with the right path.

// Other stuff
...
@config "./tailwind.config.js";

[seekcx]

Are there any tutorials that can help me achieve this? I'm currently looking at the documentation and writing my own code, but it doesn't run properly; even the most basic examples don't work.

import { vars } from 'nativewind'
 
const userTheme = vars({
  '--color-values': '0 255 0',
  '--color-rgb': 'rbg(0 0 255)'
});
 
export default App() {
  return (
    <View>
      <Text className="text-primary">Access as a theme value</Text>
      <Text className="text-[--color-rgb]">Or the variable directly</Text>
 
      {/* Variables can be changed inline */}
      <View style={userTheme}>
        <Text className="text-primary">I am now green!</Text>
        <Text className="text-[--color-rgb]">I am now blue!</Text>
      </View>
    </View>
  )
}

I also discovered that the vars function seems to have been replaced by , a point not mentioned in the documentation.

[pvinis]

Please, if you (or anyone) is not ready to read all the unfinished docs, and face breakage, and bugs, then DO NOT try to use v5 yet. it is marked as preview for a reason. This issue can just been closed, and it would be totally fine if they do that.

[datacurse]

@seekcx took me some time, but this works for me:

in global.css you need to setup :root with default theme:

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";

@import "nativewind/theme";

@theme {
  --color-primary: var(--color-blue-600);
  --color-secondary: var(--color-purple-600);
}

:root {
  --color-primary: var(--color-blue-600);
  --color-secondary: var(--color-purple-600);
}

and then do this (i have removed light/dark part to simplify):

import "../global.css";

import { VariableContextProvider } from 'nativewind';
import { Text } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

const themes = {
  brand: {
    '--color-primary': 'black',
    '--color-secondary': 'grey'
  },
  christmas: {
    '--color-primary': 'red',
    '--color-secondary': 'green'
  }
}

export default function RootLayout() {
  return (
    <SafeAreaView>
      <VariableContextProvider value={themes.brand}>
        <Text className="text-primary">Primary value of brand theme</Text>
        <Text className="text-secondary">Secondary value of brand theme</Text>
        <VariableContextProvider value={themes.christmas}>
          <Text className="text-primary">Primary value of christmas theme</Text>
          <Text className="text-secondary">Secondary value of christmas theme</Text>
        </VariableContextProvider>
        <Text className="text-(--color-pink-500)">Direct variable access</Text>
      </VariableContextProvider >
    </SafeAreaView>
  );
}

[seekcx]

@datacurse Thank you, your method is very effective.

[anxheloo]

Is good but is not practical, what if we have multiple themes, do we need to use context everywhere in our components ?

[datacurse]

Is good but is not practical, what if we have multiple themes, do we need to use context everywhere in our components ?

If i understand it correctly, you can apply this at the root page, like _laout.tsx, and it will be applied to everything nested inside, all your components.

[arnaudpfu]

@datacurse yes you just have to wrap your app and it will be applied everywhere

Here is full example that works with light/dark themes

global.css

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";

@import "nativewind/theme";

@source "./components/**/*.{js,ts,tsx}";
@source "./app/**/*.{js,ts,tsx}";

@theme {
  --font-outfit: "Outfit_400Regular";
  --font-outfit-bold: "Outfit_700Bold";

  --color-brand: var(--brand); /* no update according theme */

  /* this code is required to use VariableContextProvider */
  --color-foreground: lime;  /* lime is just a default value */
  --color-muted-foreground: lime;
  --color-primary: lime;
  --color-secondary: lime;
}

:root {
  --brand: #e98a0e;

  /* this code is required to use VariableContextProvider */
  --color-foreground: lime;
  --color-muted-foreground: lime;
  --color-primary: lime;
  --color-secondary: lime;
}

app/contexts/theme-context.tsx

import { VariableContextProvider, useColorScheme } from "nativewind";
import React, { createContext, useContext, useEffect, useState } from "react";

const lightTheme = {
  "--color-foreground": "#000000",
  "--color-muted-foreground": "#64748b",
  "--color-primary": "#ffffff",
  "--color-secondary": "#f5f5f5",
};

const darkTheme = {
  "--color-foreground": "#ffffff",
  "--color-muted-foreground": "#a1a1a1",
  "--color-primary": "#171717",
  "--color-secondary": "#262626",
};

export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
  const { colorScheme, setColorScheme } = useColorScheme();

  return (
      <VariableContextProvider value={colorScheme === 'dark' ? darkTheme: lightTheme}>
        {children}
      </VariableContextProvider>
  );
};

_layout.tsx

import { ThemeProvider } from "./contexts/theme-context";

import "../global.css";

export default function RootLayout() {
  return (
        <ThemeProvider>
        {/* your app ... */}
       </ThemeProvider>
  );
}