I am trying to get a map of a component to go to the next line (see yellow arrow). However, right now instead of going below it is squishing the Component (the Cards). I have made bg-colors to help assist. Any guidance would be great!
<div className="border-2 h-screen bg-pink-300 ">
<div className="flex justify-end px-10 ">
<button className="border-2 border-secondary p-2 rounded-lg hover:border-opacity-20">Add Item +</button>
</div>
<div className="flex overflow-x-auto bg-green-500 ">
{data.map((data) => (
<MenuCard title={data.title} ingredients={data. ingredients}
category={data.category} onSpecial={data.onSpecial} />
))}
</div>
</div>
Add the flex-wrap class into the MenuCard's parent div element. Also remove the overflow-x-auto class as this will make the container scroll vertically.
Should look like this.
<div className="flex flex-wrap bg-green-500 ">
{data.map((data) => (
<MenuCard title={data.title} ingredients={data. ingredients}
category={data.category} onSpecial={data.onSpecial} />
))}
</div>
You might also need to add flex-shrink-0 class in each MenuCard instances if it tries to shrink.
Related
I have some layout similar to this: https://play.tailwindcss.com/WW3PM6nFPX
When I expand one view, the entire row of views beneath it is pushed down. How can I implement a similar layout but where only the column that the expanded view is within is affected?
The actual code is a div whose height changes on button click. Like this:
<div class="rounded-lg bg-blue-700 px-4 py-2">
<div class="flex flex-row items-center">
<h1 class="font-semibold text-2xl">{project.name}</h1>
<div class="flex-grow" />
<Overflow />
</div>
<span>{project.desc}</span>
<BadgeStatus />
</div>
BadgeStatus looks like this:
<div ref={dropdownRef}
class="flex flex-row mx-2 mb-2 mt-2 px-2 py-2 rounded-md bg-green-50"
style={{height: height}}>
<span>Test</span>
<div class="flex-grow" />
<button onClick={() => setOpen(!open)}>
// Dropdown arrow //
</button>
</div>
This is what the grid looks like normally:
And when I expand one of the views:
According to the link you gave, I wrote a simple layout
I hope this is what you want
https://play.tailwindcss.com/z8hg8qChU9
I want to create a <hr> divider using Tailwind CSS, but instead of the horizontal rule spanning the entire width of the page unbroken, I want to add some text in the middle.
For example:
----------------------------------- Continue -----------------------------
I can't find anything like this in the documentation. How can I achieve this effect?
If necessary, I can change the HTML to something other than an <hr> element. That was just the only way I knew how to create a horizontal rule.
You can use this HTML syntax to create what you want :
<div class="relative flex py-5 items-center">
<div class="flex-grow border-t border-gray-400"></div>
<span class="flex-shrink mx-4 text-gray-400">Content</span>
<div class="flex-grow border-t border-gray-400"></div>
</div>
See here the result: https://play.tailwindcss.com/65JULZ5XES
Try this instead...
<script src="https://cdn.tailwindcss.com"></script>
<div class="relative py-4">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-b border-gray-300"></div>
</div>
<div class="relative flex justify-center">
<span class="bg-white px-4 text-sm text-gray-500">Continue</span>
</div>
</div>
Example
https://play.tailwindcss.com/Yx4OmAlBsv
Yes, you can do this:
<script src="https://cdn.tailwindcss.com"></script>
<h1 class="text-center overflow-hidden before:h-[1px] after:h-[1px] after:bg-black
after:inline-block after:relative after:align-middle after:w-1/4
before:bg-black before:inline-block before:relative before:align-middle
before:w-1/4 before:right-2 after:left-2 text-xl p-4">Heading
</h1>
Try this.
Need to adjust the height, margin, bg-color, etc. to fit your website.
https://play.tailwindcss.com/FzGZ1fMOEL
<div class="h-5 border-b-4 border-black text-2xl text-center">
<span class="bg-white px-5">your text</span>
</div>
I want to do this:
But my image stay in right side of div, like that:
Soo I don't know why it's happening, that's my code:
<div class="flex h-full justify-center items-center">
<div>
<h2 class="font-bold text-2xl text-gray-700">Page Not Found 🕵🏻♀️</h2>
<h3 class="mt-3 text-gray-500">Oops! 😖 The requested URL was not found on this server.</h3>
<div class="lg:grid justify-center mt-4">
<BreezeButton
class="
inline-table
w-full
items-center
bg-purple-600
text-white text-xs
font-bold
hover:bg-purple-600 hover:shadow-purple
mt-3
"
:href="route('dashboard')"
>
Back to home
</BreezeButton>
</div>
</div>
<div>
<img src="../../Assets/Img/error404.svg" alt="" />
</div>
</div>
You flexed the wrapper div so it seems to have placed the items in a row by default. Use "flex-col" alongside that in order to place your items in a column.
As #xavi3r mentioned you need to use flex-col, as a reminder, Tailwind uses a mobile-first breakpoint, so you need to set one of the breakpoints to change it to row for large devices as follows lg:flex-row or any other breakpoint!!
I have this div that's supposed to represent a button next to an input. Ideally on resolution change, the input element's width shrinks but the button stays the same height and width.
<div className="flex flex-row rounded-lg border border-white border-solid hover:cursor-pointer py-2 px-2 w-28">
<AddIcon></AddIcon>
<div className="flex font-sans text-base font-medium">Add site</div>
</div>
I set the w-28 property thinking it could achieve this. However, the button changes width if I shrink the window or screen it appears on, and I'm not sure why.
This is the full component:
<div id="settings" className="w-3/4 h-5/6 bg-blue-300 self-center">
<div id="settings-content" className="flex flex-col self-center mx-5">
<div id="header" className="flex flex-col mt-5">
<div id="title" className="font-sans font-bold text-3xl">Block Sites</div>
</div>
<div id="subtitle" className="font-sans text-base font-medium text-neutral-600">Visiting these sites will stop point acquisition until you reset the timer</div>
<div id="block-site-add-list" className="flex flex-row mt-16 justify-between bg-amber-400 shrink-0">
<div className="flex flex-row rounded-lg border border-white border-solid hover:cursor-pointer py-2 px-2 w-28">
<AddIcon></AddIcon>
<div className="flex font-sans text-base font-medium">Add site</div>
</div>
<input className="ml-5 flex-grow bg-red-500"></input>
</div>
</div>
</div>
This is what the button looks like with a smaller screen, when both words should be on the same line:
You could try adding whitespace-nowrap to your label div to ensure that the text doesn't wrap to two lines. Since you have your elements (button and input) wrapped in another flex, you can add shrink-0 to your wrapper div to keep its size.
For example:
<div id="block-site-add-list" className="flex flex-row ...">
<div className="shrink-0 flex flex-row ...">
<AddIcon></AddIcon>
<div className="whitespace-nowrap font-sans text-base font-medium">Add site</div>
</div>
<input className="ml-5 grow bg-red-500"></input>
</div>
I'm starting to play with Vue.js and Tailwindcss. I would like to create a component that scale depending on the container in which it's in. Is there a way to do that easily ?
For instance my current component is the following one :
NowPlaying.vue
<template>
<div class="flex flex-row flex-grow items-center p-24">
<TrackImage class="h-64 w-64" :image="image" :blurred="!isPlaying" />
<div class="ml-10 flex-1">
<div
class="uppercase tracking-tight font-extrabold text-5xl text-left text-white break-normal"
>
{{ name }}
</div>
<div
class="tracking-tight font-semibold text-3xl text-white text-left w-auto inline-block pb-4"
>
{{ artistsList }}
</div>
<ProgressBar />
</div>
</div>
</template>
Which is used in the following page:
<template>
<div class="h-screen bg-black">
<div class="container mx-auto h-full flex flex-col">
<NowPlaying :class="nowPlayingClasses" />
<TopTracks v-if="!isPlaying" />
</div>
</div>
</template>
My idea with nowPlayingClasses was to dynamically set classes of the NowPlaying component to resize it so I can later add a scaling animation without rebuilding my page.
But I can't get how I could do this.
I did try to use the scale css transformation, but it keeps the initial component size which is not what I want.