Add and use an aspect ratio plugin

package.json

@@ -19,6 +19,7 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "tailwindcss-aspect-ratio": "^3.0.0",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

src/assets/css/tailwind.css

@@ -14,8 +14,7 @@
   }
 
   .embed-responsive {
-    @apply block relative h-0 p-0 overflow-hidden;
-    padding-bottom: 56.25%
+    @apply block relative h-0 overflow-hidden aspect-ratio-16/9
   }
 
   .embed-responsive .embed-responsive-item,

tailwind.config.js

@@ -7,6 +7,9 @@ module.exports = {
     ]
   },
   theme: {
+    aspectRatio: {
+      '16/9': [16, 9]
+    },
     colors: {
       black: '#222',
       gray: {
@@ -23,7 +26,9 @@ module.exports = {
     extend: {},
   },
   variants: {},
-  plugins: [],
+  plugins: [
+    require('tailwindcss-aspect-ratio')
+  ],
   experimental: {
     applyComplexClasses: true
   },

yarn.lock

@@ -7726,6 +7726,13 @@ table@^5.2.3:
     slice-ansi "^2.1.0"
     string-width "^3.0.0"
 
+tailwindcss-aspect-ratio@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/tailwindcss-aspect-ratio/-/tailwindcss-aspect-ratio-3.0.0.tgz#4f9fc7ca0f3468373290faaa8b92652157bee6a4"
+  integrity sha512-syVueHOdk0u6S9lFSQQxHwsYS+9AJ0tp1WWBB+vAwmJYzc9g/2OLwq4mHpigYue6t3PUgTSbRi9unQd7WEDjGQ==
+  dependencies:
+    lodash "^4.17.15"
+
 tailwindcss@^1.8.5:
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.8.5.tgz#3b4624530b5fd71688fd04d16d8bd8c8d56834de"