Use inset instead of top, right, bottom, and left properties

[RobinMalfait]

This PR improves the inset utility by using the inset property instead of the top, right, bottom and left properties.

[hivokas]

This breaks browser support for Safari <14.1. I was able to bring back support for older Safari versions by implementing a PostCSS plugin which converts inset property to top+right+bottom+left. If someone finds a better way or this change gets rolled back, please tag me.

[Myckkah]

hello @hivokas
Which plugin did you use ? We are in the same case :D

[hivokas]

@Myckkah here is the plugin:

function postcssInset() {
  return {
    postcssPlugin: 'postcss-inset',
    Declaration: {
      inset: (decl, { list }) => {
        const values = list.space(decl.value);

        decl.cloneBefore({
          prop: 'top',
          value: values[0],
        });

        decl.cloneBefore({
          prop: 'right',
          value: values[1] ?? values[0],
        });

        decl.cloneBefore({
          prop: 'bottom',
          value: values[2] ?? values[0],
        });

        decl.cloneBefore({
          prop: 'left',
          value: values[3] ?? values[1] ?? values[0],
        });

        decl.remove();
      },
    },
  };
}

You should then add it like that:

postcss: {
        plugins: [
          postcssImport,
          tailwindNesting,
          tailwindCss(),
          postcssColorFunction,
          autoprefixer,
          postcssInset(), // here
        ],
      },

[Myckkah]

thx @hivokas

[jenjen75]

It breaks enterily the modal component https://headlessui.com/vue/dialog in Safari 14 (this version is not so old, end-2020 when Apple introduces M1 chips + Big Sur), which heavily depends on inset-0.
The example in https://headlessui.com/vue/dialog works in Safari 14 because it use older version, before this merged PR.

https://tailwindui.com looks totally broken too.

[miguilimzero]

This change broke a lot of desktop and mainly mobile browsers! Many Android 8 and 9 mobiles still use the 2020 Android WebView version. Also, for iOS, as stated by @jenjen75, this change breaks even bearly new Apple devices.

https://developer.mozilla.org/en-US/docs/Web/CSS/Inset

@RobinMalfait Can you please take a look at this?

[acorn1010]

If you need the old left, right, top, bottom for older browser support (e.g. Safari <14.1), the below Tailwind plugin also works. You'll need to disable the inset corePlugin in your tailwind.config.js:

corePlugins: {
    inset: false,  // Disabled because it breaks old browsers. See: https://caniuse.com/mdn-css_properties_inset
},
// ...
plugins: [
    function ({ matchUtilities, theme }) {
        const config = {
            values: theme('inset'),
            supportsNegativeValues: true,
        };
    
        function matchUtility(cssProps) {
            return (value) => {
                const result = {};
                for (const cssProp of cssProps) {
                    result[cssProp] = value;
                }
                return result;
            };
        }
        matchUtilities({inset: matchUtility(['top', 'right', 'bottom', 'left'])}, config);
        matchUtilities({
            'inset-x': matchUtility(['left', 'right']),
            'inset-y': matchUtility(['top', 'bottom']),
        }, config);
    
        // Must come after inset utilities so that left, right, top, and bottom take precedence.
        matchUtilities({
            left: matchUtility(['left']),
            right: matchUtility(['right']),
            top: matchUtility(['top']),
            bottom: matchUtility(['bottom']),
            start: matchUtility(['inset-inline-start']),
            end: matchUtility(['inset-inline-end']),
        }, config);
    },
],

[iuriiiurevich]

the below Tailwind plugin also works:

or this one:

const { default: createUtilityPlugin } = require('tailwindcss/lib/util/createUtilityPlugin');

module.exports = {
  corePlugins: {
    inset: false,
  },
  plugins: [
    createUtilityPlugin(
      'inset',
      [
        ['inset', ['top', 'right', 'bottom', 'left']],
        [
          ['inset-x', ['left', 'right']],
          ['inset-y', ['top', 'bottom']],
        ],
        [
          ['start', ['inset-inline-start']],
          ['end', ['inset-inline-end']],
          ['top', ['top']],
          ['right', ['right']],
          ['bottom', ['bottom']],
          ['left', ['left']],
        ],
      ],
      { supportsNegativeValues: true },
    ),
  ],
};