TailwindCSS Background color wont change unless I change within CSS file

Question

I'm having problems changing the last div (with "Good Afternoon") to any background color. On Tailwind Play it shows it's working but within VSCode and the Live Server extension, it doesn't display a change to the page unless I add the background into the style.css file

Another weird thing is if I set the background to gradient like the div above it, it works??

EDIT: It also won't change the bg-color of the navbar either. It's stuck to white.

Working example from Tailwind Play https://play.tailwindcss.com/sFN1L7UmvI

HTML

<body class="p-0 m-0">
    <div class="navbar bg-base-300">
        <div class="flex-1 px-2 lg:flex-none">
            <label tabindex="0" class="btn btn-ghost rounded-btn">Home</label>
        </div>
        <div class="flex justify-end flex-1 px-2">
            <div class="flex items-stretch">
                <div class="dropdown dropdown-end">
                    <label tabindex="0" class="btn btn-ghost rounded-btn">Dropdown</label>
                    <ul tabindex="0" class="menu dropdown-content p-2 shadow bg-base-100 rounded-box w-52 mt-4">
                        <li><a>Helpful Links</a></li>
                        <li><a>Communities</a></li>
                        <li><a>About Me</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="flex-col w-screen h-screen flex justify-center bg-gradient-to-tr from-teal-600 to-green-900">
        <div class="flex flex-col justify-center items-center text-zinc-900">
            <div id="welcome" class="text-center">
                <H1><span class="auto-type"></span></H1>

            </div>
            <div class="w-96 text-center">
                <p>Welcome, Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat in eligendi ipsam nihil atque repellendus voluptates totam aut, labore accusamus. Laboriosam recusandae a quam quis ex reiciendis unde consequuntur alias.</p>
            </div>
        </div>
    </div>
    <div class="bg-teal-200 w-screen h-screen">
            <h4>Good afternoon</h4>   
    </div>

STYLES.CSS FILE

@import url('https://fonts.googleapis.com/css2?family=Gemunu+Libre&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alkalami&display=swap');

#welcome {
    font-family: 'Gemunu Libre', sans-serif;
    animation: fadeIn 3s;
    font-size: 5em;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

Tailwind Config

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html'],
  theme: {
    fontFamily: {
      'sans': ["'Gemunu Libre'", 'sans-serif'],
    },
    extend: {},
  },
  plugins: [],
};

Bimo Laksono · Accepted Answer · 2022-10-07 01:44:17Z

1

After I look at tailwindcss docs, the background color for navbar didn't change because there is no class name bg-base-300. If you want to add custom color, you can modify tailwind config like this:

module.exports = {
  theme: {
    extend: {
      colors: {
        'base': 'colorCode', 
      },
    }
  }
}

or you can directly use custom color on class name like this:

bg-[colorCode]

Take a look the docs tailwind, especially on background-color and how to modify custom color on tailwind

answered Oct 7, 2022 at 1:44

Bimo Laksono

1134 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JardoS5 Over a year ago

Appreciate the reply, I've tried it with other stock colors I just happened to accidentally leave that bg color in there.

Bimo Laksono Over a year ago

have you checked your css file if it added the class name of tailwind? I guess that is the caused why it didn't change when using vscode and liveserver

Collectives™ on Stack Overflow

TailwindCSS Background color wont change unless I change within CSS file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related