Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support RTL for tailwind css origin class resolver #82

Merged
merged 1 commit into from
Sep 27, 2023
Merged

Conversation

ycs77
Copy link
Owner

@ycs77 ycs77 commented Sep 27, 2023

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>

@ycs77 ycs77 merged commit 56ae1d2 into main Sep 27, 2023
3 checks passed
@ycs77 ycs77 deleted the origin-class-rtl branch September 27, 2023 17:48
@ycs77 ycs77 added the enhancement New feature or request label Nov 19, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

OriginClassResolver not properly works in rtl direction.
1 participant