styles that need to be implemented
As shown,How to use tailwindcss to achieve the following styles?Many thanks
The styles I implemented are as follows
The styles I implemented, are not correct
<div class="p-4 bg-white shadow flex flex-wrap divide-x divide-y">
<div class="p-4 text-center w-1/3">1</div>
<div class="p-4 text-center w-1/3">1</div>
<div class="p-4 text-center w-1/3">1</div>
<div class="p-4 text-center w-1/3">1</div>
<div class="p-4 text-center w-1/3">1</div>
</div>
Instead of using flex box, you might be better off using CSS grid instead via the grid class. You can then use gap-px to specify a 1px gap between all your grid cells.
To have the colors 1px border, it is just a matter of setting the background color on the parent grid element, e.g. using the bg-gray-200 class.
To get the border radius, you can use rounded-lg. Use overflow-hidden to ensure children elements are properly clipped.
See proof-of-concept below:
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" />
<!-- Top level div only for display purposes -->
<div class="w-screen h-screen grid place-items-center">
<div class="shadow-xl grid grid-cols-3 gap-px bg-gray-200 rounded-lg overflow-hidden">
<div class="px-16 py-8 bg-white text-center">1</div>
<div class="px-16 py-8 bg-white text-center">2</div>
<div class="px-16 py-8 bg-white text-center">3</div>
<div class="px-16 py-8 bg-white text-center">4</div>
<div class="px-16 py-8 bg-white text-center">5</div>
<div class="px-16 py-8 bg-white text-center">6</div>
</div>
</div>
Related
I'm building a laravel/tailwind dashboard but I'm now facing an issue with the overflow of an element.
The design I want to achieve is the follwing :
And what i achieved until now is the following:
With this code structure :
<body>
<div id="app" class="max-h-screen flex flex-col">
<nav class="bg-white border-gray-200 flex flex-wrap h-fit justify-between shadow items-center p-0 m-0">
</nav>
<div class="flex max-h-full grid grid-cols-8">
<aside class="h-full flex col-span-1" aria-label="Sidebar" id="sidebar">
</aside>
<div class="w-full bg-gray-100 p-5 col-span-7 flex-1 m-0">
</div>
</div>
</div>
</body>
The issue
I would like to have only the body as scrollable ans keep the sidebar and the navbar in the same fixed position they are at any time.
Unfortunately, when i add the overflow-y-auto class to the div where the body is, the overflow is applied to the whole window breaking the design.
Do you have any suggestion on how i can make only the body scrollable with the above code base?
Thank you
Method 1: using fixed classes
Idea : make the nav and aside elements fixed
<body>
<div id="app" class="h-screen flex flex-col">
<nav class="bg-white border-gray-200 flex flex-wrap h-fit justify-between shadow items-center p-0 m-0 w-full fixed top-0 left-0 z-10">
</nav>
<aside class="h-screen fixed top-0 left-0 w-60 flex col-span-1" aria-label="Sidebar" id="sidebar">
</aside>
<div class="w-4/5 ml-auto bg-gray-100 p-5 col-span-7 flex-1 overflow-y">
</div>
</div>
</body>
Method 2: using sticky class
<body>
<div id="app" class="max-h-screen flex flex-col">
<nav class="bg-white border-gray-200 flex flex-wrap h-fit justify-between shadow items-center p-0 m-0 w-full fixed top-0 left-0 z-10">
</nav>
<div class="flex max-h-full grid grid-cols-8 relative h-screen overflow-hidden">
<aside class="h-screen flex col-span-1 sticky top-0" aria-label="Sidebar" id="sidebar">
</aside>
<div class="w-full overflow-auto bg-gray-100 p-5 col-span-7 flex-1 m-0">
</div>
</div>
</div>
</body>
You might have to experiment with the div widths as I am just roughly eyeballing the values with w-4/5 and w-60 classes.
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 am trying to show text under image for responsive design.
right now it is showing behind icon. how i can show text below icon.
CODE
<link
rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<div class="flex flex-wrap mt-4 border-2 border-gray-500 p-8 m-auto w-1/4 items-center justify-center">
<div class=" absolute fas fa-book-reader text-6xl text-gray-600"></div>
<div class=" text-base"> Caring Enviroment</div>
</div>
You need to remove absolute class
<link
rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<div class="flex flex-wrap mt-4 border-2 border-gray-500 p-8 m-auto w-1/4 items-center justify-center">
<div class="fas fa-book-reader text-6xl text-gray-600"></div>
<div class=" text-base text-center"> Caring Enviroment</div>
</div>
Remove absolute or relpace absulte with relative. On this way you can position (top-10 etc.) the box if you want.
https://play.tailwindcss.com/TU6xLsUjj4
I'm trying to vertically center the div with a white border onto the div with a green background. Colors just for show. I cannot figure out why justify-center and items-center do not work. I know I can use margin to achieve what I want but I know there's a better way. I have tried referencing this SO post but have had no luck:Reference Post
Also, if there is a better solution to implement what I want I'm all ears.
My code:
<div class="flex flex-col min-h-screen bg-coolGray-900">
<div class="w-screen justify-center items-center h-screen bg-green-500 ">
<div class="text-center text-white border-2 ">
<h1 class="mb-10 text-6xl font-bold font-lato">Message Here</h1>
<h2 class="mb-8 text-2xl font-semibold font-lato">More Detailed Message Here</h2>
<button class="mx-auto btn btn-learn">Learn More</button>
</div>
</div>
</div>
You haven't displayed your container class as flex, this is why your justifies aren't working.
Add the class flex to your bg-green-500 class.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<section>
<div class="flex flex-col min-h-screen bg-coolGray-900">
<div class="flex w-screen justify-center items-center h-screen bg-green-500 ">
<div class="text-center text-white border-2 w-screen">
<h1 class="mb-10 text-6xl font-bold font-lato">Message Here</h1>
<h2 class="mb-8 text-2xl font-semibold font-lato">More Detailed Message Here</h2>
<button class="mx-auto btn btn-learn">Learn More</button>
</div>
</div>
</div>
</section>
I am using tailwind in my Vuejs app. I have this simple template
<template>
<div class="bg-gray-500 h-screen">
<Header /><!-- //height 32 -->
<div class="w-2/3 mx-auto p-4 text-lg bg-white h-full shadow-lg">
<router-view />
</div>
</div>
</template>
The div with h-screen is the root or my app. The component<header> has a tailwind height of h-32
The problem is that the second div causes the page to scroll at the bottom, the height of the <header> (h-32).
What I want to do
If there is no content, I want the second div to fill the remaining height of the screen but no more.
If there is content, I want it grow as necessary.
You can leverage .flex, .flex-col and .flex-1 for this. Check out docs.
<div class="bg-gray-500 flex flex-col h-screen">
<div class="flex h-32 bg-gray-200"></div>
<div class="flex-1 w-2/3 mx-auto p-4 text-lg bg-white h-full shadow-lg bg-gray-300">
<router-view />
</div>
</div>
Usage of flex-1 is optimal for your solution to expand a certain component in the parent:
Use flex-1 to allow a flex item to grow and shrink as needed, ignoring its initial size:
Vertically
<div class="flex h-screen flex-col">
<div class="h-50 bg-cyan-400 text-center text-4xl">Header</div>
<div class="flex-1 bg-yellow-400 text-center text-4xl">I am the body</div>
</div>
Output:
Horizontally
<div class="flex w-screen ">
<div class="h-50 bg-cyan-400 text-center text-4xl">NavBar</div>
<div class="flex-1 bg-yellow-400 text-center text-4xl">I am the body</div>
</div>
Output: