Skip to content

Commit e7f1a46

Browse files
authored
Add note about compatibility with the default aspect-ratio utilities
1 parent a4d3d64 commit e7f1a46

File tree

1 file changed

+39
-0
lines changed

1 file changed

+39
-0
lines changed

README.md

+39
Original file line numberDiff line numberDiff line change
@@ -101,3 +101,42 @@ module.exports = {
101101
}
102102
}
103103
```
104+
105+
## Compatibility with default aspect-ratio utilities
106+
107+
Tailwind CSS v3.0 shipped with [native aspect-ratio](https://tailwindcss.com/docs/aspect-ratio) support, and while these new utilities are great, the `aspect-ratio` property isn't supported in Safari 14, which still has [significant global usage](https://caniuse.com/mdn-css_properties_aspect-ratio). If you need to support Safari 14, this plugin is still the best way to do that.
108+
109+
While it's technically possible to use the new native `aspect-ratio` utilities as well as this plugin in the same project, it doesn't really make a lot of sense to do so. If you're able to use the new native aspect-ratio utilities, just use them instead of this plugin, as they are a lot simpler and work much better.
110+
111+
However, if you do want to use both approaches in your project, maybe as a way of transitioning slowly from the plugin approach to the new native utilities, you'll need to add the following values to your `tailwind.config.js` file:
112+
113+
```js
114+
module.exports = {
115+
// ...
116+
theme: {
117+
aspectRatio: {
118+
auto: 'auto',
119+
square: '1 / 1',
120+
video: '16 / 9',
121+
1: '1',
122+
2: '2',
123+
3: '3',
124+
4: '4',
125+
5: '5',
126+
6: '6',
127+
7: '7',
128+
8: '8',
129+
9: '9',
130+
10: '10',
131+
11: '11',
132+
12: '12',
133+
13: '13',
134+
14: '14',
135+
15: '15',
136+
16: '16',
137+
},
138+
},
139+
}
140+
```
141+
142+
This is necessary, as the default `aspectRatio` values are overwritten by this plugin's values.

0 commit comments

Comments
 (0)