Question 212185 in CSS Question posted in
Some basic documentation can be found here.

Background property is not being applied even using tailwind and normal css

import React from "react";
import Navbar from "./Components/Navbar"


function App() {

  return (
    <div className="w-full h-full bg-amber-800"  >
      <Navbar/>
    </div>
  );
}

export default App;

This App.jsx


import react from "react";
import logo from "../assets/tesla.svg"


function Navbar(){

    return(
        <nav className="w-full tex-black-100 bg-transparent h-6 flex flex-row absolute z-1 top-4  " >
        
        <ul className="flex flex-row w-full" >

        <span className="w-1/4 relative left-10 top-2">
         <img  src={logo} className="App-logo w-1/3  " alt="logo" />
        </span>

        <div className="flex flex-row w-1/2 justify-evenly" >

        
        <li><a href="">Model S</a></li>

        <li><a href="">Model 3</a></li>

        <li><a href="">Model X</a></li>

    <li><a href="">Model Y</a></li>

    <li><a href="">Solar Roof</a></li>

    <li><a href="">Solar Panel</a></li>
    </div>

    <div className="flex flex-row w-1/4 justify-evenly" >
    <li><a href="">Shop</a></li>

    <li><a href="">Account</a></li>

    <li><a href="">Menu</a></li>
    </div>

    </ul>
    </nav>
)

}

export default Navbar;

This Navbar.jsx

Each and every tailwind property is working leaving bg-amber-800 in App.jsx

This is what it looks like

enter image description here

Leaving bg-amber-800 background property all of the others are working.

What am I doing wrong?

https://codedamn.com/project/tesla-clone/code/PssQI88lIveSFpfO-oIMy

You can update here if you want

Make sure you open this in new tab it is important

enter image description here

Tags:

2

Answers


  1. 0

    Use h-screen instead of h-full for the height to match the viewport’s height.

    Login or Signup to reply.
  2. 0

    It is actually working.
    From what I understand, you want the App component to occupy the entire height and apply bg-amber to it. The problem is that you set the height with h-full(height: 100%) while you should have set it with h-screen(height: 100vh).
    When you set height: 100% on an element, that element takes the height of its direct parent element that has a defined height. This means that the element must have a parent with an explicitly defined height (eg height: 500px) for it to inherit that height, in which case the direct parent component of the APP component is the body.
    100vh (viewport height) is 100% of the viewport height (the size of the screen visible in the browser). No matter where the element is in the DOM hierarchy, 100vh will take up the entire visible height of the browser window.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search