Currently I’m using the @apply like so to create a simple error class I can add to input elements to highlight them.

.error{
    @apply 
    outline
    outline-red-500
    focus:outline
    focus:outline-red-500
    focus:outline-2
    focus:ring-red-500 
    focus:ring-1
}

However, I want more flexibility. I want to be able to provide a custom color and have the variants recommended to me in vs code intellisense. For example adding the class error-purple-800 should result in the equivalent of this code

.error-purple-800{
    @apply 
    outline
    outline-purple-800
    focus:outline
    focus:outline-purple-800
    focus:outline-2
    focus:ring-purple-800
    focus:ring-1
}

So I was trying to include a plugin in my tailwind.config.js to accomplish this

  plugins: [
    require('./css/tailwind_plugins/error'),
  ],

And sofar my error.js looks something like this

function errorPlugin({ addUtilities, e, theme, variants }) {
  const colors = theme('colors')
  const errorUtilities = Object.keys(colors).reduce((acc, color) => {
    const colorShades = colors[color]
    if (typeof colorShades === 'object') {
      Object.keys(colorShades).forEach(shade => {
        acc[`.error-${color}-${shade}`] = {
          outline: `2px solid ${colorShades[shade]}`,
          'outline-offset': '2px',
          'focus:outline': `2px solid ${colorShades[shade]}`,
          'focus:ring': `${colorShades[shade]} 1px`,
        }
      })
    } else {
      acc[`.error-${color}`] = {
        outline: `2px solid ${colorShades}`,
        'outline-offset': '2px',
        'focus:outline': `2px solid ${colorShades}`,
        'focus:ring': `${colorShades} 1px`,
      }
    }
    return acc
  }, {})

  addUtilities(errorUtilities, variants('outline', ['responsive', 'hover', 'focus']))
}

module.exports = errorPlugin

However, there are two problems I’m running into.

Issue One

Whatever styles I generate in this plugin are only applied directly to the element, they don’t actually include the focus styles for example. focus:outline for example is not a real css style and doesn’t work. I know that these plugins do work with variants though and so i could add the classes error-purple-800 & focus:error-purple-800 to get closer to my desired result. However, I want a solution that only requires me to add a single class in order to have both the base and focus styles applied.

Issue Two

My original tailwind css uses the ring classes which are abit confusing to me in terms of what they should translate too for normal css and more so how to integrate them into my plugin properly.

@apply 
focus:ring-purple-800
focus:ring-1

If anyone could help with this it would be greatly appreciated.