I have a div that is absolute and should take the full width of the page up to the md breakpoint. The width of div from the md breakpoint upward, should also be the full width of the page minus the width of a sidebar navigation menu that's on the left.
My issue is that since I'm using an ref in an Tailwind class instead of a hardcoded value the JIT compiler isn't applying the md:w-[calc(100%-${sidebarRef.current.clientWidth}px)].
What would be the correct way to implement this?
<div
className={`absolute top-0 right-0 w-full h-full md:w-[calc(100%-${sidebarRef.current.clientWidth}px)]`}>
// Content
</div>
You can compute the value outside the class decoration.
render() {
let divWidth = this.myRef.current ? this.sideBarRef.current.clientWidth : 0;
return (
<div
className={`absolute top-0 right-0 w-full h-full md:w-[calc(100%-${divWidth}px)]`}>
</div>
)
}
}
Tailwind doesn't handle dynamic classes. One solution might be to use a CSS variable in your class list and then set the value using JS. Something like:
render() {
return (
<style>
:root {
--content-width: calc({`100%-${sidebarRef.current.clientWidth}px`});
}
</style>
<div class="absolute top-0 right-0 w-full h-full md:w-[var(--content-width)] bg-red-50">
Content
</div>
)
}
Working example (in straight HTML): https://play.tailwindcss.com/xqiep4ObPt - resize by moving the partition.
Related
Home page in NextJS, styled with TailwindCSS, is working as expected. I originally had the background image defined in the tailwind.config.js file and applied via styles (and there is no problem), but I would prefer the image optimization of next/Image.
// index.jsx
const Home = () => {
return (
<div className="flex min-h-screen flex-col items-center justify-center py-0">
<Image src='/images/background.png' fill={true} style={{ objectFit: 'cover' }} className='-z-10' alt='Alt text' />
<main className='flex w-full flex-1 flex-col items-center justify-center px-5 md:px-20 text-center bg-gradient-radial to-r from-black via-black/30'> {/* All content here is displaying as expected */} </main>
</div>
)
}
This works as expected. But, when I add an overall Layout.jsx to the site, the background image alignment is not behaving as I would anticipate.
// Layout.jsx
import Navbar from './Navbar.jsx'
import Footer from './Footer.jsx'
const Layout = ({ children }) => {
return (
<>
<Navbar />
<main>
{children}
</main>
<Footer />
</>
)
}
export default Layout
The background.png image no longer aligns with its parent <div>, but instead with the top of the screen. This means the navbar is sitting on top of the background image, obstructing some of the top portion.
Simultaneously, a gap now exists between the bottom of the background image and the top of the Footer, equal in height to the height of the Navbar.
I have tried all combinations of relative and absolute classes both the parent <div> and the child <Image>, without success.
Switching back to a tailwind.config.js defined background image and inserting it using e.g. className='bg-my_bg_image' solves the alignment issues, but no longer leverages NextJS next/Image optimization and hurts my site performance.
So the preferred solution would be to continue to use the next/Image component, aligned properly.
I'm wondering how can I remove background color from an existing div for a specific xl screen size? I want something like this background-color:unset, is this possible with tailwind.css?
<div class="fixed bottom-0 bg-baseorange p-4 left-0 w-full z-10 xl: bg-none xl:absolute lg:absolute xl:bottom-22 xl:right-20 lg:bottom-22 lg:right-20">
</div>
You can use xl:bg-transparent.
In Tailwind, the class bg-transparent sets the css property background-color: transparent;
Tailwind documentation:
https://tailwindcss.com/docs/background-color
I'm trying to use the Next.js' <Image> component with the layout=fill option. Therefore I've created a relative div that contains the Image tag. But I'd like to determine the height by the Image height.
Found this example but height is statically given there. So I've tried this based on the example.
<div className="relative w-full h-full">
<Image
src={post.coverImage.url}
layout="fill"
alt={post.title}
/>
</div>
I've also tried h-full or max-h-full classes instead of h- tags but couldn't succeed.
How can I make its height automatically determined?
I had the same issue and figured it out after inspecting the element. The problem is how Image component takes place in DOM.
This the Image component on DOM, look there are 2 divs and inside "img" is placed. So you have to target the outer div that wraps img.
// I add img-wrapper class
<div className="relative w-full h-full img-wrapper">
<Image
src={post.coverImage.url}
layout="responsive"
alt={post.title}
/>
</div>
and in css:
// targeting the first div
.img-wrapper > div {
// this will take full-height, u can adjust it
height: 100%;
}
I created a component named Header with a simple css class:
<template>
<nav
class="flex fixed w-full items-center justify-between px-6 h-16 bg-white text-gray-700 border-b border-gray-200 z-10"
>
<!-- Etc... -->
</nav>
In Home component I registred Header but it is overlapping the home:
<template>
<div class="container">
<Header />
<div class="flex m-5">
<h3>Hello</h3>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
components: {
Header: () => import('#/components/Header.vue')
}
}
</script>
The Hello is behind, even including block class in Home component is not worked. Anyone can helped?
There are may ways you could achieve this, but building on the code you already have, you could:
Add a top-0 class to your header. This will ensure that your header which is now positioned fixed will stick to the top of the viewport.
Add a top padding class equavliant to the height of your header (e.g. pt-16) to your container.
Here's a live demo for your reference.
overlapping component each others because of height of your component and in flex height taking automaticly so remove your height
remove css h-16
I've been working on a side project to learn tailwind css and i'm facing an issue with the responsiveness of my flexbox direction.
From what i've read you can make an html tag responsive by adding sm: md: lg:
so it will use the corresponding class based on the screen resolution. But when i try this with flexbox it doesn't work.
This is a piece of my code: <div class="flex-col md:flex-row h-screen w-screen m-3">.
As you can see i want to use flex-row on a screen larger than md:. But it keeps using flex-col even when i exceed the md: resolution which is 768px.
Full code: https://codesandbox.io/s/pedantic-hoover-lr93g?file=/index.html
This is how it looks when i remove flex-col and only use flex:
https://imgur.com/a/tUJKPro
You cannot use flex-col or flex-row (and other flex classes) without "flex" alone. Class "flex" corresponds to "display: flex" (without it your divs are blocks) and "flex-row" is "flex-direction: row" that will not work without flex display property.
Check the docs: https://tailwindcss.com/docs/flex-direction
So instead
<div class="flex-col md:flex-row h-screen w-screen m-3">
should be
<div class="flex flex-col md:flex-row h-screen w-screen m-3">
Fixed code: https://codesandbox.io/s/admiring-framework-lxz8y?file=/index.html
Also modify widths on smaller devices the way you need them.