Tailwind 4 Plugin Migration
Tailwind 3 Plugin
This plugin takes in a dynamic value and sets the aspect ratio of an element. It also has support for older browsers that don't support the aspect-ratio property.
aspect-ratio.plugin.js
const aspectRatio = ({ matchUtilities, theme }) =>
matchUtilities(
{
aspect: (value) => ({
'@supports (aspect-ratio: 1 / 1)': {
aspectRatio: value,
},
'@supports not (aspect-ratio: 1 / 1)': {
'&::before': {
content: '""',
float: 'left',
paddingTop: `calc(100% / (${value}))`,
},
'&::after': {
clear: 'left',
content: '""',
display: 'block',
},
},
}),
},
{ values: theme('aspectRatio') }
);
Example of how you might add this plugin to your tailwind.config.js file under plugins:
tailwind.config.js
{
plugins: [({ matchUtilities, theme }) => {
aspectRatio({ matchUtilities, theme });
}]
}
Tailwind 4 Utility
Converting the above plugin to now what is a called a Utility
styles.css
@utility aspect-* {
@supports (aspect-ratio: 1 / 1) {
aspect-ratio: --value(--aspect-ratio-*, ratio, [ratio]);
}
@supports not (aspect-ratio: 1 / 1) {
&::before {
content: '';
float: left;
padding-top: calc(100% / (--value(--aspect-ratio-*, ratio, [ratio])));
}
&::after {
clear: left;
content: '';
display: block;
}
}
}
Dynamic Header Utility with Modifiers
Defining the Font Sizes
styles.css
@theme inline {
--header-1: --spacing(7);
--header-2: --spacing(6.5);
--header-3: --spacing(6);
--header-4: --spacing(5);
--header-5: --spacing(4.5);
--header-6: --spacing(4);
}
Adding a font-weight modifier to the above header utilities. With this modifier, I can use header-1/semibold and header-3/normal to set the font weight.
styles.css
@utility header-* {
font-size: --value(--header-*);
font-weight: --modifier(--font-weight-*, [length], [*]);
}
To Be Continued...