addUtilities and focus-visible

[xolott]

I'm adding custom classes using the plugin function, but they don't work when used with focus-visible, even though Intellisense recognized it.

My settings:

/** @type {import('tailwindcss').Config} */
module.exports = {
    darkMode: ['class'],
    safelist: ['dark'],
    prefix: '',

    content: [
        './pages/**/*.{ts,tsx,vue}',
        './components/**/*.{ts,tsx,vue}',
        './app/**/*.{ts,tsx,vue}',
        './src/**/*.{ts,tsx,vue}',
    ],

    theme: {
        container: {
            center: true,
            padding: '2rem',
            screens: {
                '2xl': '1400px',
            },
        },
    },
    plugins: [
        animate,
        plugin(function ({ addUtilities }) {
            addUtilities({
                '.my-class':  {
                    outlineColor: 'red',
                },
            });
        }),
    ],
};

If I do something like this:

<button class="focus:my-class" />

It changes the button outline colour to red when the focus state is active using Chrome DevTools.

But this:

<button class="focus-visible:my-class" />

Won't change anything when focus-visible is active

---

EDIT

So the issue was my class name. For some reason it doesn't work with focus-visible

I'm trying to use outline-borders-primary-focused-style like this:

            addUtilities({
                '.outline-borders-primary-focused-style': {
                    'outline-style': 'var(--borders-primary-focused-style)',
                },
            });

If I change the word outline to something else it works with focus-visible

This is a design token that I would like to use to alias the outline-style property. Any idea?

[wongjn]

Are using the focus visible toggle in developer tools to check the focus-visible: variant? When I keyboard-tab to the <button> in this Tailwind Play, it seems to work fine.

[xolott]

Yes, I'm using the dev tools to toggle that variant. It works with core classes but not with my custom class. I will give it a try to that playground and report back

[xolott]

So the issue was my class name. For some reason it doesn't work with focus-visible

I'm trying to use outline-borders-primary-focused-style like this:

            addUtilities({
                '.outline-borders-primary-focused-style': {
                    'outline-style': 'var(--borders-primary-focused-style)',
                },
            });

If I change the word outline to something else it works with focus-visible

This is a design token that I would like to use to alias the outline-style property. Any idea?