View Transitions API support

[martinszeltins]

Since the new View Transitions API is starting to be adopted by frontend frameworks like Nuxt, it would be really nice to have a Tailwind way of adding the CSS classes and properties.

Yea, I like living on the cutting edge 😛

Right now, I end up having to use arbitrary values and custom CSS:

<template>
    <NuxtImg
        class="rounded [view-transition-name:selected-film]"
    />

    <h1 class="text-lg [view-transition-name:header]">
        {{ movie.title }}
    </h1>
</template>

<style>
    ::view-transition-old(header),
    ::view-transition-new(header) {
        width: auto;
    }
</style>

[alexanderson1993]

View transitions are now supported by Astro and React Router/Remix. As this API gets more usage and becomes more popular, it would be excellent to be able to enable and configure the transitions without leaving my markup.

[RyannGalea]

Definitely should be on the roadmap.

[frederichoule]

View Transitions API is also supported by SvelteKit, and the Svelte community heavily relies on Tailwind. I think it should be added to the roadmap!

[RafaelZasas]

Is there any update on this?

[mhornbacher]

There is a nice little plugin if your setup supports those at https://github.com/ekafyi/tailwindcss-view-transitions

[FifthWit]

I absolutely support this