Programmatic dynamic classes do not render

[itpropro]

I started using windicss in a Nuxt project and I have a lot of code like this:

      <NuxtLink
        v-for="(entry, index) in entries"
        :key="index"
        :to="entry.url"
        class="group flex items-center px-2 py-2 text-sm leading-6 font-normal rounded-md"
        :class="selectedClass(entry.url)"
      >
...
    function selectedClass(url) {
      return route.value.path === url
        ? 'bg-cyan-800 text-white'
        : 'text-cyan-100 hover:text-white hover:bg-cyan-600'
    }

But the above classes do not get evaluated. What can I do to make this work?
EDIT: I have the most current version of Nuxt with vue-windicss-preprocess added as stated in the documentation.

[theo-stocchetti]

You can add your properties on safe list :

    WindiCSS({
      safelist: ['prose', 'prose-sm', 'm-auto', 'bg-cyan-800']
    })

At the same subject, I would like to find an indication for using a regex pattern on the safe list : bg-cyan-xxx , bg-xxx-xxx , '/^bg-\w+-\d{2,3}/'

[itpropro]

Thanks for your reply! I hoped there would be another way, as in the current version of tailwindcss it was not necessary to add these to the safelist.

[arpadgabor]

I have also encountered this issue. Such a feature would be useful for defining default classes in props (or objects where you can style an element based on a key) for more advanced styling (see Vue-Tailwind framework as example).

One solution I see that could work is exposing a function like apply(class) that can be used to define classes programatically and inject into the stylesheet.

[voorjaar]

I have also encountered this issue. Such a feature would be useful for defining default classes in props (or objects where you can style an element based on a key) for more advanced styling (see Vue-Tailwind framework as example).

One solution I see that could work is exposing a function like apply(class) that can be used to define classes programatically and inject into the stylesheet.

Thank you. I agree with this. But I think we will add twbg-red-500, add this class in the preprocessing, and remove the decorator, so that it will not affect the runtime, but also can complete the work.

[alexanderniebuhr]

cc @voorjaar do not know if that is anything helpful. But I liked the inspiration here. Just take it as an additional thought :) windicss/svelte-windicss-preprocess#35 (comment)

[voorjaar]

cc @voorjaar do not know if that is anything helpful. But I liked the inspiration here. Just take it as an additional thought :) windicss/svelte-windicss-preprocess#35 (comment)

Yes. that was what I mean.

[voorjaar]

we have a template syntax to solve this.

// .vue
import { windi } from 'windicss/helpers';

direction = windi`flex-row ...`

then we need vue preprocessor to support this.

we should match windi wrapped classes with regex, then interpret them when building css. @hannoeru

[hannoeru]

I think use https://github.com/windicss/nuxt-windicss-module can solve this problem, it will scan entire file and find classes.

[voorjaar]

Then we should archive this repo. Is there still someone using webpack with vue?

[itpropro]

we have a template syntax to solve this.

// .vue
import { windi } from 'windicss/helpers';

direction = windi`flex-row ...`

then we need vue preprocessor to support this.

we should match windi wrapped classes with regex, then interpret them when building css. @hannoeru

This doesn't work for me with the following code (with both, windicss and/or vue-windicss-preprocess):

<script>
import { windi } from 'windicss/helpers'
export default {
  setup() {
    const menuDefault = windi`bg-white text-brand-black`
    return { menuDefault }
  },
}
</script>

For now, I try to work with @apply statements wherever possible, but I don't really like using separate JS for this. It takes away the flexibility to create SFCs without a script block.

Then we should archive this repo. Is there still someone using webpack with vue?

As long as Vite is still in alpha and most production vue deployments are still vue 2 with webpack of course, this is the most effective way of using windicss in vue :)

[hannoeru]

@itpropro We have a webpack plugin can work with Vue 2, can you try it?