Skip to content

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

Closed as not planned

Description

@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

Activity

  1. FlynnHillier commented on Oct 30, 2025

    @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

  2. anxheloo commented on Oct 31, 2025

    @anxheloo
    Author

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

  3. FlynnHillier commented on Oct 31, 2025

    @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.

  4. dantrain commented on Nov 5, 2025

    @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.

  5. anxheloo commented on Nov 6, 2025

    @anxheloo
    Author

    A lot of confusing @dantrain

  6. danstepanov commented on Nov 6, 2025

    @danstepanov
    Member

    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

  7. hadus07 commented on Nov 13, 2025

    @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";
  8. seekcx commented on Nov 15, 2025

    @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.

  9. pvinis commented on Nov 17, 2025

    @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.

  10. datacurse commented on Nov 24, 2025

    @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>
      );
    }
  11. seekcx commented on Nov 25, 2025

    @seekcx

    @datacurse Thank you, your method is very effective.

  12. anxheloo commented on Nov 25, 2025

    @anxheloo
    Author

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

  13. datacurse commented on Nov 26, 2025

    @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.

  14. arnaudpfu commented on Dec 4, 2025

    @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>
      );
    }
  15. joewired commented on Dec 6, 2025

    @joewired

    Here is an interesting alternative using @variant

    #255 (comment)

  16. sivefunc commented on Feb 4, 2026

    @sivefunc

    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

    npm i @material/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.json

    global.css

    @import "tailwindcss/theme.css" layer(theme);
    @import "tailwindcss/preflight.css" layer(base);
    @import "tailwindcss/utilities.css";
    
    @import "nativewind/theme";
    
    @theme {
     --color-background: 'rgb(var(--color-background) / <alpha-value>)';
     --color-error: 'rgb(var(--color-error) / <alpha-value>)';
     --color-errorContainer: 'rgb(var(--color-errorContainer) / <alpha-value>)';
     --color-inverseOnSurface: 'rgb(var(--color-inverseOnSurface) / <alpha-value>)';
     --color-inversePrimary: 'rgb(var(--color-inversePrimary) / <alpha-value>)';
     --color-inverseSurface: 'rgb(var(--color-inverseSurface) / <alpha-value>)';
     --color-neutralPaletteKeyColor: 'rgb(var(--color-neutralPaletteKeyColor) / <alpha-value>)';
     --color-neutralVariantPaletteKeyColor: 'rgb(var(--color-neutralVariantPaletteKeyColor) / <alpha-value>)';
     --color-onBackground: 'rgb(var(--color-onBackground) / <alpha-value>)';
     --color-onError: 'rgb(var(--color-onError) / <alpha-value>)';
     --color-onErrorContainer: 'rgb(var(--color-onErrorContainer) / <alpha-value>)';
     --color-onPrimary: 'rgb(var(--color-onPrimary) / <alpha-value>)';
     --color-onPrimaryContainer: 'rgb(var(--color-onPrimaryContainer) / <alpha-value>)';
     --color-onPrimaryFixed: 'rgb(var(--color-onPrimaryFixed) / <alpha-value>)';
     --color-onPrimaryFixedVariant: 'rgb(var(--color-onPrimaryFixedVariant) / <alpha-value>)';
     --color-onSecondary: 'rgb(var(--color-onSecondary) / <alpha-value>)';
     --color-onSecondaryContainer: 'rgb(var(--color-onSecondaryContainer) / <alpha-value>)';
     --color-onSecondaryFixed: 'rgb(var(--color-onSecondaryFixed) / <alpha-value>)';
     --color-onSecondaryFixedVariant: 'rgb(var(--color-onSecondaryFixedVariant) / <alpha-value>)';
     --color-onSurface: 'rgb(var(--color-onSurface) / <alpha-value>)';
     --color-onSurfaceVariant: 'rgb(var(--color-onSurfaceVariant) / <alpha-value>)';
     --color-onTertiary: 'rgb(var(--color-onTertiary) / <alpha-value>)';
     --color-onTertiaryContainer: 'rgb(var(--color-onTertiaryContainer) / <alpha-value>)';
     --color-onTertiaryFixed: 'rgb(var(--color-onTertiaryFixed) / <alpha-value>)';
     --color-onTertiaryFixedVariant: 'rgb(var(--color-onTertiaryFixedVariant) / <alpha-value>)';
     --color-outline: 'rgb(var(--color-outline) / <alpha-value>)';
     --color-outlineVariant: 'rgb(var(--color-outlineVariant) / <alpha-value>)';
     --color-primary: 'rgb(var(--color-primary) / <alpha-value>)';
     --color-primaryContainer: 'rgb(var(--color-primaryContainer) / <alpha-value>)';
     --color-primaryFixed: 'rgb(var(--color-primaryFixed) / <alpha-value>)';
     --color-primaryFixedDim: 'rgb(var(--color-primaryFixedDim) / <alpha-value>)';
     --color-primaryPaletteKeyColor: 'rgb(var(--color-primaryPaletteKeyColor) / <alpha-value>)';
     --color-scrim: 'rgb(var(--color-scrim) / <alpha-value>)';
     --color-secondary: 'rgb(var(--color-secondary) / <alpha-value>)';
     --color-secondaryContainer: 'rgb(var(--color-secondaryContainer) / <alpha-value>)';
     --color-secondaryFixed: 'rgb(var(--color-secondaryFixed) / <alpha-value>)';
     --color-secondaryFixedDim: 'rgb(var(--color-secondaryFixedDim) / <alpha-value>)';
     --color-secondaryPaletteKeyColor: 'rgb(var(--color-secondaryPaletteKeyColor) / <alpha-value>)';
     --color-shadow: 'rgb(var(--color-shadow) / <alpha-value>)';
     --color-surface: 'rgb(var(--color-surface) / <alpha-value>)';
     --color-surfaceBright: 'rgb(var(--color-surfaceBright) / <alpha-value>)';
     --color-surfaceContainer: 'rgb(var(--color-surfaceContainer) / <alpha-value>)';
     --color-surfaceContainerHigh: 'rgb(var(--color-surfaceContainerHigh) / <alpha-value>)';
     --color-surfaceContainerHighest: 'rgb(var(--color-surfaceContainerHighest) / <alpha-value>)';
     --color-surfaceContainerLow: 'rgb(var(--color-surfaceContainerLow) / <alpha-value>)';
     --color-surfaceContainerLowest: 'rgb(var(--color-surfaceContainerLowest) / <alpha-value>)';
     --color-surfaceDim: 'rgb(var(--color-surfaceDim) / <alpha-value>)';
     --color-surfaceTint: 'rgb(var(--color-surfaceTint) / <alpha-value>)';
     --color-surfaceVariant: 'rgb(var(--color-surfaceVariant) / <alpha-value>)';
     --color-tertiary: 'rgb(var(--color-tertiary) / <alpha-value>)';
     --color-tertiaryContainer: 'rgb(var(--color-tertiaryContainer) / <alpha-value>)';
     --color-tertiaryFixed: 'rgb(var(--color-tertiaryFixed) / <alpha-value>)';
     --color-tertiaryFixedDim: 'rgb(var(--color-tertiaryFixedDim) / <alpha-value>)';
     --color-tertiaryPaletteKeyColor: 'rgb(var(--color-tertiaryPaletteKeyColor) / <alpha-value>)';
    }
    
    :root {
     --color-background: 'rgb(var(--color-background) / <alpha-value>)';
     --color-error: 'rgb(var(--color-error) / <alpha-value>)';
     --color-errorContainer: 'rgb(var(--color-errorContainer) / <alpha-value>)';
     --color-inverseOnSurface: 'rgb(var(--color-inverseOnSurface) / <alpha-value>)';
     --color-inversePrimary: 'rgb(var(--color-inversePrimary) / <alpha-value>)';
     --color-inverseSurface: 'rgb(var(--color-inverseSurface) / <alpha-value>)';
     --color-neutralPaletteKeyColor: 'rgb(var(--color-neutralPaletteKeyColor) / <alpha-value>)';
     --color-neutralVariantPaletteKeyColor: 'rgb(var(--color-neutralVariantPaletteKeyColor) / <alpha-value>)';
     --color-onBackground: 'rgb(var(--color-onBackground) / <alpha-value>)';
     --color-onError: 'rgb(var(--color-onError) / <alpha-value>)';
     --color-onErrorContainer: 'rgb(var(--color-onErrorContainer) / <alpha-value>)';
     --color-onPrimary: 'rgb(var(--color-onPrimary) / <alpha-value>)';
     --color-onPrimaryContainer: 'rgb(var(--color-onPrimaryContainer) / <alpha-value>)';
     --color-onPrimaryFixed: 'rgb(var(--color-onPrimaryFixed) / <alpha-value>)';
     --color-onPrimaryFixedVariant: 'rgb(var(--color-onPrimaryFixedVariant) / <alpha-value>)';
     --color-onSecondary: 'rgb(var(--color-onSecondary) / <alpha-value>)';
     --color-onSecondaryContainer: 'rgb(var(--color-onSecondaryContainer) / <alpha-value>)';
     --color-onSecondaryFixed: 'rgb(var(--color-onSecondaryFixed) / <alpha-value>)';
     --color-onSecondaryFixedVariant: 'rgb(var(--color-onSecondaryFixedVariant) / <alpha-value>)';
     --color-onSurface: 'rgb(var(--color-onSurface) / <alpha-value>)';
     --color-onSurfaceVariant: 'rgb(var(--color-onSurfaceVariant) / <alpha-value>)';
     --color-onTertiary: 'rgb(var(--color-onTertiary) / <alpha-value>)';
     --color-onTertiaryContainer: 'rgb(var(--color-onTertiaryContainer) / <alpha-value>)';
     --color-onTertiaryFixed: 'rgb(var(--color-onTertiaryFixed) / <alpha-value>)';
     --color-onTertiaryFixedVariant: 'rgb(var(--color-onTertiaryFixedVariant) / <alpha-value>)';
     --color-outline: 'rgb(var(--color-outline) / <alpha-value>)';
     --color-outlineVariant: 'rgb(var(--color-outlineVariant) / <alpha-value>)';
     --color-primary: 'rgb(var(--color-primary) / <alpha-value>)';
     --color-primaryContainer: 'rgb(var(--color-primaryContainer) / <alpha-value>)';
     --color-primaryFixed: 'rgb(var(--color-primaryFixed) / <alpha-value>)';
     --color-primaryFixedDim: 'rgb(var(--color-primaryFixedDim) / <alpha-value>)';
     --color-primaryPaletteKeyColor: 'rgb(var(--color-primaryPaletteKeyColor) / <alpha-value>)';
     --color-scrim: 'rgb(var(--color-scrim) / <alpha-value>)';
     --color-secondary: 'rgb(var(--color-secondary) / <alpha-value>)';
     --color-secondaryContainer: 'rgb(var(--color-secondaryContainer) / <alpha-value>)';
     --color-secondaryFixed: 'rgb(var(--color-secondaryFixed) / <alpha-value>)';
     --color-secondaryFixedDim: 'rgb(var(--color-secondaryFixedDim) / <alpha-value>)';
     --color-secondaryPaletteKeyColor: 'rgb(var(--color-secondaryPaletteKeyColor) / <alpha-value>)';
     --color-shadow: 'rgb(var(--color-shadow) / <alpha-value>)';
     --color-surface: 'rgb(var(--color-surface) / <alpha-value>)';
     --color-surfaceBright: 'rgb(var(--color-surfaceBright) / <alpha-value>)';
     --color-surfaceContainer: 'rgb(var(--color-surfaceContainer) / <alpha-value>)';
     --color-surfaceContainerHigh: 'rgb(var(--color-surfaceContainerHigh) / <alpha-value>)';
     --color-surfaceContainerHighest: 'rgb(var(--color-surfaceContainerHighest) / <alpha-value>)';
     --color-surfaceContainerLow: 'rgb(var(--color-surfaceContainerLow) / <alpha-value>)';
     --color-surfaceContainerLowest: 'rgb(var(--color-surfaceContainerLowest) / <alpha-value>)';
     --color-surfaceDim: 'rgb(var(--color-surfaceDim) / <alpha-value>)';
     --color-surfaceTint: 'rgb(var(--color-surfaceTint) / <alpha-value>)';
     --color-surfaceVariant: 'rgb(var(--color-surfaceVariant) / <alpha-value>)';
     --color-tertiary: 'rgb(var(--color-tertiary) / <alpha-value>)';
     --color-tertiaryContainer: 'rgb(var(--color-tertiaryContainer) / <alpha-value>)';
     --color-tertiaryFixed: 'rgb(var(--color-tertiaryFixed) / <alpha-value>)';
     --color-tertiaryFixedDim: 'rgb(var(--color-tertiaryFixedDim) / <alpha-value>)';
     --color-tertiaryPaletteKeyColor: 'rgb(var(--color-tertiaryPaletteKeyColor) / <alpha-value>)';
    }

    Theme.tsx

    import {
      createContext,
      useContext,
      useState,
      useEffect
    } from "react";
    
    import {
      useColorScheme, 
      VariableContextProvider
    } from 'nativewind';
    
    import {
      argbFromHex,
      hexFromArgb,
      DynamicScheme,
      Hct,
    } from "@material/material-color-utilities";
    
    function toCSSVars(colors) {
      let cssVars = {};
      for (const [key, value] of Object.entries(colors)) {
        cssVars[`--color-${key}`] = hexFromArgb(value);
      }
      return cssVars;
    }
    
    const ThemeContext = createContext();
    
    export const useTheme = () => {
      return useContext(ThemeContext);
    };
    
    export const Theme = ({ children, sourceColor = "#00FF00" }) => {
      const {colorScheme} = useColorScheme()
    
      const createThemeObject = (isDark) => {
        const scheme = new DynamicScheme({
          sourceColorHct: Hct.fromInt(argbFromHex(sourceColor)),
          isDark,
          contrastLevel: 0,
          variant: 2,
        });
    
        return {
          background: scheme.background,
          error: scheme.error,
          errorContainer: scheme.errorContainer,
          inverseOnSurface: scheme.inverseOnSurface,
          inversePrimary: scheme.inversePrimary,
          inverseSurface: scheme.inverseSurface,
          neutralPaletteKeyColor: scheme.neutralPaletteKeyColor,
          neutralVariantPaletteKeyColor: scheme.neutralVariantPaletteKeyColor,
          onBackground: scheme.onBackground,
          onError: scheme.onError,
          onErrorContainer: scheme.onErrorContainer,
          onPrimary: scheme.onPrimary,
          onPrimaryContainer: scheme.onPrimaryContainer,
          onPrimaryFixed: scheme.onPrimaryFixed,
          onPrimaryFixedVariant: scheme.onPrimaryFixedVariant,
          onSecondary: scheme.onSecondary,
          onSecondaryContainer: scheme.onSecondaryContainer,
          onSecondaryFixed: scheme.onSecondaryFixed,
          onSecondaryFixedVariant: scheme.onSecondaryFixedVariant,
          onSurface: scheme.onSurface,
          onSurfaceVariant: scheme.onSurfaceVariant,
          onTertiary: scheme.onTertiary,
          onTertiaryContainer: scheme.onTertiaryContainer,
          onTertiaryFixed: scheme.onTertiaryFixed,
          onTertiaryFixedVariant: scheme.onTertiaryFixedVariant,
          outline: scheme.outline,
          outlineVariant: scheme.outlineVariant,
          primary: scheme.primary,
          primaryContainer: scheme.primaryContainer,
          primaryFixed: scheme.primaryFixed,
          primaryFixedDim: scheme.primaryFixedDim,
          primaryPaletteKeyColor: scheme.primaryPaletteKeyColor,
          scrim: scheme.scrim,
          secondary: scheme.secondary,
          secondaryContainer: scheme.secondaryContainer,
          secondaryFixed: scheme.secondaryFixed,
          secondaryFixedDim: scheme.secondaryFixedDim,
          secondaryPaletteKeyColor: scheme.secondaryPaletteKeyColor,
          shadow: scheme.shadow,
          surface: scheme.surface,
          surfaceBright: scheme.surfaceBright,
          surfaceContainer: scheme.surfaceContainer,
          surfaceContainerHigh: scheme.surfaceContainerHigh,
          surfaceContainerHighest: scheme.surfaceContainerHighest,
          surfaceContainerLow: scheme.surfaceContainerLow,
          surfaceContainerLowest: scheme.surfaceContainerLowest,
          surfaceDim: scheme.surfaceDim,
          surfaceTint: scheme.surfaceTint,
          surfaceVariant: scheme.surfaceVariant,
          tertiary: scheme.tertiary,
          tertiaryContainer: scheme.tertiaryContainer,
          tertiaryFixed: scheme.tertiaryFixed,
          tertiaryFixedDim: scheme.tertiaryFixedDim,
          tertiaryPaletteKeyColor: scheme.tertiaryPaletteKeyColor,
        };
      };
    
      const [theme, setTheme] = useState(() => 
        createThemeObject(colorScheme === "dark")
      );
    
      useEffect(() => {
        const newTheme = createThemeObject(colorScheme === "dark");
        setTheme(newTheme);
      }, [colorScheme, sourceColor]);
    
      const value = { theme, setTheme };
      return (
        <ThemeContext.Provider
          value={value}
        >
          <VariableContextProvider value={toCSSVars(theme)}>
            {children}
          </VariableContextProvider>
        </ThemeContext.Provider>
      )
    };

    _layout.tsx

    import "./global.css"
    
    import { Stack } from "expo-router";
    
    import { Theme } from '@/components/Theme.tsx';
    
    export default function RootLayout() {
      return (
        <Theme>
          <Stack />
        </Theme>
      );
    }

    index.tsx

    import { Text, View } from "react-native";
    
    import { useTheme } from '@/components/Theme.tsx';
    
    export default function Index() {
      const { theme, setTheme } = useTheme()
    
      console.log('theme', theme);
    
      return (
        <View className="flex-1 bg-primary/50 justify-center items-center">
          <Text className="text-onPrimary/50">Edit app/index.tsx to edit this screen.</Text>
        </View>
      );
    }

    :)

  17. added a commit that references this issue on Mar 30, 2026
    bea222c
  18. danstepanov commented on Mar 30, 2026

    @danstepanov
    Member

    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.

  19. added a commit that references this issue on Mar 30, 2026
    099fd8f
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions