[v4] How to have tailwind css vars applied not to :root?

[artaommahe]

We're migrating from js-based config to tailwind-based. We have a specific case when two sets of tailwind tokens (two different themes) exist on the same page together - we're slowly migrating from the old design to the new one.

With js-based config we've resolved conflicts with adding important: '.new_design' to the second config and nesting all new components under .new_design class. We're not using prefixes cause they make dx worse and we want to use regular tailwind classes like p-5 text-primary everywhere, but they should have different values for different components/themes.

With css-based config im trying to do smthing similar for the new design theme

@layer theme, base, components, utilities;

@source "../new_design";

@theme inline {
  --*: initial;

  --text-color-primary: #123456;

  --spacing-5: 0.5rem;
}

.new_design {
  @import 'tailwindcss/theme' layer(theme);
  @import 'tailwindcss/utilities' layer(utilities);
}

Note the initial modifier on @theme - without it tailwind sets tailwind-related css vars on :root {} and they conflict with similarly named css vars from another config https://play.tailwindcss.com/MD1r1Zwm36?file=css.

:root, :host {
  --text-color-primary: #123456;
  --spacing-5: 0.5rem;
}
.new_design {
  @layer theme;
  @layer utilities {
    .p-5 {
      padding: var(--spacing-5);
    }
    .text-primary {
      color: var(--text-color-primary);
    }
  }
}

Using inline works fine in general, but it doesn't allow us to use tailwind-related css variables, like var(--text-color-primary), in js code https://tailwindcss.com/docs/upgrade-guide#theme-values-in-javascript or in css modules (especially to map some library's css vars to tailwind css vars) https://tailwindcss.com/docs/upgrade-guide#using-apply-with-vue-svelte-or-css-modules, cause those tailwind css vars are not set for the inlined theme.

Question: how to tell tailwind to set tailwind-related variables not on the :root {} but on some specified selector?

[rozsazoltan]

You don't have this option.

If you use a PostCSS plugin, you can manipulate the output and replace :root with .new_design.

If you don't want to do that, then I think the feature you're looking for is the prefix; that way, TailwindCSS classes won't conflict with other classes - for example, with Bootstrap if you're migrating from it.

• Using a prefix - TailwindCSS v4 Docs

[rozsazoltan]

• https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md

import tailwindcss from '@tailwindcss/postcss';

/** @type {import('postcss').PluginCreator} */
const replaceRootWithNewDesign = () => ({
  postcssPlugin: 'replace-root-with-new_design',
  Once(root) {
    root.walkRules(rule => {
      if (rule.selector === ':root') {
        rule.selector = '.new_design';
      }
    });
  }
});

export default {
  plugins: [
    tailwindcss,
    replaceRootWithNewDesign,
  ]
};

[artaommahe]

sadly a prefix is not an option for us cause it makes dx much worse in terms of writing new components and checking which classes are applied

just in case, do you know if there are plans to have a proper support for such/simultaneous multiple themes cases in v4?

[artaommahe]

(we're using vite with @tailwindcss/vite, so postcss plugin is also not an option for us)