[v3] Conditionally Applied Classes Not Included in Dev/Prod Build

[XenBG]

In my Vue 3 application, using TailwindCSS v3, I primarily style elements by adding TailwindCSS utility classes. However, I’ve encountered an issue where classes that I conditionally add based on specific cases or dynamically computed values are not included in the production CSS build, leading to missing styles in the production environment.

Steps to Reproduce:

1. Apply TailwindCSS utility classes conditionally or dynamically within Vue 3 components.

<template>
  <div :class="messageClass">Message text...</div>
</template>

<script setup>
import { ref, computed, defineProps } from 'vue'

// Define the `color` prop for dynamic text color control
const props = defineProps({
  color: {
    type: String,
    default: 'slate'
  }
})

// Dynamically applied Tailwind class, which might be removed on build
const messageClass = computed(() => `text-base text-${props.color}-600 p-4`)
</script>

2. Build the project for production.
3. Observe that some of these conditionally applied classes are missing from the final production CSS, resulting in styling inconsistencies.

Expected Behavior: TailwindCSS should recognize all utility classes that are conditionally or dynamically applied, and include them in the production build.

Notes:

1. Safelist: I’m aware of the safelist feature, but given the variability and context-specific use of these classes, maintaining a safelist becomes cumbersome and impractical.
2. Computed Mapping: I have also tried computed mappings to dynamically apply classes but this is quite like the safelist feature.
3. Inline Styles: While inline styles offer an alternative, they limit the reusability and theming benefits that TailwindCSS utility classes provide, especially when using dark mode or responsive classes.

This issue occurs particularly when using computed properties, conditional rendering, or classes based on props.

[adamwathan]

Hey! Yep this is expected and covered in the docs:

https://tailwindcss.com/docs/content-configuration#dynamic-class-names

Tailwind produces a static CSS file at build time so there’s always going to be some limit to the level of dynamism it can support like this. For example if your code hit an API when the user visits the page that returns a random color, there’s no way we can ever account for that because the stylesheet is already compiled into a static asset before anyone visits the page.

Your best bets are mapping to a static list and inline styles like you mentioned, those are the recommended tools for this sort of thing and what we do in our own code.