You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
All notable changes to this project will be documented in this file.
4
+
5
+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
A plugin for customizing styles for the [View Transitions Web API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API).
6
+
7
+
## Installation
8
+
9
+
```sh
10
+
npm install -D tailwindcss-view-transitions
11
+
```
12
+
13
+
Then add the plugin to your `tailwind.config.js` file:
14
+
15
+
```js
16
+
// tailwind.config.js
17
+
module.exports= {
18
+
theme: {
19
+
// ...
20
+
},
21
+
plugins: [
22
+
require("tailwindcss-view-transitions"),
23
+
// ...
24
+
],
25
+
}
26
+
```
27
+
28
+
## Usage
29
+
30
+
Use the `vt-name-[ANY_STRING]` utility class to [create a separate view transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API#different_transitions_for_different_elements) on specific elements.
31
+
32
+
```html
33
+
<divclass="vt-name-[main-header]">
34
+
</div>
35
+
```
36
+
37
+
Use `vt-name-none` to disable a view transition. Can be used with any Tailwind variant, such as `md:*`.
Style the view transition pseudo-elements from your global CSS file.
58
+
59
+
```css
60
+
/* input.css */
61
+
@tailwind base;
62
+
@tailwind components;
63
+
@tailwind utilities;
64
+
65
+
::view-transition-old(root),
66
+
::view-transition-new(root) {
67
+
animation: none;
68
+
}
69
+
70
+
::view-transition-old(main-content) {
71
+
/* Add custom animation or style here */
72
+
/* animation: ... */
73
+
}
74
+
75
+
::view-transition-new(main-content) {
76
+
/* Add custom animation or style here */
77
+
/* animation: ... */
78
+
}
79
+
```
80
+
81
+
### Configuration
82
+
83
+
Alternatively, you can define styles from plugin configuration in your `tailwind.config.js` file.
84
+
85
+
```js
86
+
// tailwind.config.js
87
+
module.exports= {
88
+
plugins: [
89
+
require("tailwindcss-view-transitions")({
90
+
disableAllReduceMotion:false,
91
+
styles: {
92
+
// ...
93
+
},
94
+
}),
95
+
// ... other plugins
96
+
],
97
+
}
98
+
```
99
+
100
+
## Options
101
+
102
+
The plugin config accepts an options object as argument which contains these properties. All are optional.
103
+
104
+
### `disableAllReduceMotion`
105
+
106
+
- Type: `boolean`
107
+
- Default: `false`
108
+
109
+
Disables _all_ view transitions animation if user has set preference for reduced motion. (Note: Consider [this point](https://developer.chrome.com/docs/web-platform/view-transitions/#:~:text=a%20preference%20for%20%27reduced%20motion%27%20doesn%27t%20mean%20the%20user%20wants%20no%20motion) before disabling animations completely.)
Defines CSS styles for the view transition pseudo-elements.
127
+
128
+
The styles object may contain any number of properties.
129
+
130
+
- The **key** is the view transition name (`root` or any string value assigned [here](#usage))
131
+
- The **value** is one or more of these:
132
+
- a [CSS rule object](https://github.com/tailwindlabs/tailwindcss/blob/9faf10958b880067cacdd0ef3c4bf9e64172ed91/types/config.d.ts#L15), which will be applied to both outgoing (`::view-transition-old(VT_NAME)`) and incoming (`::view-transition-new(VT_NAME)`) pseudo-elements
133
+
- a propery `old` containing a CSS rule object, which will be applied only to `::view-transition-old(VT_NAME)`
134
+
- a propery `new` containing a CSS rule object, which will be applied only to `::view-transition-new(VT_NAME)`
⚠️ If applying custom CSS animation, you need to define `@keyframes` separately in your CSS file or through [Tailwind theme configuration](https://tailwindcss.com/docs/animation#customizing-your-theme), or alternatively use an existing `@keyframes` animation.
* You don’t need to customize the browser default transition (crossfade) styles 😁
151
+
* You do styling outside of Tailwind configuration
152
+
* You exclusively use a (meta)framework that has its own API for conveniently styling view transitions, such as [Astro](https://docs.astro.build/en/guides/view-transitions/)
153
+
154
+
As an unofficial plugin, it will be deprecated when/if Tailwind adds an official plugin for styling view transitions.
155
+
156
+
## Bugs & feature requests
157
+
158
+
While I'm not actively accepting feature requests, I outlined future plans in the [Discussions](https://github.com/ekafyi/tailwindcss-view-transitions/discussions).
159
+
160
+
Found a bug? Feel free to [open an issue](https://github.com/ekafyi/tailwindcss-view-transitions/issues).
0 commit comments