I am using React With Tailwind
I need to Apply same Gradient to Navbar as well as Sidebar
but applying gradient on both give different flow.
Please give me solution!
<navbar className="flex h-16 w-full bg-gradient-to-r from-gray-800 to-blue-800 justify-center"></navbar>
<sidebar className='flex absolute h-full w-1/4 bg-gradient-to-r from-gray-800 to-blue-800'></sidebar>
If you can make sure your navbar is 100vw, then you can add Pseudo-element to the sidebar and add gradient background to it. If there is a vertical scrollbar, it may shift the gradient a bit. You can apply the same trick to the navbar to avoid this behavior, but overflow:hidden may affect some overflow element like menu dropdown. In this case, you may nest another full width, height, absolute div then add Pseudo-element into it in your navbar.
<div className="flex h-16 w-full justify-center bg-gradient-to-r from-gray-800 to-blue-800 overflow-y-scroll"></div>
<div className="relative flex h-full w-1/4 overflow-hidden from-gray-800 to-blue-800 before:h-full before:absolute before:w-screen before:bg-gradient-to-r before:content-[''] before:-z-10"></div>
Code can be found here
Related
I am trying to apply a style to my links when they are focused. But it does not work. I am using tailwindcss (on a React js application).
Here is my code :
<Link to='/clients' className=''>
<div className="text-2sm font-semibold flex items-center mb-4 hover:bg-[#BE97C6] focus:bg-[#BE97C6] px-2 py-1 rounded-full transition ease-in-out ">
<IoPersonCircleSharp className="text-xl mx-1"/>
<p className="">Clients</p>
</div>
</Link>
Can you, please, help me to solve it ? Thanks you !
Your Link is getting focused and not the div.
Try to set group class on Link and then group-focus:bg-[#BE97C6] on the div.
Hi All,
I am looking for a responsive way using TailwindCSS to bind the outer card component to the viewport.
I've tried w-screen and h-screen, however they don't ensure that the card component remains in view across differing window sizes.
I want to get rid of the white space around the card.
Any suggestions are much appreciated.
Thanks,
Brandon
import BlogPost from './BlogPost';
const CardDisplay = () => {
return (
<div class="object-cover w-screen relative bg-white rounded-xl shadow-md overscroll-contain overflow-hidden ">
<div class="md:flex">
<div class="lg:shrink-0">
<img class="h-full w-full object-cover md:h-full md:w-64" src="/img/store.jpg" alt="Man looking at item at a store"></img>
</div>
<div class="p-32">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
<BlogPost/>
<BlogPost/>
<BlogPost/>
</div>
</div>
</div>
)
}
export default CardDisplay;
I have a conditional class for 'show' when show is true our div element should transition in from -right-[55rem] to right-[0rem] the issue is it is not doing this w/ a duration of 700ms it just pops open, when I do the inspect on dev tools I can click and unclick the style elements and it will slide in like I want it to. I have made sure everything i numerical value on TW side and cannot figure out why it works on inspect and not on the actual button click for our ui
<div className={classNames(show ? "right-[0px] top-0 transition-all duration-700 ": "top-0", "-right-[330px] mt-14 md:mt-0 w-screen md:left-0 absolute md:fixed md:w-40 bg-default overflow-y-auto flex")}></div>
Try to use this
<div className={`${show ? `right-[0px] top-0 transition-all duration-700`: `top-0`} -right-[330px] mt-14 md:mt-0 w-screen md:left-0 absolute md:fixed md:w-40 bg-default overflow-y-auto flex`}></div>
Looks like the package released a fix :)
https://github.com/tailwindlabs/headlessui/pull/1803
serveral failed attempts with headless ui Transition finally got it working with this snippet wrapping my component. perfectly sliding into to view :)
<Transition
as={Fragment}
appear={true}
show={show}
enter="transition-all ease-in duration-500 "
enterFrom="-right-full"
enterTo="right-0"
leave="transition-all ease-out duration-500 "
leaveFrom="right-0"
leaveTo="-right-full"
>
<div className="absolute top-[56px] md:mt-0 md:left-0 w-screen
md:fixed
md:w-40 bg-default overflow-y-auto flex">...</div>
</Transition>
I want to let rows intercalate each other, as represented below:
The problem is at the moment I can't intercalate the rows, so I end up having a layout that looks like this:
Or a more real example of what I have:
I tried a lot of ways, including Grid Auto Flow, Inline Grid and also making the child Inline Block but nothing seem to work. From what I inspected each column is as big in height as the one in right, which I don't want.
I can't think of a solution to achieve the desired output using grid layout.
A possible way to do it would be using w-1/2 to set the width of both columns and to absolutely position the second column at the top right corner of the parent. Please check the code snippet below for example.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="relative h-full w-full">
<div class="w-1/2">
<div class="w-full h-20 bg-blue-400"></div>
<div class="w-full h-10 bg-yellow-400"></div>
<div class="w-full h-36 bg-red-400"></div>
</div>
<div class="absolute right-0 top-0 w-1/2">
<div class="w-full h-40 bg-green-400"></div>
<div class="w-full h-36 bg-indigo-400"></div>
</div>
</div>
const Product = ({product}) => {
return (
<div className="rounded shadow flex-col justify-center overflow-hidden">
<img className="" src={product.image} />
<span className="block h-16">{product.name}</span>
<span className="block">{product.price}</span>
<button className="px-4 py-2 my-2 bg-green-200 rounded block">Add to Cart</button>
</div>
)
}
This is a card component in React using Tailwind CSS.
I cannot get the items to be centered in the card.
I used flex-col so the direction is now vertical and tried justify-center as well as items-center with tailwind but it doesn't seem to be moving anything.
If you use flex-col doesn't the axis get swapped so you need to use align-items: center to make it vertically centered?
The justify-content CSS property aligns on the current flex-direction axis, while the align-items CSS property aligns on the axis perpendicular to the current flex-direction.
Therefore, if the container has flex-direction set to column (.flex-col), you need to use .items-center (in CSS: align-items: center) to center its children horizontally.
However, if the centered child is block level, its text might still be left-aligned even though the element, (being a 100% width box) is centered in the column, in which case you'll need to use text-align: center (.text-center) on the child to horizontally align its contents.
For an in-depth article on flexbox, I recommend A complete guide to flexbox.