Am I using custom classes wrong?

[marchershey]

So let's say I have a design that uses many different colors of gray, and I can't remember which gray I use for which component, so instead of remembering text-gray-200/30, and text-gray-600/80, and text-gray-900/10, I would go create a custom class such as text-muted-dark and text-muted-darker.

To do that, I would go into the tailwind.config.js file and extend the theme, like so: (ignore the arbitrary classes above, below is a real example)

module.exports = {
    theme: {
        extend: {
            colors: {
                primary: {
                    DEFAULT: colors.orange[600],
                    light: colors.orange[500],
                    dark: colors.orange[700],
                },
                muted: {
                    DEFAULT: colors.slate[500],
                    light: colors.slate[400],
                    lighter: colors.slate[200],
                    dark: colors.slate[600],
                },

This would then allow me to use classes like text-primary-dark or text-muted-light. Is this not the correct way to do this? Because since I've upgraded to v4, all of those custom classes are broken, and if I have to update all of them, it's not going to be a fun task.

Since I already know the answer to my question (maybe), what is the correct way to do this?

Thanks!

[wongjn]

See https://tailwindcss.com/docs/theme for how to add custom theme configuration in v4.

[bryanvaz]

Ditto on this. I'm trying to transition v3 tailwind styles to v4 and there's no mention in theming docs on how to define the colors for bg-primary, text-primary, dark:bg-primary-dark and dark:text-primary-dark

[wongjn]

You'd use the correct namespace in @theme:

@theme {
  --background-color-primary: …;
  --text-color-primary: …;
  --background-color-primary-dark: …;
  --text-color-primary-dark: …;
}

[marchershey]

Okay, so after doing some research, I wanted to come back and explain it a little better than @wongjn. He's not wrong (unfortunately), he's just doing a bad job at explaining.

Tailwind has converted from a tailwind.config.js configuration to a CSS configuration. Let me explain...

Every bit of configuration that you've made in your tailwind.config.js file, needs to be converted to a @theme CSS configuration. That means if you have something like this:

module.exports = {
    theme: {
        extend: {
            colors: {
                primary: {
                    DEFAULT: colors.orange[600],
                    light: colors.orange[500],
                    dark: colors.orange[700],
                },
                muted: {
                    DEFAULT: colors.slate[500],
                    light: colors.slate[400],
                    lighter: colors.slate[200],
                    dark: colors.slate[600],
                },

You'll need to recreate it in a CSS file, like so:

@theme {
   --color-primary: #f54a00
   --color-primary-light: #ff6900
   --color-primary-dark: #ca3500
   --color-muted: #62748e
   --color-muted-light: #90a1b9
   /* ... and so on ... */
}

It's going to be a huge pain in the ass, and I'm extremely unhappy about it, but now that I fully understand it, it might not be THAT bad in the long run.

At the end of it, your configuration file should be pretty bare.

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
  plugins: [
    tailwindcss(),
  ]
});

...and that's it. The rest should be converted to the @theme config in your CSS file.

I did find a video a day or so ago that really opened my eyes on these new changes. I'll link it below.

https://www.youtube.com/watch?v=ud913ekwAOQ

But the @theme configuration can be found here.

[wongjn]

Using the upgrade script can do some of the leg work for you, if you have a configuration that's compatible.

[marchershey]

@wongjn You are correct, but it only works if you haven't upgraded to v4 already. I've already upgraded and have done a lot of changes so far, so it won't work for me unfortunately.

[marchershey]

So just for shits and giggles I checked out a commit before upgrading to tailwind v4 and ran the upgrade tool and it was definitely worth it, especailly for all the @utility custom classes.

Thanks @wongjn for reminding me about the upgrade script. Your comment made me go back and give it a shot and it's was 1000% worth it.

[bryanvaz]

Ok here's a bit of a weird one along the same lines - is there an expected way to port in this type of declaration, or is it so way out of scope that it was ignored:

tailwind.config.js:

export default {
  content: [
    "./src/**/*.{html,js,cjs,mjs,ts,scss}",
    "./pkg/**/*.templ",
  ],
  theme: {
    extend: {
      borderRadius: {
        ...
      },
      colors: {
        sidebar: {
          DEFAULT: "var(--sidebar-background)",
          foreground: "var(--sidebar-foreground)",
          primary: "var(--sidebar-primary)",
          "primary-foreground": "var(--sidebar-primary-foreground)",
          accent: "var(--sidebar-accent)",
          "accent-foreground": "var(--sidebar-accent-foreground)",
          border: "var(--sidebar-border)",
          ring: "var(--sidebar-ring)",
        },
      },
    },
  },
  plugins: [],
}

This is also using postcss

app.scss:

@use "tailwindcss";
@config "../../../tailwind.config.js";

@mixin light-styles {
  ...
  --sidebar-background: hsl(0 0% 98%);
  --sidebar-foreground: hsl(240 5.3% 26.1%);
}
@mixin dark-styles {
  ...
  --sidebar-background: hsl(240 5.9% 10%);
  --sidebar-foreground: hsl(240 4.8% 95.9%);
}
@theme {
  ...
  @include light-styles;
  @include theme-overrides;
}

@layer theme {
  :where(.light, .light *) {
    @include light-styles;
  }
  :where(.dark, .dark *) {
    @include dark-styles;
  }
  @media (prefers-color-scheme: dark) {
    :where(.system, .system *) {
      @include dark-styles;
    }
  }
}

This is all so that on the page we can use the bg-sidebar generated class:
layout.html:

<div class="flex h-full w-full flex-col bg-sidebar" data-sidebar="sidebar">
    ...
</div>

triggering the following generated css class:
app.css:

.bg-sidebar {
    background-color:var(--sidebar-background)
}

This is hacky and works now, but doesn't feel right, and I feel like depending on @config "../../../tailwind.config.js"; is a bad idea for a port that is supposed to be forward looking. However I also don't want to go through all the layout and view files and try to figure out if it's affect by the class naming change so I can change it from bg-sidebar to bg-sidebar-background (if using the new --color-sidebar-background declaration). I only stumbled on the this by accident because I realized the sidebar colors were off even though I had redefined them with the --color-sidebar syntax.

(FYI, this is has a golang/static port of shadcn, so I'm trying to avoid as much of the legacy tailwindv3 stuff that shadcn had to haul into the tailwindv4 version)

[wongjn]

The v4 equivalent of your colors.sidebar would be:

@theme {
  --color-sidebar: var(--sidebar-background);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

If that helps at all.