javascript reactjs tailwind-css tailwind-css-4

Custom Tailwind classes not applying

I'm creating custom tailwind light/dark themes however the styles aren't being applied. I've followed along with docs and other help forums but to no avail.

I'm using tailwind alongside React Router 7, hence the syntax in my root.tsx file.

This is what I have:

// root.tsx

export function Layout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en" data-theme="light">
            <head>
                <meta charSet="utf-8" />
                <meta
                    name="viewport"
                    content="width=device-width, initial-scale=1"
                />
                <Meta />
                <Links />
            </head>
            <body>
                {children}
                <ScrollRestoration />
                <Scripts />
            </body>
        </html>
    );
}

export default function App() {
    return (
        <>
            <NavBar />
            <Outlet />
        </>
    );
}

/* app.css */

@import "tailwindcss";
@import "tailwindcss/utilities";

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

@layer base {
    html[data-theme="light"] {
        --color-background: #ffffff;
        --color-primary: #e0f7fa;
        --color-secondary: #b2ebf2;
        --color-text-color: #000000;
        --color-accent: #3eb489;
    }

    html[data-theme="dark"] {
        --color-background: #121212;
        --color-primary: #1e1e1e;
        --color-secondary: #424242;
        --color-text-color: #ffffff;
        --color-accent: #2b7a5d;
    }
}

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
    important: true,
    darkMode: 'class',
    content: ["./app/**/*.{js,ts,jsx,tsx}"],
    theme: {
        // extend: {}
        borderRadius: {
            lg: 'var(--radius)',
            md: 'calc(var(--radius) - 2px)',
            sm: 'calc(var(--radius) - 4px)'
        },
        colors: {
            background: 'var(--color-background)',
            primary: 'var(--color-primary)',
            secondary: 'var(--color-secondary)',
            ['text-color']: 'var(--color-text-color)',
            accent: 'var(--color-accent)',
        },
    },
    plugins: [require("tailwindcss-animate")],
}

A component i'm testing on:

import { AppBar } from "@mui/material";

// my custom classes -- DOES NOT work when switching between data-theme="light" and data-theme="dark"
export const NavBar = () => {
    return <p className="text-text-color">Hello World</p>;
};

// predefined tailwind classes -- WORKS when switching between data-theme="light" and data-theme="dark"
export const NavBar = () => {
    return <p className="text-blue-500 dark:text-red-500">Hello World</p>;
};

Any help would be great, thank you!

Solution

You seem to be trying to use v3 configuration in v4. To configure your custom color values in v4, you'd have them in the CSS file in a @theme block. You'll also want to slightly adjust your CSS variable names to avoid conflict:

@theme {
  --color-background: var(--my-color-background);
  --color-primary: var(--my-color-primary);
  --color-secondary: var(--my-color-secondary);
  --color-text-color: var(--my-color-text-color);
  --color-accent: var(--my-color-accent);
}

@layer base {
    html[data-theme="light"] {
        --my-color-background: #ffffff;
        --my-color-primary: #e0f7fa;
        --my-color-secondary: #b2ebf2;
        --my-color-text-color: #000000;
        --my-color-accent: #3eb489;
    }

    html[data-theme="dark"] {
        --my-color-background: #121212;
        --my-color-primary: #1e1e1e;
        --my-color-secondary: #424242;
        --my-color-text-color: #ffffff;
        --my-color-accent: #2b7a5d;
    }
}

Or you could consider having the light colors as the defaults:

@theme {
  --color-background: #ffffff;
  --color-primary: #e0f7fa;
  --color-secondary: #b2ebf2;
  --color-text-color: #000000;
  --color-accent: #3eb489;
}

@layer base {
    html[data-theme="dark"] {
        --color-background: #121212;
        --color-primary: #1e1e1e;
        --color-secondary: #424242;
        --color-text-color: #ffffff;
        --color-accent: #2b7a5d;
    }
}