I tried using space-y-2 and leading but I still can't put gaps between them.
<a href="" class="bg-blue-dark lg:hidden">
<span class="block w-7 h-1 mb-1"></span>
<span class="block w-7 h-1 mb-1"></span>
<span class="block w-7 h-1"></span>
</a>
According to your current code, there is space between your hamburger bars because you have used the margin-bottom class i.e mb-1.
Another approach would be to make the bars flex items, then arrange them column-wise and justify the content. Remember to add a certain height to your flex box container.
<a href="" class="bg-blue-dark lg:hidden h-5 flex flex-col justify-between">
<span class="block w-7 h-1"></span>
<span class="block w-7 h-1"></span>
<span class="block w-7 h-1"></span>
</a>
*If bg-blue-dark is your custom class to add colour to the bars then add it to the <span> tags instead of the <a> tag.
Related
I am running into an issue with centered text that has the whitespace-nowrap class only overflowing to the right. I want it to still be centered and overflow to the left just as much as the right.
<div class="mr-[23px] items-center content-center justify-center">
<span class="font-inter font-bold text-12px text-white w-[40px] text-center whitespace-nowrap">
testtext
</span>
</div>
I'm trying to create a custom shape that has a triangle that overflows on the square left side.
I've tried to use absolute and relative positions to achieve it by putting the square behind it but then it hides the spans on the main square. How can I do it?
Shape that I'm trying to achieve
My code:
<div class="h-96 p-6 bg-white relative rounded-3xl border-3 border-white shadow-sm transition ease-in-out hover:scale-110">
<div class="flex justify-between">
<i class="fa-solid fa-gem text-4xl text-secondary"></i>
<div class="absolute -top-5 right-8 flex flex-col items-center p-4 bg-blue">
<span class="text-purewhite font-semibold text-3xl">25€</span>
<span class="text-gray-200 font-semibold">for month</span>
</div>
<!-- <span class="text-3xl text-primary font-medium">Base</span> -->
</div>
</div>
This is what my current UI looks like
Already written in the top
I am using the #tailwindcss/line-clamp plugin to clamp a text element (<span>) to one line (line-clamp-1). The text element is inside a flex box, and is followed by another text element that's supposed to "stick" to its right side.
My problem is that the width of the clamped text element is not computed properly. Even though the text is clamped correctly, the width of the element remains too wide and the following text does not "stick" closely like I want to.
Below is a screenshot. The "problem element" is the one that says "Human-Computer Interaction". It should look like the others, where the "post count" in parentheses "sticks" closely to the topic label.
Here is my code:
{{#foreach tags}}
<a class="flex flex-row gap-1" href="{{url}}">
<span class="text-neutral-200 line-clamp-1"> {{name}}</span>
<span class="text-neutral-500"> ({{count.posts}})</span>
</a>
{{/foreach}}
How does one reduce the width of the clamped text element to fit the clamped text inside?
P.S. I have tried replacing <span>s with <p> elements, and using other CSS approaches that don't involve the line-clamp plugin, and have not found a solution so far.
There is no need to use an extra package because you only one have line and for achieve you can use text-overflow property with white-space and overflow to get the same result.
You can use it as inline or create you own class with #layer.
<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
#layer utilities { .ellip { #apply overflow-hidden text-ellipsis whitespace-nowrap; } }
</style>
<div class="grid grid-cols-4 gap-6 bg-black">
<div class="flex flex-col">
<a class="flex flex-row gap-1" href="/#">
<span class="overflow-hidden text-ellipsis whitespace-nowrap text-neutral-200"> Music</span>
<span class="text-neutral-500"> (7)</span>
</a>
<a class="flex flex-row gap-1" href="/#">
<span class="overflow-hidden text-ellipsis whitespace-nowrap text-neutral-200"> Architecture</span>
<span class="text-neutral-500"> (2)</span>
</a>
<a class="flex flex-row gap-1" href="/#">
<span class="overflow-hidden text-ellipsis whitespace-nowrap text-neutral-200"> Graphic Design</span>
<span class="text-neutral-500"> (10)</span>
</a>
<a class="flex flex-row gap-1" href="/#">
<span class="overflow-hidden text-ellipsis whitespace-nowrap text-neutral-200"> Human-Computer Interaction </span>
<span class="text-neutral-500"> (5)</span>
</a>
</div>
<div class="flex flex-col">
<a class="flex flex-row gap-1" href="/#">
<span class="text-neutral-200 ellip"> Human-Computer Interaction</span>
<span class="text-neutral-500"> (7)</span>
</a>
<a class="flex flex-row gap-1" href="/#">
<span class="text-neutral-200"> Art</span>
<span class="text-neutral-500"> (4)</span>
</a>
<a class="flex flex-row gap-1" href="/#">
<span class="text-neutral-200 ellip"> Education</span>
<span class="text-neutral-500"> (5)</span>
</a>
<a class="flex flex-row gap-1" href="/#">
<span class="text-neutral-200 ellip"> Graphic Design</span>
<span class="text-neutral-500"> (10)</span>
</a>
</div>
</div>
I am currently facing a weird issue with a project of mine
I am attempting to make a button change its color when I hover over it and also change the text's color inside of the button
This works perfectly until I hover over the border button which triggers the hover event for the whole button but not the text inside of it
<a class="min-w-full lg:min-w-[0px]" target="_blank" href="https://stackoverflow.com">
<button
type="button"
class="border-4 border-github rounded-[12px] min-w-full lg:min-w-[0px] mx-1 mb-4 lg:mb-2 py-2 hover:bg-github transition duration-200 ease-in-out">
<span
class="w-full h-full select-none text-github text-2xl lg:text-3xl lg:px-
[6.625rem] font-semibold hover:text-background transition duration-100">
check this out
</span>
</button>
</a>
How could I make the border of a button not trigger the hover event ?
Or are there any other better ways to do what I am trying to do?
group-hover
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state
Try this:
<a class="min-w-full lg:min-w-[0px]" target="_blank" href="https://stackoverflow.com">
<button type="button" class="group border-4 border-github rounded-[12px] min-w-full lg:min-w-[0px] mx-1 mb-4 lg:mb-2 py-2 hover:bg-github transition duration-200 ease-in-out">
<span class="w-full h-full select-none text-github text-2xl lg:text-3xl lg:px- [6.625rem] font-semibold group-hover:text-background transition duration-100"> check this out </span>
</button>
</a>
I have a section with the following contents:
<section class="flex flex-wrap -mx-2">
<Card
v-for="(course, index) in courses"
:key="index"
:title="course.title"
:professor="course.professor"
:price="course.price"
:excerpt="course.excerpt"
:image="course.image"
:category="course.category"
/>
</section>
A Card looks like this:
<article class="bg-red mt-5 px-2 w-full md:w-1/2 lg:w-1/3 xl:w-1/3 shadow-md rounded bg-white">
<nuxt-link to="/courses/example-course">
<img :src="`/images/${image}`" :alt="title" class="rounded-t w-full">
</nuxt-link>
<div class="p-4">
<header class="flex justify-between">
<section>
<h3 class="text-gray-700">
<nuxt-link to="/courses/example-course" class="hover:text-gray-600" v-text="title"></nuxt-link>
</h3>
<p class="text-gray-600 mt-1" v-text="professor"></p>
</section>
<div v-if="price">
<span class="px-2 py-1 bg-green-200 text-green-500 font-bold rounded">${{ price }}</span>
</div>
</header>
<article class="text-gray-700 mt-2" v-text="excerpt"></article>
</div>
<footer class="border-t border-gray-300 uppercase p-5 flex justify-between">
<span class="text-gray-600 text-xs font-bold self-center" v-text="category"></span>
<a href="#" class="text-gray-600 hover:text-blue-600">
<i v-if="price" class="fa fa-user"></i>
</a>
</footer>
</article>
And the outcome of all this looks like this:
As you can see, the cards are touching each other, despite me following what the Tailwind's docs say on grid spacing. I have tried adding ml-2 on the <article> tags, but that just results in wrapping the element prematurely and leaving out too much space.
What am I doing wrong here and how to add a gap between the cards? Thanks!
The "problem" with margin is that it lives on the outside of the box(model) of your element, e.g. it affects the total width of your card. For example on large screens you want them to be 33.33% wide, but if you add margin on the left/right, the card will have a width of 33.33% + margin which makes the flexbox container wrap after two items because otherwise the total width would be more than 100%. You can solve this by a) setting things to box-sizing: border-box (doesn't help with margin tough!) and b) use padding instead of margin to create the gaps, this usually requires some kind of wrapper around your content that does nothing else than dealing with spacing and sizing, something like this:
<article class="mt-5 px-2 w-full md:w-1/2 lg:w-1/3 xl:w-1/3">
<div class="card bg-red shadow-md rounded bg-white">
<nuxt-link to="/courses/example-course">
<img :src="`/images/${image}`" :alt="title" class="rounded-t w-full">
</nuxt-link>
<div class="p-4">
<header class="flex justify-between">
<section>
<h3 class="text-gray-700">
<nuxt-link to="/courses/example-course" class="hover:text-gray-600" v-text="title"></nuxt-link>
</h3>
<p class="text-gray-600 mt-1" v-text="professor"></p>
</section>
<div v-if="price">
<span class="px-2 py-1 bg-green-200 text-green-500 font-bold rounded">${{ price }}</span>
</div>
</header>
<article class="text-gray-700 mt-2" v-text="excerpt"></article>
</div>
<footer class="border-t border-gray-300 uppercase p-5 flex justify-between">
<span class="text-gray-600 text-xs font-bold self-center" v-text="category"></span>
<a href="#" class="text-gray-600 hover:text-blue-600">
<i v-if="price" class="fa fa-user"></i>
</a>
</footer>
</div>
</article>
I know it is kind of annoying to clutter up the markup like that, but its usually worth it =).
EDIT: It is actually as the docs say
Add a negative horizontal margin like -mx-2 to your column container and an equal horizontal padding like px-2 to each column to add gutters.
your issue is with the box-shadow that then doesn't let you create a visual gap, so technically you need the wrapper because of your box-shadow!