CODEWITHSUNDEEP
laraveltailwind-csslaravel-jetstream
CyberPunkCodes
CyberPunkCodes

Reputation: 3777

Laravel 9 + Jetstream - Tailwind Theme Background Color

I am having a difficult time changing the background color of the page. I have attempted Tailwind a few times in the past, but always reverted back to Bootstrap as I know it pretty well.

This is a fresh Laravel 9 with Jetstream installation. It comes with Tailwind v3 ready to go.

On the body tag in the guest layout, I tried bg-red and bg-red-900 classes. It's still grey. Tailwind does at least work, because I added bg-red-900 to the login button itself, and the button turned red. It's just not liking it on the body tag.

In tailwind.config.js I added:

module.exports = {
    theme: {
        backgroundColor: '#000000',
    }
};

I also tried:

module.exports = {
    theme: {
        extend: {
            backgroundColor: '#000000',
        }
    }
};

I run npm run dev and caching is disabled per Chrome dev tools settings. I even tried a hard reload (right click reload button with dev tools open and choose "Empty cache and hard reload").

I am sure the css is being generated as I can see the tailwind comments in css/app.css. The page works, as it shows the normal breeze login page as it should. It just refuses to change the background color. I get if I am setting it wrong in the config, but for it to not accept bg-something as a class seems weird.

How do I change the background color? It will be the same background color for every page, so like a theme, but I don't want to declare a whole theme palette.

This is probably something simple because I know nothing about Tailwind. I've just searched and dug through the docs and just don't get it.

Upvotes: 0

Views: 3479

Answers (1)

P. K. Tharindu
P. K. Tharindu

Reputation: 2730

The background color in Jetstream in the guest layout is actually coming from the authentication-card component.

Once you have published the Jetstream components the authentication-card.blade.php component can be located at:

resources/views/vendor/jetstream/components/authentication-card.blade.php

You should see a bg-gray-100 class in the root div tag which is what you need to change.

Upvotes: 1

Related Questions