Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
In a project I'm working on, I have a tailwind button. When it's clicked, I use jQuery to remove the bg-gray-700 class and replace it with bg-gray-300 (to indicate that the request the button makes is running).
If I start my project fresh, by running npm run dev and php artisan serve in two terminals, all the initial tailwind classes on the screen work. When pressing the button though, the class for bg-gray-300 is added, but it doesn't apply any styles.
Curiously though, if I were to edit the blade file and make the initial class bg-gray-300 in the first place, reload the page, then change it back to bg-gray-700 and reload the page again... everything works as intended.
When doing this, the terminal I'm running npm run dev in is cleared and writes out
[vite] page reload resources/views/campaign/createEdit.blade.php which leads me to believe it's Vite to blame.
sounds like you are not compiling the css for bg-gray-300, perhaps not using it anywhere else in the project.
is your javascript in its own Js file and therefore not monitored for css classes?
You might need to add bg-gray-300 to tailwind's safe list
@Snapey That worked perfectly! That all makes sense. Thank you very much for your help.
Is there some way to have tailwind always load in all its classes? I'm not doing that and I get why that doesn't happen by default, but it's just out of curiosity.
@aidenb no because it would create too large a css file which causes the browser to struggle. Better to have vite monitor your js files for css classes
Please or to participate in this conversation.