Examples without using @headless-ui about tailwindcss-radix

[rrmesquita]

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.

[ecklf]

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 👍🏻.