Contents

const plugin = require("tailwindcss/plugin");

// Safari 14-compatible aspect ratio
module.exports = plugin(function ({ 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") }
  );
});

Version data entries

21 entries across 21 versions & 1 rubygems

Version	Path
coveragebook_components-0.16.0	app/assets/css/plugins/aspect.js