Tailwind 4 prep

[djmtype]

Tailwind 4 is still in alpha. Still it's something to be considered.

Currently, neither Cobalt or Terrazzo will process a value of initial. For example, if you don't want the entire Tailwind color library included in your project, --color-*: initial needs to be specified. Unfortunately, writing this under the color group, results in an error. It seems initial is an invalid value.

So is the initial value invalid by Design Tokens Community Group spec, or by Terrazzo's linter?

BTW, I'm just using the css plugin not the tailwind plugin since Tailwind 4 doesn't have a config file.

[drwpow]

So is the initial value invalid by Design Tokens Community Group spec, or by Terrazzo's linter?

Both; initial is unique to CSS and doesn’t describe an actual color, and doesn’t have parallels in languages other than CSS. The idea of design tokens is “declare once; generate code anywhere” and so concepts that are platform-centric like this haven’t yet made it into the spec.

Currently, neither Cobalt or Terrazzo will process a value of initial. For example, if you don't want the entire Tailwind color library included in your project, --color-*: initial needs to be specified.

Ah this is a good suggestion. But is there a way to configure this manually in your Tailwind config to add this?

Or if this is just needed universally, can you think of a way that the Tailwind plugin can just generate this for us? What settings, if any, would be needed by the Tailwind plugin?

What I’m getting at is—perhaps there’s a way to fix this either in the documentation for using this plugin. Or we can provide an option in the plugin to generate the correct values we need. I just don’t use Tailwind myself so when you say --color-*: initial needs to be specified, I would love to see a complete, full configuration example of what you’d like the code to be and we can figure out how to make that happen.

[djmtype]

@drwpow Ah, right, that makes sense. I'm so css-minded, I forgot about other platforms. Currently, there is no Tailwind config with v4. So, --color-*: initial is specified within a CSS file.

Maybe some Terrazzo post transform can solve it?

Otherwise, just hard-coding --color-*: initial in a different css file isn't the end of the world.

Currently, this is my setup, so it's more than just excluding Tailwind's colors:

@theme {
  --color-*: initial;
  --animate-*: initial;
  --blur-*: initial;
  --radius-*: initial;
  --shadow-*: initial;
  --inset-shadow-*: initial;
  --drop-shadow-*: initial;
  --spacing-*: initial;
  --width-*: initial;
  --font-family-*: initial; 
  --font-size-*: initial;
  --letter-spacing-*: initial;
  --line-height-*: initial;
  --perspective-*: initial;
  --transition-*: initial;
}

In any case Tailwind v4 is still in alpha so plenty of change can happen, and I doubt they'll dump their config setup entirely for good reason.

[drwpow]

Did you have a thought as to the question I proposed? Is this solvable with documentation? (maybe it is!)

[djmtype]

@drwpow TL;DR: This probably doesn't require a plugin; maybe just a post transform.

Tailwind v4 is vastly different from v3 at this stage as it doesn't rely on a Tailwind config file. In fact, its v3 JS config file would be ignored.

Extending on my use-case made earlier, Tailwind v4 requires the following 2 lines, plus any initial rules within the theme layer, where I want to exclude parts of Tailwind, such as its color swatches:

/* tailwind-v4-config.css */

@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/utilities" layer(utilities);

@theme {
   /* Exclude all Tailwind color swatches. */
  --color-*: initial;
   
   /* Brand color swatches */
  --color-rose: hsl(347 77% 50%);
  --color-primary: var(--color-rose);
}

The utilities layer is required if you want your css properties to be translated to utility classes. This is one of the main reasons I'm leaning into Tailwind 4 as this makes it much easier than v3.
This is similar to Cobalt's utilities integration. https://cobalt-ui.pages.dev/integrations/css#utility-css

Besides, if I'm writing a publicly available theme, most developers use/want Tailwind.

The color object would be declared as:

{
  "color": {
    "$type": "color",
      "*": {
        "$value": "#bada55" // any color value
      }
  }
}

Easiest solution (but, not thought through) should work for any property, not just color, that has a token.id value of *.

// Tested with Cobalt

transform(token, mode) {
    if (token.id.includes('*')) {
        if (typeof token.$value === 'string') {
            return 'initial';
        } else {
            return token.$value;
        }
    }
    return token.$value;
}

The other issue – the final result wraps all within :root, and these specific props need to be defined within, @theme. I honestly don't know if Terrazzo supports css layers yet.

In any case, I'm probably over-thinking this one niche thing that can be solved manually, and wasting your time. Thanks for all your feedback BTW.

[drwpow]

TL;DR: This probably doesn't require a plugin; maybe just a post transform.

Ah thank you for explaining! I hadn’t used Tailwind 4 yet so I was lacking context on what a different mental model it was, but your explanations make sense and now I understand how you’re approaching it.

While I do see what you’re saying, I would like to have some plugin that takes the learning curve out of connecting Tailwind with DTCG tokens, because I see more and more people trying to connect these two things (and I only anticipate even more people will try and do it—it may even become the most common way of managing design systems in CSS eventually!). With the new plugin API in 2.0/Terrazzo, there’s more that plugins can do under-the-hood for these types of transformations.

So even if we don’t come up with a solution that works for everybody, coming up with a solution that works some of the time is a huge win for me. Terrazzo will be in beta most of this year, so I don’t see why we couldn’t rethink @terrazzo/plugin-tailwind to center around 4 (and keep @cobalt-ui/plugin-tailwind centered around 3).

The other issue – the final result wraps all within :root

Ah that should be configurable, you’re right. For most people, most of the time, having the lowest-specificity works. But this could be easily-configurable for edge cases (like Tailwind 4)

these specific props need to be defined within, @theme. I honestly don't know if Terrazzo supports css layers yet.

This is a great thought! I’ve thought about supporting CSS layers but it’s not yet obvious to me how to output these in an intuitive way that Just Works™ for all different setups. Perhaps it’s because there’s not a ton of prior art yet on how people are using layers for their design system / there’s not a popular UI kit that uses it (yet) that I’ve run across. But if you’ve run across any examples of “this seems like a great general-application usage of CSS layers for design tokens” I’d love to take a look!

[drwpow]

In any case, I'm probably over-thinking this one niche thing that can be solved manually, and wasting your time. Thanks for all your feedback BTW.

Not at all! 🙂 This is something I’d love to solve with a plugin. Even if it only does some of the work, any amount of work saved is valuable. Figma (my company) and Netlify are just 2 of the many companies investing in DTCG tokens + Tailwind CSS (OK, admittedly, Figma isn’t using it yet but we’re exploring it, and I know many other companies are in the same boat).

So all that to say, I may just end up bugging you for feedback on @terrazzo/plugin-tailwind as I try some things out over the coming weeks, if that’s OK!

[djmtype]

Absolutely, @drwpow. Hit me up.

So all that to say, I may just end up bugging you for feedback on @terrazzo/plugin-tailwind as I try some things out over the coming weeks, if that’s OK!