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
Related
I want to focus a div surrounding a button but only when keyboard focused. Usually focus-within works, but in this case it should only focus on keyboard focus (focus-visible:) and not when clicking with the mouse(focus:).
Essentially, I need to combine focus-within and focus-visible. How can this be done?
Tailwind Play: https://play.tailwindcss.com/ApDB5gSjqv
<div class="flex h-screen items-center justify-center">
<div class="rounded-lg bg-green-100 px-20 py-20 focus-within:ring-4 focus-within:ring-blue-300">
<button class="bg-green-200 px-6 py-3 focus:outline-none">Focusable Button</button>
</div>
</div>
Notes:
Based on this thread, it looks like w3c doesn't have support for focus-within-visible. What's an alternative or round-about way to achieve this?
It looks like there is support for :has(:focus) selector in some browsers but how should this be applied in Tailwind...? Source
Instead of using focus-within you could add relative to the div you want to make look focused with the ring. Then make the button a peer and have an absolutely positioned div after it use the peer-focus-visible modifier to add any "focused" styles you want.
EDIT: You'll need to make the div be behind the button by adding relative to the button and assigning an appropriate z-index value to both the inset div and button.
<div class="flex h-screen items-center justify-center">
<div class="rounded-lg bg-green-100 px-20 py-20 relative">
<button class="bg-green-200 px-6 py-3 focus:outline-none peer relative z-[1]">Focusable Button</button>
<div class="absolute inset-0 rounded-lg peer-focus-visible:ring-4 peer-focus-visible:ring-blue-300 z-[0]"></div>
</div>
Here is an edited example on Tailwind Play https://play.tailwindcss.com/us5kpJg6cV
Is there a way to add border-top with tailwind? Before you say it, i did look at the documentation and searched on google. I don't need border-top-width i need exactly border-top. Also its ok to use just in time css.
Try this:
<div class="h-20 w-20 bg-gray-300 flex justify-center items-center">
<div class="border-t-4 border-black h-5 w-5 bg-white mt-"></div>
</div>
Live example: https://play.tailwindcss.com/aUPhlY2DrZ
Those are the properties you are searching for:
class="border-t-4 border-black"
And here the documentation if you need more details:
https://tailwindcss.com/docs/border-width#individual-sides
I am trying to set my Login section's background opacity using bg-opacity-75, but when I add that to my className, background color will just disappear. And if I use opacity-75, all child-div will be transparent as it should, if I use opacity-100, background color will just disappear and only input field is visible, it's kinda wired. In addition, I'm using default tailwind.config file with tailwind v2.0.2.
Here's my code:
...
<div className={"h-screen w-screen py-10 lg:w-3/6"}>
<div
className={"bg-gray-50 h-full max-w-md rounded-2xl bg-opacity-75 shadow-md mx-auto md:max-w-lg hover:shadow-lg transition-shadow"}>
<Logo/>
<Text/>
...
I aslo tried inline css, still not working.
using bg-opacity-75(there sholld be a white transparent area behind inputs)
I guess you are looking for something like this:
<div class="bg-green-400 h-32">
<div class="bg-gray-50 h-full w-6/12 mx-auto bg-opacity-50">
<div>Your Opacity child div here</div>
</div>
</div>
Opacity
Use opacity Keyword only, for version 2.2.7 Tails wind
example:
<div
className = "opacity-75 bg-red-300">
</div>
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.
I'm just trying out Tailwind CSS and want to know how to fill the height of the viewport.
Taking this example HTML from the docs
<div class="flex items-stretch bg-grey-lighter">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
How do I make it stretch to the bottom of the screen?
There is a tailwind class named .h-screen that translates to height:100vh; css. This should work as well. For further details please refer to the Official Tailwind documentation
You can add min-h-screen to the parent <div>, this would fill the height of the viewpoint.
And the difference with h-screen is that this will stretch over the screen. It would be helpful when the screen is tiny and the content is overflowing with a scrollbar. In this situation the background will not fill the rest of the scrolled-up part.
<div class="flex items-stretch bg-grey-lighter min-h-screen">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
Link to some snippets at tailwind play (added a background color example to clarify it): https://play.tailwindcss.com/8Qd822yY4w
You can use .h-screen class of Tailwind CSS.
I know it's an old post, but I found it now, while I was trying to have the background color streched to the size of the screen when the content was too little to fill it and avoid to have the background color to stop suddenly when the content was more of the size of the screen (that happens with h-screen).
I solved the problem using min-h-screen.
I'm using NextJS + tailwindcss.
NextJS adds a <div id="__next">, so this is what I have in my global.css
#tailwind base;
#tailwind components;
#tailwind utilities;
html {
#apply h-full;
}
body {
#apply h-full;
}
div#__next {
#apply h-full;
}
main {
#apply h-full;
}
And in my page I have
<main className="bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500">
...
</main>
You may use h-screen class in your main div. Check out more here
When the content of the body is too little to fill the whole screen, I would use flexbox to vertically stretch the smaller divs evenly.
Make sure body and the parent div have 100% height, and use flex box as columns and add flex-basis to spread vertically and evenly.
html, body {height: 100%;}
.flex {
display: flex;
height: 100%;
flex-direction: column;
}
.flex-1 {
/* or flex-grow: 1; */
flex-basis: 33.33%;
}