Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Just as the title says... Styling for doesn't adopt tailwind 2.0.1 css formatting perfectly.
For example:
<x-jet-button class="bg-gray-800 hover:bg-white hover:text-gray-900">
This button that has a dark gray background color will not change the background to white when hovered on.
How do i add to tailwind so it works perfectly?
I just found a solution myself.... so i'm sharing this in case someone runs into this problem.
jetstram x-jet-button is stiled in its own individual file located at
\resources\views\vendor\jetstream\components\button.blade.php
not sure why it was done like that.
what if that fi le is deleted? is it needed? if it's deleted, will tailwind 2.0 just parse it with its own styling?
You can customize those jetstream components check this out
https://jetstream.laravel.com/2.x/stacks/livewire.html#components
not sure why it was done like that.
It is done this way to remove code duplication.
Imagine 100+ buttons in your project. Now you have to add a simple change to all of them. Rather than find and replace, you simply have to make that change at one place.
this is not worth SH. this does not tell how to make the background color blue or what ever the developer wants it to be.
Going to the vendor\Jetstream\components\button.blade.php file and changing the bg-gray-800 to indigo and the hover:bg-gray-700 and all the other color grays to indigo and then running the npm run dev caused the button to disappear and only when you click where it should be do you get the border color of indigo to show up otherwise it is blank the space is being taken up but you can’t see a thing.
MY FIX FOR THIS PROBLEM WAS. In the tailwind.config.js file add the following: Const colors = require(‘tailwindcss/colors’) Then in the extend:{ Colors: { Transparent: ‘transparent’, Current: ‘currentColor’, Black: colors.black, White: colors.white Gray: colors.trueGray, Indigo: colors.indigo, Red: colors.rose, Yellow: colors.amber, EXE.
Please or to participate in this conversation.