ycs77 / headlessui-float

Easily use Headless UI with Floating UI to position floating elements.
https://headlessui-float.vercel.app
MIT License
342 stars 11 forks source link

Support RTL for tailwind css origin class resolver #82

Closed ycs77 closed 9 months ago

ycs77 commented 9 months ago

Fix #63

Usage

You must be set the tailwindcssRtlOriginSafelist into tailwind.config.js's safelist:

tailwind.config.js

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

/** @type {import('tailwindcss').Config} */
export default {
  safelist: [...tailwindcssRtlOriginSafelist],
}

Using with react:

import { Float, tailwindcssRtlOriginClassResolver } from '@headlessui-float/react'

export default function ExampleRtlOriginClass() {
  return (
    <Float originClass={tailwindcssRtlOriginClassResolver}>
  )
}

Using with vue:

<template>
  <Float :origin-class="tailwindcssRtlOriginClassResolver">
</template>

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