Merge pull request #319 from chrismwilliams/remove/tailwind-aspect-ratio

Remove: @tailwindcss/aspect-ratio

package.json

@@ -43,7 +43,6 @@
 		"@iconify-json/mdi": "^1.1.68",
 		"@pagefind/default-ui": "^1.1.0",
 		"@resvg/resvg-js": "^2.6.2",
-		"@tailwindcss/aspect-ratio": "^0.4.2",
 		"@tailwindcss/typography": "^0.5.14",
 		"@types/hast": "^3.0.4",
 		"@types/mdast": "^4.0.4",

src/components/blog/Masthead.astro

@@ -20,7 +20,7 @@ const dateTimeOptions: Intl.DateTimeFormatOptions = {
 
 {
 	data.coverImage && (
-		<div class="aspect-h-9 aspect-w-16 mb-6">
+		<div class="aspect-[16/9] mb-6">
 			<Image
 				alt={data.coverImage.alt}
 				class="object-cover"

tailwind.config.ts

@@ -8,21 +8,18 @@ export default {
 		"!./src/pages/og-image/[slug].png.ts",
 	],
 	corePlugins: {
-		// disable aspect ratio as per docs -> @tailwindcss/aspect-ratio
-		aspectRatio: false,
+		// disable some core plugins as they are included in the css, even when unused
 		borderOpacity: false,
 		fontVariantNumeric: false,
 		ringOffsetColor: false,
 		ringOffsetWidth: false,
 		scrollSnapType: false,
 		textOpacity: false,
-		// disable some core plugins as they are included in the css, even when unused
 		touchAction: false,
 	},
 	darkMode: ["class", '[data-theme="dark"]'],
 	plugins: [
 		require("@tailwindcss/typography"),
-		require("@tailwindcss/aspect-ratio"),
 		plugin(({ addComponents }) => {
 			addComponents({
 				".cactus-link": {