ecklf/tailwindcss-radix

Examples without using @headless-ui

Jighdan opened this issue · 2 comments

Jighdan commented

Looking at the Dialog component, any way of managing the transitions without bringing @headless-ui in? Getting two headless libraries seems dull

Great job on the repo :-)

ecklf commented

I don't think this is a zero-sum game, au contraire composing multiple headless libraries allows you to pull in their unique functionality without compromising on design. The Transition component was designed with Tailwind in mind, so it's working great for the use-case. Feel free to use your preferred solution 👍🏻.

rrmesquita commented

I know this is a bit late, but you can use CSS animations. It works the same as Radix examples that use stitches. Here is an example:

// tailwind.config.js

animation: {
    'fade-in':  'fade-in 300ms ease-in-out',
    'fade-out': 'fade-out 300ms ease-in-out',
},
keyframes: {
    'fade-in': {
        from: { opacity: 0 },
        to:   { opacity: 1 },
    },
    'fade-out': {
        from: { opacity: 1 },
        to:   { opacity: 0 },
    },
},

Then in your components, you reference it with radix-state-open:animate-fade-in and radix-state-closed:animate-fade-out.

It's not perfect but it gets the job done without depending on a Transition component, or repeating boilerplate code with stitches.

  • 🚀1