Tailwind+ Nuxt: @apply doesn't work for all classes

Question

I'm using Nuxt with Tailwind. I have the following main.less file:

.btn-default {
    @apply py-2 px-4 bg-white font-medium rounded-lg shadow-md;

    &:focus {
        @apply ring;
    }
}

I get this compile error: @apply cannot be used with .ring because .ring either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .ring exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

When I remove ring the error is gone.

In my nuxt.config.js I import my less file like this:

css: [
    '@/assets/css/main.less',
],

This is my tailwind.config.js

module.exports = {
    future: {
        // removeDeprecatedGapUtilities: true,
        // purgeLayersByDefault: true,
    },
    purge: [],
    theme: {
        extend: {
            colors: {
                primary: '#03B3B3',
                secondary: '#00DDA2',
                'dark-gray': '#323232',
            },
            screens: {
                sm: '576px',
                md: '768px',
                lg: '992px',
                xl: '1200px',
            },
            fontFamily: {
                sans: ["Rubik"],
                serif: ["Rubik"],
                mono: ["Rubik"],
                display: ["Rubik"],
                body: ['Rubik'],
            },
            borderRadius: {
                DEFAULT: '8px',
            },
            borderWidth: {
                '3': '3px',
            },
            container: {
                center: true,
                padding: {
                    DEFAULT: '15px',
                },
            },
        },
    },
    variants: {},
    plugins: [],
}

What am I doing wrong? Why does it work with other classes?

Answer 1

Silly me, tried to use the ring class directly from the docs, but this class doesn't exists in Tailwind 1. Nuxt isn't ready for Tailwind 2, yet