Search code examples
vue.jsnuxt.jstailwind-cssstoryblok

Is Tailwind class binding possible through Storyblok?

I'm trying to develop some components that will be used by our content editors in Storyblok and there's a use case where we would like to define layout properties (using Tailwind's classes) through props that will be coming from Storyblok components.

As an example, image I am passing the width prop through storyblok giving a value of w-1/2 which is a Tailwind class. As you see on the right the class is applied just fine to the element but there's no actual impact on the page. I have tried the same with many other classes (either for background or border colors or for text styling etc, tried to use Tailwind classes as props coming from Storyblok but didn't work).

My only guess is that Nuxt is a server side application and the CSS gets compiled on build time, therefore any new class binding to the DOM will not reflect the actual CSS that they represent. Is this right? If yes, is there a way to make this happen and work?

The code for the widthSetter component is as simple as that

<template>
  {{blok.width}}
  <div v-editable="blok" :class="[ blok.width ]">
    <component
      v-for="value in blok.blocks"
      :key="value._uid"
      :is="value.component"
      :blok="value"
    />
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  blok: {
    type: Object,
    required: true,
  },
})
</script>
Solution

  • You need to add Complete Class Names.
    As there is no w-1/2 in your code, TW won't generate the class.

    You can workaround the issue by adding the class to safelist.
    Doc: https://tailwindcss.com/docs/content-configuration#safelisting-classes

    module.exports = {
  safelist: ['w-1/2'],
  //...
}

    Then w-1/2 utility will be generated regardless if it shows up in your code or not.