10 August 2024

Tailwind CSS 2 doesn't natively support the outline-offset utility, so you'll need to add it through a custom plugin. Use the utility-first approach by extending the configuration in the tailwind.config.js file.

Source code viewer
  1. module.exports = {
  2.   theme: {
  3.     extend: {
  4.       // Any other theme extensions can go here
  5.     },
  6.   },
  7.   variants: {
  8.     extend: {
  9.       outlineOffset: ['focus', 'active'], // Add variants if necessary
  10.     },
  11.   },
  12.   plugins: [
  13.     function({ addUtilities }) {
  14.       const newUtilities = {
  15.         '.outline-offset-0': { outlineOffset: '0px' },
  16.         '.outline-offset-1': { outlineOffset: '1px' },
  17.         '.outline-offset-2': { outlineOffset: '2px' },
  18.         '.outline-offset-4': { outlineOffset: '4px' },
  19.         '.outline-offset-8': { outlineOffset: '8px' },
  20.         '.outline-offset-16': { outlineOffset: '16px' },
  21.       };
  22.  
  23.       addUtilities(newUtilities, ['responsive', 'hover', 'focus', 'active']);
  24.     },
  25.   ],
  26. };
Programming Language: Javascript