In my vue-app I'm doing this loop
<div class="grid grid-cols-3 gap-14">
<article-card v-for="(article, index) in articles" :key="index" :content="article" />
</div>
So far so good, but I want to display the first row of the css-grid differently -> e.g. something like grid-template-columns: 1fr 2fr 1.5fr; - just to make them more visible
How can I do that? Can someone help me out? I'm using tailwindcss, so maybe that could help?
Style an element when it is the first-child using the "first" modifiers:
In your code use condition for the first index (I assume it 1) and use the style, I think you know the condition implementation I just mention the style usage-
<article-card first:your-style />
For more see the official tailwind CSS documentation. First, last, odd, and even
Also a code example I get from Tailwind CSS, that might help you.
<ul role="list" class="p-6 divide-y divide-slate-200">
{#each people as person}
<!-- Remove top/bottom padding when first/last child -->
<li class="flex py-4 first:pt-0 last:pb-0">
<img class="h-10 w-10 rounded-full" src="{person.imageUrl}" alt="" />
<div class="ml-3 overflow-hidden">
<p class="text-sm font-medium text-slate-900">{person.name}</p>
<p class="text-sm text-slate-500 truncate">{person.email}</p>
</div>
</li>
{/each}
</ul>
If you are using Tailwind v3 then you can just use arbitrary values feature, for example like that:
<div class="grid-cols-[200px_minmax(900px,_1fr)_100px]">
<!-- ... -->
</div>
So just wrap values in square brackets [...] and use _ instead of spaces.
More info in the docs as always
Related
I've looking for a way to place elements between sections, I tried using margins but the elements stay "behind" the next section in the page. What's the CSS property I need to use? I use Tailwind CSS but would like to know what property handles it so I can look about it in the documentation. Also, I'm using components (React / JSX) in my project.
I attached an image for reference.
Thanks!
[Elements inside red square][1]
[1]: https://i.stack.imgur.com/vVLbS.png
try codes below in TailwindCSS playground
hope u get what u want
<div class="bg-sky-400">
<p>test</p>
</div>
<div class="bg-indigo-400">
<div class="absolute z-10 -translate-y-1/2">
<div class="inline-block h-4 w-4 rounded-full bg-white"></div>
<div class="inline-block h-4 w-4 rounded-full bg-white"></div>
</div>
<p>hello</p>
</div>
I ran into this problem while trying to truncate my text with an ellipsis. I'm using Tailwind CSS classes to achieve this.
Description:
The string should be truncated like John D... if it's too long, the ellipsis should be aligned at the bottom of the string.
But instead, the ellipsis is floating in the middle of the string like this:
I'm using 'Noto Sans JP', sans-serif font here. I tried changing to another default fonts but it's still behave in the same way.
Here's the code I use to truncate the text:
.truncate {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
JSX:
<div className="rounded-t opacity-80 z-10 flex items-center absolute max-w-[17ch] text-black bg-white py-px px-2 bottom-0 right-4 transform-3d">
<Icon />
<p className='truncate mb-0'>{attendeeName}</p>
</div>
The ... may be occurring due to some other dependency/class like if you have item-center class somewhere in the div wrapping this text.
Assuming this is the code and had no dependency
Otherwise, you don't need to add any additional CSS and !important. Just add truncate text-elipsis class to the text.
Below is the implementation where I had shown the text-elipsis functionality
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-5 space-y-4">
<div class="max-w-[5rem] bg-slate-200">
<Icon />
<p class='truncate text-ellipsis mb-0'>attendeeName</p>
</div>
<div class="max-w-[8rem] bg-slate-200">
<Icon />
<p class='truncate text-ellipsis mb-0'>attendeeName</p>
</div>
</div>
You can see if you use it normally then the ... appears at the bottom. So try to check the complete code again.
Edit after discussion with presenter
I had added the flex class in a span and removed some unnecessary classes.
<script src="https://cdn.tailwindcss.com"></script>
<div class="transform-3d bottom-0 right-4 z-10 max-w-[17ch] rounded-t bg-red-300 py-px px-2 text-black opacity-80">
<span class="flex flex-row space-x-2">
<img src="http://commondatastorage.googleapis.com/codeskulptor-assets/week5-triangle.png" class="h-6 w-6" />
<p class="mb-0 truncate text-ellipsis">attendeeName is very short</p>
</span>
</div>
I'm trying to align the text just above the hr tag like the logout button using bootstrap.
Here's what I want to achieve:
bootstrap code :
<div className="position-relative">
<hr/>
<div className="position-absolute end-0 bottom-0 d-flex">
<p className="align-baseline //not working">Logged in as {user?.email}</p>
<button onClick={handleLogout} className="btn btn-primary ms-2 m-1">Logout</button>
</div>
</div>
Glad for any help
#Edit :
after adding mb-0 to my p tag :
Given the image, your <p> has some margin-bottom, add the bootstrap class mb-0 to the <p> tag.
Then to align the <p> to the bottom, you'd need to have the flex content pushed to bottom, that will be done with adding align-items-end to the div.
I also added a small padding to stop it from sticking to the bottom.
JSFiddle
Edit: As per the answer from G-Cyrillus, you actually don't need the positions either (I overlooked it before). A little change in structure and whole thing looks the same with lesser code. Updated JSFiddle
Here both <p> and <button> are part of d-flex. You can align both the items by using align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column).
<div class="d-flex align-items-center">...</div>
You can find more resource here link.
You probably do not need absolute position , flex & order can do .
example
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="d-flex flex-column"><!-- make it a flex column to use order -->
<hr class="order-2 m-0" /><!-- resets margin & order -->
<div class="d-flex justify-content-end"><!-- here use the justify-content-xx class you need -->
<p class="m-0 mt-auto">Logged in as <b>SO User</b></p><!-- reset margins-->
<button onClick={handleLogout} class="btn btn-primary ms-2 m-1">Logout</button>
</div>
</div>
</div>
</div>
I have something like this:
<main id="parent" class="h-screen flex justify-center items-center">
<div id="child" class="bg-red-200 w-96 h-72 flex">
</div>
</main>
How would I go about applying .bg-blue-100 to the #parent only when hovering over #child?
(I understand that the opposite could be achieved using group on the parent, and group-hover on the child.)
You can give the parent pointer-events-none and the child pointer-events-auto then apply hover:bg-100 or whatever hover effect to the parent and it should only trigger when the child is hovered. Here's an example on Tailwind Play https://play.tailwindcss.com/W4C3J3tW6E
<main id="parent" class="h-screen flex justify-center items-center
hover:bg-blue-100 pointer-events-none">
<div id="child" class="bg-red-200 w-96 h-72 flex pointer-events-auto">
</div>
</main>
In case you also want to style the parent whenever the child is focused, just add
"focus-within:bg-indigo-500"
(Obviously replacing "bg-indigo-500" by your style)
This would work when it happens for every child or if you only have one tho.
With the latest tailwind, you can achieve this with unique group names: https://tailwindcss.com/docs/hover-focus-and-other-states#differentiating-nested-groups
If there are multiple iterations with the unique group name, only the currently hovered group will be affected.
<tr
v-for="song of songs"
:key="song.id"
class="group/row"
>
<td class="group-hover/row:bg-zinc-900">{{ song.name }}</td>
</tr>
I'm using TailwindCSS -a utility class framework- to style my elements. Altough this is more a generic CSS question.
I can't manage to position the box so this gets the remaining space without overflowing it. This is my actual state:
<div class="flex flex-col h-screen mx-8 bg-white rounded p-4 mb-8">
<!-- SUBTITLE -->
<div>
<h2 class="text-lg font-bold text-gray-700 pb-4">Subtitle</h2>
</div>
<div class="relative self-auto mb-8">
<!-- ELEMENTS -->
<a href="#">
<img class="absolute z-10" style="top: 131px; left: 235px;"
src="{{ asset('some.svg') }}">
</a>
</div>
</div>
Output (omitting some of the inside elements):
As you can see, the scrollbar shows because the div is too big. In order to see the bothom of the box I have to scrolldown:
This is my desired output:
Thanks in advance.
Fiddle
Link.
The class .h-screen is 100vh. .mb-8 has an margin-bottom:2rem. So the height is 100vh + 2rem. You can use [calc][1] to subtract the margin from the height.
.h-screen{
height:calc(100vh - 2rem)!important;
}
https://jsfiddle.net/c28145au/
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
This is the solution I found: w-[calc(100%_-_10px)]
you are using class h-screen which has height: 100vh; remove that class from the div.