How do we do gutters in Tailwind CSS?
My attempt with gap-4 below:
<div class="flex flex-col justify-center items-center h-64 bg-green-100 gap-4">
<div class="flex flex-wrap justify-center items-center gap-4 w-full">
<div class="bg-green-500 w-1/2 text-center">1</div>
<div class="bg-green-500 w-1/2 text-center">1</div>
<div class="bg-green-500 w-1/2 text-center">1</div>
<div class="bg-green-500 w-1/2 text-center">1</div>
<div class="bg-green-500 w-1/2 text-center">1</div>
</div>
</div>
But the result is not what I am trying to achieve as the gutters in Foundation:
<div class="grid-x grid-margin-x">
<div class="cell medium-6 large-4">12/6/4 cells</div>
<div class="cell medium-6 large-8">12/6/8 cells</div>
</div>
<div class="grid-x grid-padding-x">
<div class="cell medium-6 large-4">12/6/4 cells</div>
<div class="cell medium-6 large-8">12/6/8 cells</div>
</div>
Is it gaps that I should look for in TW? Or something else?
Use space-x-<n> and/or space-y-<n> (Space Between) for flexbox.
Use gap-<n> (Gap) for grids.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="flex flex-row space-x-4 bg-red-200">
<div class="bg-red-400 p-4 flex-grow">Flex</div>
<div class="bg-red-400 p-4 flex-grow">Flex</div>
<div class="bg-red-400 p-4 flex-grow">Flex</div>
<div class="bg-red-400 p-4 flex-grow">Flex</div>
</div>
<br>
<div class="grid grid-flow-row grid-cols-4 gap-4 bg-blue-200">
<div class="bg-blue-400 p-4">Grid</div>
<div class="bg-blue-400 p-4">Grid</div>
<div class="bg-blue-400 p-4">Grid</div>
<div class="bg-blue-400 p-4">Grid</div>
</div>
Related
I am trying to center the rounded full image between the main cover photo and the left column. For some reason I cannot get it to move from the top left corner and I cannot see what I am doing wrong. I am using Tailwind CSS.
<Head :title="profile.name" />
<div class="relative w-full max-h-screen bg-gray-900 flex justify-start items-center rounded-lg">
<div class="relative flex w-full h-48 bg-gray-700">
<img :src="profile.cover_photo_path" class="cover-bg w-full "/>
<div class="absolute inset-0 bottom-0 left-0">
<img :src="profile.profile_photo_path" class="w-48 h-48 rounded-full border-2 border-red-600"/>
</div>
</div>
</div>
<div class="flex flex-row">
<!-- Left Column -->
<div class="bg-gray-900 w-1/3 h-96 z-0">
</div>
<!-- Right Column -->
<div class="bg-gray-900 w-2/3 h-48 z-0">
<div class="flex flex-row justify-between px-2 items-center h-12 border-b border-red-700">
<div class="text-white text-center font-normal"> Feed </div>
<div class="text-white text-center font-normal"> About </div>
<div class="text-white text-center font-normal"> Photos </div>
<div class="text-white text-center font-normal"> Videos </div>
<div class="text-white text-center font-normal"> Events </div>
<div class="text-white text-center font-normal"> Groups </div>
<div class="text-white text-center font-normal"> Pages </div>
<div class="text-white text-center font-normal"> Followers </div>
<div class="text-white text-center font-normal"> Following </div>
</div>
</div>
</div>
</template>
As far as I understood , you want the circle rounded image in the middle of cover and left sidebar vertically and over them.
So I had created this ,please verify if you want. Else I would rather suggest you to attach a screenshot of what you want .
<script src="https://cdn.tailwindcss.com"></script>
<div class="relative flex max-h-screen w-full items-center justify-start rounded-lg bg-gray-900">
<div class="relative flex h-48 w-full bg-gray-700">
<img src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back05.jpg" class="cover-bg w-full" />
<div class="absolute inset-0 top-1/2 left-10 z-10">
<img src="http://codeskulptor-demos.commondatastorage.googleapis.com/pang/IHXoEES.png" class="h-48 w-48 rounded-full border-2 border-red-600" />
</div>
</div>
</div>
<div class="flex flex-row">
<!-- Left Column -->
<div class="z-0 h-96 w-1/3 bg-gray-900"></div>
<!-- Right Column -->
<div class="z-0 h-48 w-2/3 bg-gray-800">
<div class="flex h-12 flex-row items-center justify-between border-b border-red-700 px-2">
<div class="text-center font-normal text-white">Feed</div>
<div class="text-center font-normal text-white">About</div>
<div class="text-center font-normal text-white">Photos</div>
<div class="text-center font-normal text-white">Videos</div>
<div class="text-center font-normal text-white">Events</div>
<div class="text-center font-normal text-white">Groups</div>
<div class="text-center font-normal text-white">Pages</div>
<div class="text-center font-normal text-white">Followers</div>
<div class="text-center font-normal text-white">Following</div>
</div>
</div>
</div>
I want to align the text under the image here is the screenshot of what I am doing.
Help me out here I want the code to be in tailwind css.
Do you mean like this?
<script src="https://cdn.tailwindcss.com"></script>
<div class=" p-8 bg-gray-100">
<div class="w-96 flex justify-start space-x-3 bg-gray-200 h-48 rounded-md p-8">
<div class="space-y-4 text-center">
<div class="w-16 h-16 bg-teal-700 rounded-full"></div>
<h1 class=" px-2 py-0.5 bg-gray-50 border-2 border-gray-300 ">First Name</h1>
</div>
<div class="space-y-4 text-center">
<div class="w-16 h-16 bg-teal-700 rounded-full"></div>
<h1 class=" px-2 py-0.5 bg-gray-50 border-2 border-gray-300 ">SecondName</h1>
</div>
</div>
</div>
You just need to do this. It works for me.
<div class="flex p-10 ">
<div class="mx-5">
<div class="w-20 h-20 ">
<img src="https://comps.gograph.com/penguin-emotional-head-vector-illustration-of-cute-arctic-bird-in-sunglasses-shows-emotion-cool-emoji-smiley-icon-print-chat-communication-penguin-in-flat-cartoon-style-on-blue-background_gg103004116.jpg" className="rounded-full"/>
</div>
<p class="mt-3 p-1 border-2 border-teal-200 ">Zain UI Adideen</p>
</div>
<div class="mx-5">
<div class="w-20 h-20">
<img src="https://comps.gograph.com/penguin-emotional-head-vector-illustration-of-cute-arctic-bird-in-sunglasses-shows-emotion-cool-emoji-smiley-icon-print-chat-communication-penguin-in-flat-cartoon-style-on-blue-background_gg103004116.jpg" className="rounded-full"/>
</div>
<p class="mt-3 p-1 border-2 border-teal-200 ">Akira Ito</p>
</div>
</div>
How can I make the second column use the minimum amount of space needed?
https://play.tailwindcss.com/tYdbqCSfoh?size=540x720
I have this:
But I want this instead:
<div class="min-h-screen bg-gray-50 py-6 flex flex-col justify-center relative overflow-hidden sm:py-12">
<div class="relative bg-gray-600">
<div class="max-w-full m-2">
<div class="grid gap-2 grid-flow-col bg-blue-300">
<div class="bg-green-200">sdf</div>
<div class="bg-red-200">sdf</div>
</div>
</div>
</div>
</div>
Just add grid-cols-1
<script src="https://cdn.tailwindcss.com"></script>
<div class="min-h-screen bg-gray-50 py-6 flex flex-col justify-center relative overflow-hidden sm:py-12">
<div class="relative bg-gray-600">
<div class="max-w-full m-2">
<div class="grid grid-cols-1 gap-2 grid-flow-col bg-blue-300">
<div class="bg-green-200">sdf</div>
<div class="bg-red-200">sdf</div>
</div>
</div>
</div>
</div>
<div class="">
<div class="w-16 h-16 border-b-30 border-l-30 border-solid border-black">
<div class="h-16 w-16 border-t-30 border-r-30 bg-transparent"></div>
</div>
</div>
how to make a triangle with tailwindCss without plugin ??
You may try using transform:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="w-16 overflow-hidden inline-block">
<div class=" h-11 w-11 bg-black rotate-45 transform origin-bottom-left"></div>
</div>
<div class="w-16 overflow-hidden inline-block">
<div class=" h-11 w-11 bg-black -rotate-45 transform origin-top-left"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black -rotate-45 transform origin-top-right"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black rotate-45 transform origin-top-left"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black -rotate-45 transform origin-bottom-right"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black rotate-45 transform origin-bottom-left"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black -rotate-45 transform origin-top-left"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black rotate-45 transform origin-top-right"></div>
</div>
You can also try using borders
tailwind playground
<!-- down -->
<div class="border-solid border-t-black border-t-8 border-x-transparent border-x-8 border-b-0"></div>
<!-- up -->
<div class="border-solid border-b-black border-b-8 border-x-transparent border-x-8 border-t-0"></div>
<!-- left -->
<div class="border-solid border-r-black border-r-8 border-y-transparent border-y-8 border-l-0"></div>
<!-- right -->
<div class="border-solid border-l-black border-l-8 border-y-transparent border-y-8 border-r-0"></div>
Maybe you want to use the triangle for tooltip. (such search got me here):
<div class="group relative mt-4 ml-4 inline-block">
<button type="button" class="rounded-md border border-neutral-600 px-1">...</button>
<!-- container for triangle and the menu ↓-->
<div class="invisible absolute left-0 -mt-[2px] flex flex-col group-focus-within:visible group-active:visible">
<div class="ml-2 -mb-[1px] inline-block overflow-hidden"> <!-- ← triangle container -->
<!-- triangle ↓ -->
<div class="h-3 w-3 origin-bottom-left rotate-45 transform border border-neutral-500 bg-neutral-100"></div>
</div>
<!-- menu ↓ -->
<div class="flex min-w-max flex-col rounded-md border border-neutral-500 bg-neutral-100 px-2 py-1">
<div class="cursor-pointer hover:underline">Do amazing stuff</div>
<div class="cursor-pointer hover:underline">Go back</div>
</div>
</div>
</div>
Demo on play.tailwindcss.com
Based on:
#temani-afif answer
https://github.com/tesar-tech/BlazorAndTailwind/blob/master/Articles/DropdownMenu/README.md
By pseudo-element (small triangle):
<script src="https://cdn.tailwindcss.com"></script>
<div>small triangle:</div>
<div class="flex gap-x-1">
<div class="before:content-['▴']"></div>
<div class="before:content-['▾']"></div>
<div class="before:content-['◂']"></div>
<div class="before:content-['▸']"></div>
</div>
By pseudo-element (normal triangle):
<script src="https://cdn.tailwindcss.com"></script>
<div>normal triangle:</div>
<div class="flex gap-x-1">
<div class="before:content-['▲']"></div>
<div class="before:content-['▼']"></div>
<div class="before:content-['◀']"></div>
<div class="before:content-['▶']"></div>
</div>
By border:
<script src="https://cdn.tailwindcss.com"></script>
<div>triangle by border</div>
<div class="flex gap-x-3">
<div class="w-0 h-0 border-8 border-solid border-transparent border-b-black"></div>
<div class="w-0 h-0 border-8 border-solid border-transparent border-t-black"></div>
<div class="w-0 h-0 border-8 border-solid border-transparent border-r-black"></div>
<div class="w-0 h-0 border-8 border-solid border-transparent border-l-black"></div>
</div>
By border (simplify):
<script src="https://cdn.tailwindcss.com"></script>
<div>triangle by border (simplify)</div>
<style type="text/tailwindcss">
#layer components { .triangle { #apply w-0 h-0 border-8 border-solid border-transparent } }
</style>
<div class="flex gap-x-3">
<div class="triangle border-b-black"></div>
<div class="triangle border-t-black"></div>
<div class="triangle border-r-black"></div>
<div class="triangle border-l-black"></div>
</div>
How can I make these two boxes (I'll have them more) to have same width as the widest one using tailwindcss only classes?
<head>
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet"/>
</head>
<body>
<div class="flex flex-wrap">
<div class="max-w-xs border">
<div class="flex flex-col items-center pt-6 pb-6 px-10">
<p class="font-bold text-xl mb-5">Company1</p>
<img class="h-16 mb-5" src="https://via.placeholder.com/150" />
<p class="mb-2 text-center font-bold">Junior Ruby on Rails Developer</p>
<p class="text-sm">11500 - 17750 (B2B)</p>
</div>
</div>
<div class="max-w-xs border">
<div class="flex flex-col items-center pt-6 pb-6 px-10">
<p class="font-bold text-xl mb-5">Company2</p>
<img class="h-16 mb-5" src="https://via.placeholder.com/150" />
<p class="mb-2 text-center font-bold">Ruby on Rails Developer</p>
<p class="text-sm">11500 - 17750 (B2B)</p>
</div>
</div>
</div>
</body>
<div class="flex flex-wrap">
<div class="max-w-xs border">
<div class="flex flex-col items-center pt-6 pb-6 px-10">
<p class="font-bold text-xl mb-5">Company1</p>
<img class="h-16 mb-5" src="https://via.placeholder.com/150" />
<p class="mb-2 text-center font-bold">Junior Ruby on Rails Developer</p>
<p class="text-sm">11500 - 17750 (B2B)</p>
</div>
</div>
<div class="max-w-xs border">
<div class="flex flex-col items-center pt-6 pb-6 px-10">
<p class="font-bold text-xl mb-5">Company2</p>
<img class="h-16 mb-5" src="https://via.placeholder.com/150" />
<p class="mb-2 text-center font-bold">Ruby on Rails Developer</p>
<p class="text-sm">11500 - 17750 (B2B)</p>
</div>
</div>
</div>
Add class flex-1 to your divs <div class="max-w-xs border">.
// git diff
- <div class="max-w-xs border">
+ <div class="max-w-xs border flex-1">