CODEWITHSUNDEEP
phplaraveltailwind-css
Petro Gromovo
Petro Gromovo

Reputation: 2173

I got error defining Tailwind's active/hover classes in Laravel's app.css

I want to apply tailwind-starter-kit in my Laravel 8 app and I got the editor form from the html-login-page/login.html file, and the "Sign In" page of this form has classes :

<button class="bg-gray-900 text-white active:bg-gray-700 text-sm 
    font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg 
    outline-none focus:outline-none mr-1 mb-1 w-full"
        type="button" style="transition: all 0.15s ease 0s;">
    Sign In
</button>

I want to set the class definitions in resources/css/app.css like the following.

.btn_full {
    @apply bg-gray-900 text-white active:bg-gray-700 text-sm 
    font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg 
    outline-none focus:outline-none mr-1 mb-1 w-full;
}

But I get the following error.

(623:39) /project_path/resources/css/app.css The active:bg-gray-700 class does not exist, but hover:bg-gray-700 does. If you're sure that active:bg-gray-700 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.

621 | 622 | .btn_frontend_submit_w_full { 623 | @apply bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full; | ^ 624 | } 625 |

at processResult (/project_path/node_modules/webpack/lib/NormalModule.js:743:19) ...

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)

Upvotes: 0

Views: 1247

Answers (1)

user633440
user633440

Reputation:

You can control whether hover variants are enabled for a plugin in the variants section of your tailwind.config.js file. The active: prefix only applies to a utility when an element is active.

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
        backgroundColor: ['hover','active'],
    }
  },
}

Upvotes: 2

Related Questions