Computed classes for arbitrary color values do not render correctly in Vue 3

[wmelton]

What version of Tailwind CSS are you using?

For example: v3.4.1

What build tool (or framework if it abstracts the build tool) are you using?

For example: postcss-cli 8.3.1, Next.js 10.0.9, webpack 5.28.0
Nuxt @3.9.0

What version of Node.js are you using?

v20.9.90

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

[A Tailwind Play link or public GitHub repo that includes a minimal reproduction of the bug. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways.

A reproduction is required when filing an issue — any issue opened without a reproduction will be closed and you'll be asked to create a new issue that includes a reproduction. We're a small team and we can't keep up with the volume of issues we receive if we need to reproduce each issue from scratch ourselves.](https://gist.github.com/wmelton/cea356e2d4fd6364afe15f10eb98fe23)

Describe your issue

When generating arbitrary values for a table that loads file names dynamically on the fly, we return a string from a computed function that is a valid arbitrary color tailwind class. However, the class color is never rendered. We suspect it is being purged but there is no effective way to debug this we have discovered. If we manually enter the computed class (eg. fill-[#f4f4f4]) then it works as expected. Using a computed function like this it does not though.

[adamwathan]

Hey! Check out the documentation on this here: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

[wmelton]

Hey @adamwathan ,

I read that article before opening this as an issue. I would think what we're doing here satisfies the constraint of generating a static string.

We are using an object with a number of arbitrary color values the client wants for different svg icons which is why we aren't building them in to the theme. They are defined like this as a static object:

export const allDocTypes = {
xls: {
    type: "application/vnd.ms-excel",
    primaryColor: "#01A63E",
    secondaryColor: "#E8F6ED"
  }
}

Our code determines file extension in a computed function then returns a static string to the class attribute on the div like in the example I shared.

const getFileClasses = computed(() => (fileName) => {
    const extension = fileName.split(".").pop().toLowerCase();
    const classes = allDocTypes[extension] || allDocTypes["default"];
    return {
      primaryColor: `fill-[${classes.primaryColor}]`,
      secondaryColor: `bg-[${classes.secondaryColor}]`,
    };
  });

So the computed function returns bg-[#01A63E] and/or fill-[#E8F6ED] to the div/svg as a precomputed string. I'm not sure how else to handle this unless we went through the process of mapping all of these arbitrary color values to custom theme values, which feels like a bad option for this project.

Is there a way to have tailwind determine which classes to purge/build post-build/post-component render so all final class names are established before tailwind decides what to purge/build itself?

This is Nuxt3/Vue3 that we're working in.

[wongjn]

I would think what we're doing here satisfies the constraint of generating a static string.

It doesn't, as per the documentation:

The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.

If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:

Don’t construct class names dynamically

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes.
Instead, make sure any class names you’re using exist in full:

Always use complete class names

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

You are using string interpolation in your code:

primaryColor: `fill-[${classes.primaryColor}]`,
secondaryColor: `bg-[${classes.secondaryColor}]`,

In your example, bg-[#01A63E] and fill-[#E8F6ED] do not exist as plain string text. You can test this by doing a text search in your code editor for these texts and see that it cannot find these strings in any files covered by the content file globs.

Instead, you could consider using the style attribute for your dynamic values.

[wmelton]

@wongjn I suppose the documentation should explicitly say that computed functions are also not allowed then because technically a computed function is returning a fully static, precomputed string, e.g. not using inline template literals, etc.

[wmelton]

I thought the whole purpose of computed functions was to return computed values that are static to the template at browser render time. Learned something new today?

[wongjn]

[…] because technically a computed function is returning a fully static, precomputed string

It does not matter what the function returns, since from Tailwind's perspective, it does not "know" that it is a function. Tailwind scans files as plain text, like if they where files .txt files – it does not evaluate any code.

I thought the whole purpose of computed functions was to return computed values that are static to the template at browser render time.

That may be the case, but Tailwind has already run and is no longer in the build process by the time we get to this browser render phase.

[wmelton]

Not that my conversation here is going to change it, but it seems like Tailwind would be a more powerful solution if it did indeed wait until all computed functions executed before scanning the rendered components to determine what css values to include. 🤷‍♂️

[a2sc]

@wmelton You can achieve that with binding inline styles instead of binding HTML classes, using Objects:

const styleObject : reactive({
    color: "white", // code to get your dynamic value here ...
    backgroundColor: "black", // code to get your dynamic value here ...
});

<div :style="styleObject" />

See the docs: https://vuejs.org/guide/essentials/class-and-style.html#binding-to-objects-1