I am trying to create a semicircle with a tailwind but I can't seem to find another way but this one.
<div className="relative ">
<div className="bg-black h-36 w-36 rounded-full absolute top-[50px] left-[555px] "></div>
<div className="bg-white h-24 w-36 absolute top-[110px] left-[555px] "></div>
</div>
is there any better way u know cuz this feels a little off, I feel like there are other better ways to do it
There is a way to do so using rounded-tr and rounded-tl
here is what You need to do:
<script src="https://cdn.tailwindcss.com"></script>
<div class="relative flex justify-center items-center h-screen w-screen">
<div class="h-12 w-24 bg-indigo-500
rounded-tl-full rounded-tr-full "></div>
</div>
Related
I am trying to create a visual for my project where the image is placed in a rotated container (div), however when the container is rotated the image inside gets rotated to the same number of degrees as the container.
Does anyone know how can I have the image straight and covering the container while the container is rotated?
<template>
<div class="p-4">
<div class="w-80 h-80 bg-blue-500 rotate-90">
<div class="w-80 h-80 bg-red-500 rotate-45">
<img
class="h-full w-full object-cover object-center"
src="https://www.aerointernational.de/content/uploads/2022/09/albums-global-8000-exterior-1_0-scaled-1150x600.jpg"
fit="fill"
alt="aircraft"
/>
</div>
</div>
</div>
</template>
Please see image codesandbox to for a clearer depiction of the issue.
https://codesandbox.io/s/hardcore-microservice-vix2uh?file=/pages/index.vue
I am using Nuxt / Tailwind CSS.
This one is using clip path: https://play.tailwindcss.com/vPFMKkR9WS
Otherwise, you can also do something like this: https://play.tailwindcss.com/Mume9LHfhm
<div class="m-20">
<section class="relative pt-20 pl-8">
<div class="absolute h-64 w-64 rotate-45 rounded-3xl bg-blue-500"></div>
<img class="absolute h-64 w-64 -rotate-[38deg] rounded-3xl object-cover object-center" src="http://i.imgur.com/kreZqnx.jpg" fit="fill" alt="aircraft" />
</section>
</div>
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>
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 created a page layout with tailwind css with help of the flex utilities. Now i struggle with one issue.
On the right side there is a header section with title and description.
I want now that the description is never taking more than 100% of the width and automatically truncates the text if it has more.
I prepared a working example to demonstrate my problem:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex bg-blue-100 h-screen">
<div class="bg-green-100 w-16 flex-none">A</div>
<div class="bg-blue-100 w-96 flex-none">SB</div>
<div class="bg-red-100 flex-auto">
<div class="flex flex-col">
<div class="flex flex-col space-y-2 bg-pink-100 p-3">
<h1 class="bg-yellow-100">Title</h1>
<h2 class="bg-yellow-200 truncate">Description: the text of this title should automatically truncate but it should never use more than 100% of the parent element</h2>
</div>
<div class="bg-pink-200 p-3">...</div>
</div>
</div>
</div>
It would be super nice if someone could help my by solving this problem.
Many thanks in advance
Kai
Just add 'overflow-hidden' to your third column.
<div class="flex bg-blue-100 h-screen">
<div class="bg-green-100 w-16 flex-none">A</div>
<div class="bg-blue-100 w-96 flex-none">SB</div>
<div class="bg-red-100 flex-auto overflow-hidden">
<div class="flex flex-col">
<div class="flex flex-col space-y-2 bg-pink-100 p-3">
<h1 class="bg-yellow-100">Title</h1>
<h2 class="bg-yellow-200 truncate">Description: the text of this title should automatically truncate but it should never use more than 100% of the parent element</h2>
</div>
<div class="bg-pink-200 p-3">...</div>
</div>
</div>
</div>
I suggest you
use overflow-ellipsis together overflow-hidden, that will help you description is never taking more than 100% of the width, even help for responsive design on the tablet mode(768px) easily
<div class="flex flex-col space-y-2 bg-pink-100 p-3 ">
<h1 class="bg-yellow-100">Title</h1>
<h2 class="bg-yellow-200 overflow-clip overflow-hidden">Description: the text of this title should automatically truncate but it should never use more than 100% of the parent element</h2>
</div>
I hope helped you
I try to place photos with a grid so that they look like squares.
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet" />
<div class="container my-12 mx-auto">
<div class="flex flex-wrap -mx-2">
<div class="w-1/3 px-2 my-2">
<div class="bg-gray-400">
<img class="" src="https://lh3.googleusercontent.com/proxy/XTJmiQ_8JSKjnjQHij4OKDLe_achY1O7fUqOR2a-V27JZJxVBnNIfMcl5T_H0xeF7Jfd29u81QaofpZewSst1WhP40eCn-eh-KUjPfXczI162XUrWByvyR-qESrUoJshXQ" alt="">
</div>
</div>
<div class="w-1/3 px-2 my-2">
<div class="bg-gray-500">2</div>
</div>
<div class="w-1/3 px-2 my-2">
<div class="bg-gray-400">3</div>
</div>
<div class="w-1/3 px-2 my-2">
<div class="bg-gray-400">4</div>
</div>
<div class="w-1/3 px-2 my-2">
<div class="bg-gray-500">5</div>
</div>
<div class="w-1/3 px-2 my-2">
<div class="bg-gray-400">6</div>
</div>
</div>
</div>
How can I make images look like squares using tailwind? Yes, I can use object-fit: cover;, but I need to hard set width and height for this.
I just added custom style to the needed class:
width: 50vw;
height: 50vw;
Perhaps you could create a custom Tailwind class with those styles.
Something like this should work:
<ul class="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 w-screen h-screen">
<li class="col-span-1 flex flex-col text-center bg-white">
<div class="pb-full relative">
<div class="absolute inset-0 h-full w-full">
<img class="h-full w-full object-cover object-center" src="https://unsplash.it/400/400" />
</div>
</div>
</li>
</ul>
didn't fully test it in isolation, copied it from a codebase of mine...
You can either use the tailwind w-x and h-y utility classes to hard set widths and heights on the images, or if the x and y values you want don't exist, extend your tailwind config file to include them, then use those.
For heights that don't exist, just extend your config like this:
theme: {
// 👇 this makes Tailwind merge the configuration w/o overriding it.
extend: {
height: theme => ({
"screen/2": "50vh",
"screen/3": "calc(100vh / 3)",
"screen/4": "calc(100vh / 4)",
"screen/5": "calc(100vh / 5)",
}),
},
Or you can do the same thing with simple %'s
You can use any of the tailwind fixed or fluid width classes, in your comment you mention wanting responsive behaviour, so have a look at the fluid width utilities or extend them if you need something specific.
https://tailwindcss.com/docs/width/#fluid-width