tailwindcssOriginClass not works when tailwindcss prefix is applied in config file.

[mohammadhosseinmoradi]

tailwindcssOriginClass not works when tailwindcss prefix is applied in config file.

[ycs77]

Hi @mohammadhosseinmoradi, you must be set your custom tailwindcss origin class with your prefix into tailwind.config.js's safelist and originClass into <Float>:

tailwind.config.js

import { tailwindcssOriginSafelist } from '@headlessui-float/vue'

/** @type {import('tailwindcss').Config} */
export default {
  prefix: 'tw-',
  safelist: tailwindcssOriginSafelist.map(className => `tw-${className}`),
}

App.vue

<template>
  <Float
    placement="bottom-start"
    :offset="4"
    enter="tw-transition tw-duration-200 tw-ease-out"
    enter-from="tw-scale-95 tw-opacity-0"
    enter-to="tw-scale-100 tw-opacity-100"
    leave="tw-transition tw-duration-150 tw-ease-in"
    leave-from="tw-scale-100 tw-opacity-100"
    leave-to="tw-scale-95 tw-opacity-0"
    :origin-class="originClass"
  >
</template>

<script setup>
import { Float, tailwindcssOriginClassResolver } from '@headlessui-float/vue'

function originClass(placement) {
  const className = tailwindcssOriginClassResolver(placement)
  return className ? `tw-${className}` : ''
}
</script>