My component is wrapped by this div:
<div className="bg-gray-800 border border-gray-700 rounded-lg">
....
</div>
After installing Flowbite the border wasn't taking any color.
Look after install.
Somehow also the Dividers lost their color.
You need to add border-solid to className and it should work
Related
I'm trying to construct a fixed navbar, such that the background is blurred, buttons and images stay styled as they're styled, but the menu item text adjusts to properly contrast to the underlying color as the background scrolls.
I'm very very close, but can't seem to get it to work in a cross-browser kind of way (I really thought the days of this were mostly behind us :( ).
Here's what it looks like on Safari.
Navbar over light background:
Navbar over text on light background:
Navbar over text on dark background:
That's pretty much good enough (although I'd ultimately like the text in that last image to be white instead of brown/sepia). The problem is, all of that is in Safari, but when I look at it in Chrome or Firefox, I get
The amusing/frustrating thing about that is, I couldn't get it to work in Safari at all (you couldn't have both a filter and a mix-blend-mode), without applying this fix which was specified for Chrome!
The suggestion there is to "add any backdrop-filter rule to the same element that has the mix-blend-mode rule applied" to deal with a bug in Chrome 90 (the answer is about 18 months old).
Here's a sample of what it looks like:
// backdrop-blur for the whole navbar
<header class="sticky backdrop-blur top-0 left-0 z-[1100] w-full">
<nav>
<ul class="flex justify-between ml-auto">
// a text element that uses mix-blend-difference to generate proper contrast
<li class="text-white bg-black mix-blend-difference
[backdrop-filter:opacity(1)]"> // <- this is the hack
Products
</li>
// a styled element that shouldn't change
<li>
<a class="bg-emerald-700 hover:bg-emerald-600 text-white py-2 px-4
rounded-sm shadow-lg shadow-emerald-800" href="/">
About
</a>
</li>
</ul>
</nav>
</header>
I'd put it in a fiddle, but I don't know how to get Tailwind support there, so you can play with it at Tailwind Play.
Further down in that same question is another answer from about a year ago, that suggest now you can't put the extraneous filter on the same element as the mix-blend-mode, and instead must but it on wrapper element around the blended element. Unfortunately, that not only doesn't fix it for Chrome, it also breaks it for Safari.
It appears that both CSS Filter Effects and CSS mix-blend-mode are theoretically pretty well supported, but either that's not true, or I'm doing something wrong.
Any ideas on how I can get this to work in a cross-browser compatible way?
I'm (very) new to Tailwind and have encountered a problem that is driving me crazy. I'm looking to place an image in a footer. At desktop size (1024px), the image needs to sit to the left of the footer content and then on smaller screens, the logo needs to be centered, pretty standard stuff. As with non-tailwind css, I'm using margin to control this and as guided in the documentation, my default setup is in mobile-first so the horizontal margin is set to auto with the following to put the image in the middle with the aim for it to be set to the left when being viewed at a bigger resolution:
<img alt="..." :src="logo" class="mx-auto"/>
The key thing here is mx-auto which centers the image. As per the documentation, I then want to remove the auto-positioning so I add the following to adjust the margin once the screen is at a bigger resolution.
<img alt="..." :src="logo" class="mx-auto lg:mx-0"/>
However, when I run this the image just stays positioned in the center of the element when at full desktop resolution. I've tried using ml-0 just in case there was a problem overriding the original setting but in the inspector, the media query doesn't even attempt to override.
I'm building from a template that does similar things to what I want elsewhere in the project however when I copy that code over, it works until I make a change to the setting (changing a -16 to a -20 etc...) which is also odd. I'm not sure if I've messed something up with my configuration or am just missing something basic but any pointers would be really appreciated.
Just in case its something to do with the container the image is in, here's the wider container:
<div class="container mx-auto px-4">
<div class="flex flex-wrap text-center lg:text-left">
<div class="w-full lg:w-6/12 px-4">
<img alt="..." :src="logo" class="max-w-250-px pb-4 mx-auto lg:mx-0"/>
</div>
</div>
</div>
Maybe something to do with the flex?
It is max-w-[250px] not max-w-250-px
Why not use the flex container you already have to get it done?
What you want is this: https://play.tailwindcss.com/wgHwT7KMJ5
{sliderItems.map((item) => (
<div className={`Slide w-screen h-screen flex items-center bg-[${item.bg}]`}>
I wnat to change background color using map function.
but, never change background color..
is it impossible?
i am following a tutorial by chris sev on Better Dev channel.
Here is the codepen for the tutorial.
I want to make this sidebar fixed and avoid scrolling. Right now if i put content the sidebar also scrolls with the content.
i have tried fixed top-0 and sticky top-0on the div with the sidebar class.
None of this seemed to do it. Anyone know how to make the side bar fixed?
the main problem of your example was the wrong usage of flex and how you implemented it.
Here's a clean version of your codepen link (without the mobile version, I'll let you deal with that ;)
In short, you need to make sure the FLEX main app will use the full window size :
<div id="app" class="fixed flex w-full h-full ...">
Once the main app is set, you will just need to adapt the children to your needs :
<div id="sidebar" class="w-64 ...">
As you can see, you just need to set the width for the "static" element (the one that needs to stay always the same)
The dynamic element – the content container – will have more flexibility, therefore we apply .flex-1 :
<div id="content" class="flex-1 overflow-auto ...">
This is not really related to tailwind but rather to display: flex; itself.
(PS : I've edited so you only see the important classes)
I just started to use angular ui-layout to allow splitting panes in a UI.
I'm trying to create a sidebar that has this blue element on the bottom
Is there a way to trick the ui-layout directive to achieve this? I tried doing size, but that just does absolute sizing, I want the bluebox just take up some space (showing 100% of its content) and the element above it needs to scroll and take up the rest of the vertical space.
EDIT: added the HTML
<ui-layout options="{ flow: 'row' }">
<div ui-layout-container> top part </div>
<div ui-layout-container> blue box</div>
</ui-layout>
I don't know why you want to use ui.layout, but I would not recommend to use it to achieve what you want.
ui.layout uses flex box model and you can use it by yourself without using another invasive javascript layout. You can fully achieve what you want using css only.
This is what I did to achieve what you want only using CSS. http://plnkr.co/edit/0mSxkNC5wl6WTbWc81z6?p=preview.
<div class="container flex flex-column">
<div class="top flex flex-row flex-auto flex-stretch">
<div class="flex-auto">Top</div>
<div class="sidebar">sidebar</div>
</div>
<div style="background:blue">Bottom</div>
</div>
If you are very interested in using Flex layout, I would recommend to use Angular Material Design, and it is advanced and makes more sense than ui.layout.
To know more about flex box, you can see this example.
http://plnkr.co/edit/lxx7QCwZbeZyyUtwiCym?p=preview.