I am originally doing it and having my perfect result:
<div id="card-link" class="md:shrink-0 md:basis-0 md:grow">
<div id="card" class="flex flex-col border-2 border-gray-200 rounded-xl p-6 my-2 mx-2" style="height: 27rem">
</div>
</div>
<style>
#card-link {
min-width: 320px;
max-width: 400px;
}
#media only screen and (min-width: 768px) {
#card-link {
min-width: 384px;
}
}
</style>
However, I need to refactor it to tailwind, but when I try the code below, it not works:
<div id="card-link" class="md:shrink-0 md:basis-0 md:grow min-w-[320px] md:max-w-[400px] min-w-[380px]">
<div id="card" class="flex flex-col border-2 border-gray-200 rounded-xl p-6 my-2 mx-2" style="height: 27rem">
</div>
</div>
Related
I want to have a flexbox layout where three columns have the same width.
I have to use Tailwind in this case, but it doesn't change the CSS theory... which, as far as I know, says I need to give the three columns the same basis, and then let them grow freely (all of them will grow the same proportion because they have the same basis).
But it's not working. One of the column gets bigger and I don't know why.
Note: I added a border just to make it visually clear, but I don't need that.
.just-a-border {
border: 2px dotted purple;
}
<link href="https://unpkg.com/tailwindcss#2.2.19/dist/tailwind.min.css" rel="stylesheet" />
<div class="grow flex flex-nowrap items-center gap-5 justify-center py-12 flex-row">
<div class="just-a-border h-full p-6 text-center basis-1 grow">
<div class="mb-2 text-sm font-medium uppercase">I want to have more words</div>
<div class="font-medium">6 hours</div>
</div>
<div class="just-a-border h-full p-6 text-center basis-1 grow">
<div class="mb-2 text-sm font-medium uppercase">Yes</div>
<div class="font-medium">1 hour</div>
</div>
<div class="just-a-border h-full p-6 text-center basis-1 grow">
<div class="mb-2 text-sm font-medium uppercase">No</div>
<div class="font-medium">3 hours</div>
</div>
</div>
Any idea to make it work?
You used the classes from Tailwind CSS v3. So, if you upgrade your Tailwind CSS version to v3, your codes will be just working good.
If you want to keep the current version which is v2, you just need to update a few of class names in your current codes like below. basis-1 to flex-1, grow to flex-grow
<style>
.just-a-border {
border: 2px dotted purple;
}
</style>
<div class="flex flex-row flex-nowrap items-center gap-5 justify-center py-12">
<div class="just-a-border h-full p-6 text-center flex-1 flex-grow">
<div class="mb-2 text-sm font-medium uppercase">I want to have more words</div>
<div class="font-medium">6 hours</div>
</div>
<div class="just-a-border h-full p-6 text-center flex-1 flex-grow">
<div class="mb-2 text-sm font-medium uppercase">Yes</div>
<div class="font-medium">1 hour</div>
</div>
<div class="just-a-border h-full p-6 text-center flex-1 flex-grow">
<div class="mb-2 text-sm font-medium uppercase">No</div>
<div class="font-medium">3 hours</div>
</div>
</div>
It appears you are using Tailwind classes from version 3 while you are using version 2.2.19.
I added the following classes to your css and it now gives even columns.
.grow {
flex-grow: 1;
}
.basis-1 {
flex-basis: 0.25rem;
}
Also see the Play demo which uses your code, unchanged, and works as you would have expected.
https://play.tailwindcss.com/VjbHZcTiVH
.just-a-border {
border: 2px dotted purple;
}
.grow {
flex-grow: 1;
}
.basis-1 {
flex-basis: 0.25rem;
}
<link href="https://unpkg.com/tailwindcss#2.2.19/dist/tailwind.min.css" rel="stylesheet" />
<div class="grow flex flex-nowrap items-center gap-5 justify-center py-12 flex-row">
<div class="just-a-border h-full p-6 text-center basis-1 grow">
<div class="mb-2 text-sm font-medium uppercase">I want to have more words</div>
<div class="font-medium">6 hours</div>
</div>
<div class="just-a-border h-full p-6 text-center basis-1 grow">
<div class="mb-2 text-sm font-medium uppercase">Yes</div>
<div class="font-medium">1 hour</div>
</div>
<div class="just-a-border h-full p-6 text-center basis-1 grow">
<div class="mb-2 text-sm font-medium uppercase">No</div>
<div class="font-medium">3 hours</div>
</div>
</div>
You can use grid for that, instead of flex. Defining the number of columns with grid-cols-3 will create three columns of equal width and height.
See playground example and tailwind docs.
<div class="grid w-full grid-cols-3 flex-row justify-center gap-5 py-12">
<div class="rounded-lg border border-slate-300 p-6 text-center">
<div class="mb-2 text-sm font-medium uppercase">I want to have more words</div>
<div class="font-medium">6 hours</div>
</div>
<div class="rounded-lg border border-slate-300 p-6 text-center">
<div class="mb-2 text-sm font-medium uppercase">Yes</div>
<div class="font-medium">1 hour</div>
</div>
<div class="rounded-lg border border-slate-300 p-6 text-center">
<div class="mb-2 text-sm font-medium uppercase">No</div>
<div class="font-medium">3 hours</div>
</div>
</div>
I am using a react-to-print library to print some reports that are dynamic. The problem is I need a fixed footer on every page while printing and I have a fixed footer which overlaps the content before going to new page . I know how position:fixed works and would have solved if reports weren't dynamic. What can be the possible fix here?
My PrintingComponenet is
<div className="page-footer">
<hr />
<p className="pt-1">For screening purposes only. Not for use in diagnostic procedures</p>
<div className="flex w-full items-center justify-between">
<div>
Printed By ( <span className="text-primary-700">{!isServer && window.location.hostname}</span>{" "}
) on {moment(new Date()).format("MMM Do YYYY, h:mm:ss A")}
</div>
<span>{member.member_code}</span>
</div>
</div>
<div className="w-full">
{Object.keys(test).map((el, index) => (
<div key={el}>
<div style={{ height: "100px" }} />
<div className=" bg-gray-700 mt-4 px-3 capitalize py-4 text-xl text-white font-medium space-y-2 whitespace-nowrap">
{el} Test Report
</div>
{el === "Body Mass Index" ? (
<>
<div className="flex mt-3 border-b pb-3">
<div className="text-gray-600 flex-1 text-2xl">Test Date</div>
<div className="text-gray-600 flex-1 text-2xl">Temperature</div>
<div className="text-gray-600 flex-1 text-2xl">Test Result</div>
</div>
{test[el].map((el: any, index: number) => (
<div key={el.test_date} className="flex mt-4 border-b pb-2 last:border-0 ">
<div className=" flex-1 text-xl">
<span className="block">{moment(utcDateToLocal(el.test_date)).format("MM/DD/YYYY")}</span>
<span className="block">{moment(utcDateToLocal(el.test_date)).format("h:mm A")}</span>
</div>
<div className=" flex-1 text-xl">
{el.temperature} {el.temperature && <>° F</>}{" "}
</div>
<div className=" flex-1 text-xl ">Test</div>
</div>
))}
</>
) : (
<>
<div className="flex mt-3 border-b pb-3">
<div className="text-gray-600 flex-1 text-2xl">Test Date</div>
<div className="text-gray-600 flex-1 text-2xl ">Test Result</div>
</div>
{test[el].map((el: any, index: number) => (
<div key={el.test_date} className="flex mt-4 border-b pb-2 last:border-0 ">
<div className=" flex-1 text-xl">
<span className="block">{moment(utcDateToLocal(el.test_date)).format("MM/DD/YYYY")}</span>
<span className="block">{moment(utcDateToLocal(el.test_date)).format("h:mm A")}</span>
</div>
<div className=" flex-1 text-xl ">
<div>Test Result</div>
<div>Test Result</div>
<div>Test Result</div>
<div>Test Result</div>
<div>Test Result</div>
</div>
</div>
))}
</>
)}
</div>
CSS for footer is
.page-footer {
height: 30px;
position: fixed;
bottom: 0;
width: 100%;
}
#media print {
.page-footer {
page-break-after: always;
}
}
I need to align the image and the Orange and fruit on the center.
How will I do it the proper and correct way. It needs to align together with others.
Check my playground here CLICK HERE
expected output
<div class="bg-black overflow-auto h-screen pb-24 px-4 md:px-6">
<div class="flex flex-col w-full p-12">
<div class="flex flex-col w-full text-center items-center">
<div class="btc">
<button class="btn btn-back">Back</button>
<div class="flex gap-4">
<img src="https://picsum.photos/200/300" class="w-12 h-12" />
<div class="text-left text-white">
<p class="font-bold">Orange</p>
<p class="text-grey">fruit</p>
</div>
</div>
</div>
<h1 class="text-4xl text-white mb-5">
<span class="text-sm font-bold">Food</span>
</h1>
<div class="flex flex-row mt-8 gap-4">
<button class="btn btn-primary">Send Food</button>
<button class="btn btn-yellow">Receive Food</button>
</div>
<div class="flex flex-row mt-8 mb-16">
<button class="btn btn-change flex justify-center items-center">
<span class="w-5 h-5 bg-blue-button-bg rounded-full mr-2"></span>
<span>Change Food</span>
</button>
</div>
</div>
</div>
</div>
.btc {
#apply w-full mb-16;
display: grid;
grid-gap: 1rem;
grid-template-columns: auto;
justify-content: center;
position: relative;
}
.btn {
#apply text-white text-sm bg-transparent font-normal rounded-full border-2 h-10 w-52;
}
.btn-back {
#apply border-green-500 w-24;
}
.btn-primary {
#apply border-red-700;
}
.btn-yellow {
#apply border-yellow-300;
}
.btn-change {
#apply bg-blue-300 border-0 font-bold;
}
.btn-class {
position: absolute;
left: 0;
top: 0;
}
<div class="bg-black overflow-auto h-screen pb-24 px-4 md:px-6">
<div class="flex flex-col w-full p-12">
<div class="flex flex-col w-full text-center items-center">
<div class="btc">
<button class="btn btn-back btn-class">Back</button>
<div class="flex gap-4 new-div-class">
<img src="https://picsum.photos/200/300" class="w-12 h-12" />
<div class="text-left text-white">
<p class="font-bold">Orange</p>
<p class="text-grey">fruit</p>
</div>
</div>
</div>
<h1 class="text-4xl text-white mb-5">
<span class="text-sm font-bold">Food</span>
</h1>
<div class="flex flex-row mt-8 gap-4">
<button class="btn btn-primary">Send Food</button>
<button class="btn btn-yellow">Receive Food</button>
</div>
<div class="flex flex-row mt-8 mb-16">
<button class="btn btn-change flex justify-center items-center">
<span class="w-5 h-5 bg-blue-button-bg rounded-full mr-2"></span>
<span>Change Food</span>
</button>
</div>
</div>
</div>
</div>
I have edited your play. Here is the new link https://play.tailwindcss.com/qrDlxDYWW3
I am beginner webdeveloper.
I have small problem with Tailwind CSS. I need this: https://ibb.co/KL8cDR2
This is my code:
<div class="w-1/2 h-10 rounded-full bg-gray-400" style="background-color:red">404</div>
but it's not working :( How can I make it?
Please help me
<div class="font-bold text-gray-700 rounded-full bg-white flex items-center justify-center font-mono" style="height: 500px; width: 500px; font-size: 170px;">404</div>
This should do the job. Make sure to add a custom class which defines height and width of the circle as well as the font-size and remove font-mono from classes and add your wanted font.
The position absolute way:
<div class="rounded-full border-2 flex p-3 relative">
<div class="absolute top-5 left-8">
4
</div>
</div>
In tailwind.config.js extend inset
theme: {
inset: {
'5': '5px',
'8': '8px'
}
}
The flex way:
<div class="w-20 h-20 rounded-full flex justify-center items-center">
<p>404</p>
</div>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="w-20 h-20 rounded-full border-2 border-black flex justify-center items-center">
<p>404</p>
</div>
</body>
</html>
you can use width and height in this way by pixel or something
<div class="w-[200px] h-[200px] bg-red rounded-full flex
justify-center items-center">
<p>404</p>
</div>
Use rounded class with different options.
<div class="flex">
<div class="m-3 flex h-20 w-20 items-center justify-center rounded-full bg-blue-600">
<p>Circle</p>
</div>
<div class="m-3 flex h-20 w-20 items-center justify-center rounded-md bg-blue-600 text-center">
<p>Rounded Square</p>
</div>
</div>
Output:
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.4/tailwind.min.css" rel="stylesheet" />
<header class="bg-red p-5 flex border-b-2 border-white border-b-4">
<h1 class="font-display text-white text-md tracking-tight font-medium uppercase">local app</h1>
<div id="profile">
<img class="h-16 w-16 rounded-full mb-2 border-white border-4" src="{{ asset('assets/images/avatar.jpg') }}" alt="">
</div>
</header>
I want to put that avatar on the right beside “APP” on the farthest right, but I can't seem to make it work.
You can use absolute position on the image container and set right to 1rem or similar. The right attribute controls how far from the right the element should be placed. (But there are many other ways to do this)
header {
position: relative;
}
#profile {
position: absolute;
right: 1rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.4/tailwind.min.css" rel="stylesheet" />
<header class="bg-red p-5 flex border-b-2 border-white border-b-4">
<h1 class="font-display text-white text-md tracking-tight font-medium uppercase">local app</h1>
<div id="profile">
<img class="h-16 w-16 rounded-full mb-2 border-white border-4" src="{{ asset('assets/images/avatar.jpg') }}" alt="">
</div>
</header>
Try to use margin-left:auto; margin-right:0; on <div id="profile">
#profile{
margin-left: auto;
margin-right: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.4/tailwind.min.css" rel="stylesheet" />
<header class="bg-red p-5 flex border-b-2 border-white border-b-4">
<h1 class="font-display text-white text-md tracking-tight font-medium uppercase">local app</h1>
<div id="profile">
<img class="h-16 w-16 rounded-full mb-2 border-white border-4" src="{{ asset('assets/images/avatar.jpg') }}" alt="">
</div>
</header>