You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
tailwind.config.js not working on v5. How to extend styles to include or custom styles? #248
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 ?
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'constuserTheme=vars({'--color-values': '0 255 0','--color-rgb': 'rbg(0 0 255)'});exportdefaultApp(){return(<View><TextclassName="text-primary">Access as a theme value</Text><TextclassName="text-[--color-rgb]">Or the variable directly</Text>{/* Variables can be changed inline */}<Viewstyle={userTheme}><TextclassName="text-primary">I am now green!</Text><TextclassName="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.
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.
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";constthemes={brand: {'--color-primary': 'black','--color-secondary': 'grey'},christmas: {'--color-primary': 'red','--color-secondary': 'green'}}exportdefaultfunctionRootLayout(){return(<SafeAreaView><VariableContextProvidervalue={themes.brand}><TextclassName="text-primary">Primary value of brand theme</Text><TextclassName="text-secondary">Secondary value of brand theme</Text><VariableContextProvidervalue={themes.christmas}><TextclassName="text-primary">Primary value of christmas theme</Text><TextclassName="text-secondary">Secondary value of christmas theme</Text></VariableContextProvider><TextclassName="text-(--color-pink-500)">Direct variable access</Text></VariableContextProvider></SafeAreaView>);}
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.
@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;
}
import{ThemeProvider}from"./contexts/theme-context";import"../global.css";exportdefaultfunctionRootLayout(){return(<ThemeProvider>{/* your app ... */}</ThemeProvider>);}
Reacted by rajangargsmartdata, jackjieYYY, loki, Vitaly Iegorov and tan5166
Here's how to do it if you want to use NativeWind 5 with Material Design 3 Color System and automatically switching from Light To Dark Mode given a Source Color, e.g 'green'
This was a docs gap, not a bug. v5 uses Tailwind CSS v4, which replaced tailwind.config.js with CSS-based @theme configuration. I'm closing this but want to call out that the community discussion here has been incredibly valuable. The dynamic theming patterns from @datacurse, @arnaudpfu, and @sivefunc are exactly what our docs should cover. I've opened a PR on the website repo to rewrite the themes guide and add vars() -> VariableContextProvider migration docs.
Activity
FlynnHillier commentedon Oct 30, 2025
Nativewind v5 uses tailwind v4, which no longer uses
tailwind.config.jsTo extend properties you'll instead want to use your stylesheet directly. See the tailwind docs here
anxheloo commentedon Oct 31, 2025
Is there a guide on how to also implement dynamic custom themes based from local storage? @FlynnHillier , Thanks in advance
FlynnHillier commentedon Oct 31, 2025
Not that I'm aware of. There very well might be though - you'd have to dig around unfortunately.
dantrain commentedon Nov 5, 2025
Just to say that there are currently references to
tailwind.config.jsin 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 commentedon Nov 6, 2025
A lot of confusing @dantrain
danstepanov commentedon Nov 6, 2025
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-routerhadus07 commentedon Nov 13, 2025
You might want to include the following in your
global.cssfile. Make sure you add it with the right path.seekcx commentedon Nov 15, 2025
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.
I also discovered that the vars function seems to have been replaced by , a point not mentioned in the documentation.
pvinis commentedon Nov 17, 2025
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 commentedon Nov 24, 2025
@seekcx took me some time, but this works for me:
in
global.cssyou need to setup:rootwith default theme:and then do this (i have removed light/dark part to simplify):
seekcx commentedon Nov 25, 2025
@datacurse Thank you, your method is very effective.
anxheloo commentedon Nov 25, 2025
Is good but is not practical, what if we have multiple themes, do we need to use context everywhere in our components ?
datacurse commentedon Nov 26, 2025
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 commentedon Dec 4, 2025
@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.cssapp/contexts/theme-context.tsx_layout.tsxjoewired commentedon Dec 6, 2025
Here is an interesting alternative using @variant
#255 (comment)
sivefunc commentedon Feb 4, 2026
Here's how to do it if you want to use NativeWind 5 with Material Design 3 Color System and automatically switching from Light To Dark Mode given a Source Color, e.g 'green'
Remember to install Material Color Utilities
The following directory tree structure is assumed (Expo Default Template + NativeWind5 + Material Color Utilities)
. ├── app │ ├── global.css │ ├── index.tsx │ └── _layout.tsx ├── app.json ├── assets ├── components │ └── Theme.tsx ├── eslint.config.js ├── expo-env.d.ts ├── metro.config.js ├── nativewind-env.d.ts ├── package.json ├── package-lock.json ├── postcss.config.mjs ├── README.md ├── tailwind.config.js └── tsconfig.jsonglobal.css
Theme.tsx
_layout.tsx
index.tsx
:)
docs: rewrite v5 themes guide and add vars() migration
danstepanov commentedon Mar 30, 2026
This was a docs gap, not a bug. v5 uses Tailwind CSS v4, which replaced
tailwind.config.jswith CSS-based@themeconfiguration. I'm closing this but want to call out that the community discussion here has been incredibly valuable. The dynamic theming patterns from @datacurse, @arnaudpfu, and @sivefunc are exactly what our docs should cover. I've opened a PR on the website repo to rewrite the themes guide and addvars()->VariableContextProvidermigration docs.docs: rewrite v5 themes guide and add vars() migration