[v4] Best way to share design system configuration now that presets have been deleted

[lauthieb]

Hello,

In TailwindCSS v2 and v3, in our design system, we used to distribute a preset like this:

module.exports = {
  theme: {
    accentColor: {
      background: {
        main: "var(--vp-semantic-color-background-main)",
        alternative: "var(--vp-semantic-color-background-alternative)",
      },
      container: {
        brand: "var(--vp-semantic-color-container-brand)",
        neutral: "var(--vp-semantic-color-container-neutral)",
        quiet: "var(--vp-semantic-color-container-quiet)",
        overlay: "var(--vp-semantic-color-container-overlay)",
        catchy: "var(--vp-semantic-color-container-catchy)",
        "commercial-catchy":
          "var(--vp-semantic-color-container-commercial-catchy)",
        "commercial-neutral":
          "var(--vp-semantic-color-container-commercial-neutral)",
      },
    },
    backgroundColor: {
      background: {
        main: "var(--vp-semantic-color-background-main)",
        alternative: "var(--vp-semantic-color-background-alternative)",
      },
      container: {
        brand: "var(--vp-semantic-color-container-brand)",
        neutral: "var(--vp-semantic-color-container-neutral)"
      },
    },
  },
  plugins: [
    function ({ addUtilities }) {
      const newUtilities = {
        "@screen sm": {
          ".text-subtitle-m": {
            "text-transform":
              "var(--vp-semantic-typography-screen-s-subtitle-m-text-case)",
            "text-decoration":
              "var(--vp-semantic-typography-screen-s-subtitle-m-text-decoration)",
            "letter-spacing":
              "var(--vp-semantic-typography-screen-s-subtitle-m-letter-spacing)",
            "font-size":
              "var(--vp-semantic-typography-screen-s-subtitle-m-font-size)",
            "line-height":
              "var(--vp-semantic-typography-screen-s-subtitle-m-line-height)",
            "font-weight":
              "var(--vp-semantic-typography-screen-s-subtitle-m-font-weight)",
            "font-family":
              "var(--vp-semantic-typography-screen-s-subtitle-m-font-family)",
            "font-variation-settings":
              '"opsz" var(--vp-semantic-typography-screen-s-subtitle-m-optical-sizing)',
            "-webkit-font-smoothing":
              "var(--vp-semantic-typography-screen-s-subtitle-m-webkit-font-smoothing)",
          },
        },
        "@screen md": {
          ".text-subtitle-m": {
            "text-transform":
              "var(--vp-semantic-typography-screen-m-subtitle-m-text-case)",
            "text-decoration":
              "var(--vp-semantic-typography-screen-m-subtitle-m-text-decoration)",
            "letter-spacing":
              "var(--vp-semantic-typography-screen-m-subtitle-m-letter-spacing)",
            "font-size":
              "var(--vp-semantic-typography-screen-m-subtitle-m-font-size)",
            "line-height":
              "var(--vp-semantic-typography-screen-m-subtitle-m-line-height)",
            "font-weight":
              "var(--vp-semantic-typography-screen-m-subtitle-m-font-weight)",
            "font-family":
              "var(--vp-semantic-typography-screen-m-subtitle-m-font-family)",
            "font-variation-settings":
              '"opsz" var(--vp-semantic-typography-screen-m-subtitle-m-optical-sizing)',
            "-webkit-font-smoothing":
              "var(--vp-semantic-typography-screen-m-subtitle-m-webkit-font-smoothing)",
          },
        },
        "@screen lg": {
          ".text-subtitle-m": {
            "text-transform":
              "var(--vp-semantic-typography-screen-l-subtitle-m-text-case)",
            "text-decoration":
              "var(--vp-semantic-typography-screen-l-subtitle-m-text-decoration)",
            "letter-spacing":
              "var(--vp-semantic-typography-screen-l-subtitle-m-letter-spacing)",
            "font-size":
              "var(--vp-semantic-typography-screen-l-subtitle-m-font-size)",
            "line-height":
              "var(--vp-semantic-typography-screen-l-subtitle-m-line-height)",
            "font-weight":
              "var(--vp-semantic-typography-screen-l-subtitle-m-font-weight)",
            "font-family":
              "var(--vp-semantic-typography-screen-l-subtitle-m-font-family)",
            "font-variation-settings":
              '"opsz" var(--vp-semantic-typography-screen-l-subtitle-m-optical-sizing)',
            "-webkit-font-smoothing":
              "var(--vp-semantic-typography-screen-l-subtitle-m-webkit-font-smoothing)",
          },
        },
      };

      addUtilities(newUtilities);
    },
  ],
};

and projects used it like this in their tailwindcss.config.js file:

import preset from "@xxx/design-tokens/tailwindcss-preset";

export default {
  presets: [preset],
}

I've just upgraded a project to TailwindCSS v4, so I did this:

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

And now I face this error for my plugin with addUtilities that worked well in the past:

[vite] (client) Pre-transform error: `addUtilities({ '@screen sm' : … })` defines an invalid utility selector. Utilities must be a single class name and start with a lowercase letter, eg. `.scrollbar-none`.
  Plugin: @tailwindcss/vite:generate:serve
  File: tailwindcss-v4/src/index.css

I know I can do all the @theme declarations inside the CSS file of my project, but my question is more, how (as a design system team) we can distribute this new CSS configuration statements with @layer @theme, etc + the utilities for typography we created because I see that "preset" feature has been removed.

The goal is to avoid duplications in all projects consuming our design system, in a way that we've done in the past with preset by just importing them.

Thank you very much for your help.

[wongjn]

Presets in v4 are now CSS files. You'd @import these CSS files into your own. So:

/* preset.css */

@theme {
  --accent-color-main: var(--vp-semantic-color-background-main);
  --accent-color-alternative: var(--vp-semantic-color-background-alternative);
  …
}

@utility text-subtitle-m {
  /**
   * Try adding `@reference "tailwindcss/theme.css"` at the top of this file if
   * you get unknown variant errors.
   */
  @variant sm {
    text-transform: var(--vp-semantic-typography-screen-s-subtitle-m-text-case);
    text-decoration: var(--vp-semantic-typography-screen-s-subtitle-m-text-decoration);
    …
  }
}

@import "tailwindcss";
@import "@xxx/design-tokens/tailwindcss-preset";

[lauthieb]

Thanks a lot, that works perfectly! 🙏