I'm using Tailwind v2 because Tailwind v3 breaks with iphone 6.
But how to get big Image size in grid with Tailwind v2 https://test-responsive-site.netlify.app/tailwind/v2/ like in Tailwind v3 https://test-responsive-site.netlify.app/tailwind/v3/ :
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<link href='https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css' rel='stylesheet'>
</head>
<body>
<section class="px-3 py-5 bg-neutral-100 lg:py-10">
<div class="grid lg:grid-cols-2 items-center justify-items-center gap-5">
<div class="order-2 lg:order-1 flex flex-col justify-center items-center">
<p class="text-4xl font-bold md:text-7xl text-orange-600">25% OFF</p>
<p class="text-4xl font-bold md:text-7xl">SUMMER SALE</p>
<p class="mt-2 text-sm md:text-lg">For limited time only!</p>
</div>
<div class="order-1 lg:order-2">
<img src="https://images.unsplash.com/photo-1615397349754-cfa2066a298e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80" class="w-80 h-80 object-cover lg:w-[500px] lg:h-[500px]">
</div>
</div>
</section>
</body>
</html>
code is same in tailwind v3 just cdn changes:
<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>
<section class="px-3 py-5 bg-neutral-100 lg:py-10">
<div class="grid lg:grid-cols-2 items-center justify-items-center gap-5">
<div class="order-2 lg:order-1 flex flex-col justify-center items-center">
<p class="text-4xl font-bold md:text-7xl text-orange-600">25% OFF</p>
<p class="text-4xl font-bold md:text-7xl">SUMMER SALE</p>
<p class="mt-2 text-sm md:text-lg">For limited time only!</p>
</div>
<div class="order-1 lg:order-2">
<img src="https://images.unsplash.com/photo-1615397349754-cfa2066a298e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80" class="w-80 h-80 object-cover lg:w-[500px] lg:h-[500px]">
</div>
</div>
</section>
</body>
</html>
This is because in v3 according to the official docs they have added grid-flow-dense utility
Add grid-flow-dense utility (#8193)
This PR adds a missing utility for the gridAutoFlow plugin. .grid-flow-dense allows users to fill the gaps on a grid container without overwriting the current grid definition and forcing it to have only one row or column.
In summary
In Tailwind v3, the grid utility classes have been updated to include responsive breakpoints for controlling the grid columns, so you can use classes like lg:grid-cols-2 to set the number of columns for a specific breakpoint.
In Tailwind v2, the grid classes do not include responsive breakpoints, so you will need to use other utility classes to achieve a similar effect.
Unfortunately, presently you can't achieve the functionality you desired using v2, You may have to consider switching to use flex instead of grid to get the similar functionality.
Related
This is the effect I'm trying to reproduce. The button is aligned on the right on the same level as the text. This is the result I want Goal
This is where I am image.
I tried using the grid but that ends up aligning the button with the div containing the text. The text has no padding.
Here's my code
<!doctype html>
<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="container grid grid-cols-2 gap-32 h-screen">
<div class="border-solid border-red-600 border-2">
<div class="">
<h1 class="font-['Poppins'] font-bold text-5xl ml-0 leading-snug border-2 border-solid pr-0 inline-block">
Appliying for an internship has never been easier!
</h1>
</div>
<div class="justify-end flex">
<a class="btnn py-2 px-4 rounded-md inline-block" href="/blog">
Get Started!</a
>
</div>
</div>
<div
class="border-2 border-solid border-red-500 grid grid-cols-2 gap-4"
>
</div>
</body>
</html>
Hi #krankos
If you want the result as it's show in your Goal image Which you provided above. Then you could try that code which is in snippet. And also there are a lot of examples relate to that How to do that kind of things. Like at one:- Build websites faster with Tailwind CSS
<!doctype html>
<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="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Applying for an internship has never been easier!</h5>
</a>
<div class="grid justify-end">
<a href="#" class="flex mr-auto px-3 py-2 text-sm font-medium text-center text-white bg-green-500 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Get started!
</a>
</div>
</div>
</body>
</html>
How do you center a button in tailwind in a div?
I have tried:
justify-center
items-center
mx-auto
content-center
in all cases, the button is stuck on the left hand side.
The h2 and p center no problem.
<div class="container py-10 px-10 mx-0 min-w-full" className="contactdiv">
<h2 class="text-5xl text-white text-center">Contact Us</h2>
<br />
<p class="text-center text-white">Kickstart your career in BioPharma with the Mendeleev Institute right now</p>
<button class="bg-purple-900 text-white hover:bg-blue-400 font-bold py-2 px-4 mt-3 rounded items-center">Learn More</button>
</div>
I suggest to use flex flex-col items-center on the container to center children across the y axis.
<div class="container py-10 px-10 mx-0 min-w-full flex flex-col items-center">
<h2 class="text-5xl mb-3 text-black">Contact Us</h2>
<p class="text-black">Kickstart your career in BioPharma with the Mendeleev Institute right now</p>
<button class="bg-purple-900 text-white hover:bg-blue-400 font-bold py-2 px-4 mt-3 rounded">Learn More</button>
</div>
Here is the result on Tailwind Play
I used css grid on my solution. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-10 px-10 mx-0 min-w-full grid place-items-center" className="contactdiv">
<h2 class="text-5xl text-black text-center">Contact Us</h2>
<br />
<p class="text-center text-black">Kickstart your career in BioPharma with the Mendeleev Institute right now</p>
<button class="bg-purple-900 text-white hover:bg-blue-400 font-bold py-2 px-4 mt-3 rounded items-center">Learn More</button>
</div>
</body>
</html>
Correction - Having encountered this problem multiple times - NONE of the solutions posted work.
Adding flex, flex-col and items-center to the parent component does nothing.
The only thing that works is to wrap the button in tags, only then does the button centre.
Wrap the button in a flex container and justify content to the center. Since the button is the only element in its container
<div class="container py-10 px-10 mx-0 min-w-full">
<h2 class="text-5xl text-white text-center">Contact Us</h2>
<br />
<p class="text-center text-white">Kickstart your career in BioPharma with the Mendeleev Institute right now</p>
<div class="flex justify-center">
<button class="bg-purple-900 text-white hover:bg-blue-400 font-bold py-2 px-4 mt-3 rounded items-center">Learn More</button>
</div>
</div>
Just use flex flex-col items-center justify-center in the parent div.
<div class="authButtons basis-1/4 border-4 flex flex-col items-center justify-center">
<button class="font-fa text-3xl border-2">Hey!</button>
</div>
You can check it out in this tailwind demo.
How can I add these two lines using Bootstrap? I'm trying to make a header like this . A TITLE having two blank borders in both sides in top and bottom. Is it possible to make with Bootstrap? I'm a noob lol.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<hr class="bg-danger border-2 border-top border-danger">
<div class="h1">HEADER</div>
<hr class="bg-danger border-2 border-bottom border-danger">
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
<div class="flex-fill border-top border-2 border-danger h1"></div>
<div class="h1 text-center">HEADER</div>
<div class="flex-fill border-bottom border-2 border-danger h1"></div>
</div>
the flex display option allows for the automatic alignment to the right and left of the text using flex-grow: 1 on the child-elements. Using this on 2 elements surrounding a third also centers this third one. You may specify a width on one of the growing ones to get an offset header.
Note that bootstraps 'row' class also uses display: flex.
Move the border by applying margin-tops as per usual in to fine-tune their vertical alignment. Preserve the same height of the elements for aligned borders (e.g. use h1 on both to apply the same height).
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
<div class="flex-fill border-top border-2 border-danger h1"></div>
<div class="h1">HEADER</div>
<div class="flex-fill border-bottom border-2 border-danger h1"></div>
</div>
You can get close using flex layout and margins. Some tweaking may be needed due to the line height of the heading element.
body {
padding: 30px;
}
.h1.lh-min {
line-height: 24px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="d-flex">
<hr class="bg-danger border-2 border-top border-danger flex-grow-1 align-self-start m-0 mt-1">
<div class="h1 lh-min m-0">HEADER</div>
<hr class="bg-danger border-2 border-bottom border-danger flex-grow-1 align-self-end m-0">
</div>
I have used a h1 between 2 span tags and sized h1 to 3 of 12
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<span class="col border-top border-5 border-dark"></span>
<h1 class="col-3 text-center">HEADER</h1>
<span class="col border-bottom border-5 border-dark"></span>
</div>
I use tailwindCSS and confront a problem with make footer.
base.html
<body>
{% include "partials/nav.html" %}
{% block content %}
{% endblock %}
{% include "partials/footer.html" %}
</body>
footer.html
<footer class="w-full h-64 bg-gray-900 static bottom-0">
{% load static %}
<img src="{% static "images/logo_white.png" %}" width="70px"> <p class="text-white"> ©~~~~~~</p>
</footer>
i tried static,absolute,fixed,relative... but .fixed cover the content block and relative make footer going upside. or .mb-0, .bottom-0 doesn't work.
is it possible make footer fixed on the bottom?
<div class="flex flex-col h-screen justify-between">
<header class="h-10 bg-red-500">Header</header>
<main class="mb-auto h-10 bg-green-500">Content</main>
<footer class="h-10 bg-blue-500">Footer</footer>
</div>
Class justify-between is not required, but I would leave him (for other case).
So, play with h-screen and mb-auto classes.
And you get this UI:
Another approach would be using flex-grow.
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-col h-screen">
<div class="bg-red-500">header</div>
<div class="bg-green-500 flex-grow">content</div>
<div class="bg-blue-500">footer</div>
</div>
use 'fixed' instead of 'static'
class="fixed bottom-0"
New solution in 2022. Tailwindcss version 3.0.24 in codepen demo.
<div class="min-h-screen">
<div>Content</div>
<div class="sticky top-[100vh]">Footer</div>
</div>
codepen demo
Another way that was recently discovered by SÃlvio Rosa uses position: sticky + top: 100vh on the footer. The way to achieve this with TailWindCSS is...
<html class="min-h-screen">
<body class="min-h-screen">
<header>Header</header>
<main>Content</main>
<footer class="sticky top-[100vh]">footer</footer>
</body>
</html>
You can read the full article on CSS Tricks here
A solution without using margin:
.as-console-wrapper {
display: none !important; /* just to hide stackoverflow console warning */
}
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-col min-h-screen">
<header class="bg-yellow-600">content</header>
<div class="bg-blue-600">content</div>
<div class="flex-1"></div> <!-- here -->
<footer class="bg-red-400">footer</footer>
</div>
Another so clever solution is using sticky top-[100vh] for footer. by Chris Coyier
.as-console-wrapper {
display: none !important; /* just to hide stackoverflow console warning */
}
<script src="https://cdn.tailwindcss.com"></script>
<div class="min-h-screen">
<header class="bg-yellow-600">content</header>
<div class="bg-blue-600">content</div>
<footer class="bg-red-400 sticky top-[100vh]">footer</footer>
</div>
None of the solutions here worked for me since my component wasn't a layout component. I wanted a sticky footer to appear on just a single page and it needed to ignore the margins and padding of parent containers. Here's the tailwind solution that worked for me:
<div className="fixed bottom-0 left-0 bg-red-500 w-screen h-12">
Sticks to bottom, covers width of screen
</div>
This has been a major pain for me recently. I ended up solving this without flex, I simply gave my body a min-height of 75vh and it seems to have produced the desired result.
I'm using this:
<div class="min-h-screen flex flex-col justify-start">
<div>your main content</div>
<footer class="mt-auto">
<div>your footer content</div>
</footer>
</div>
The best answer that I have seen was to set container, containing the footer, to screen height ('min-h-screen') and make it a flexbox ('flex') and set the element above the footer to flex-1 so that it would consume all the spaces and push the footer below.
In your code, it would look like these:
<body class='flex flex-col min-h-screen'>
{% include "partials/nav.html" %}
<div class='flex-1'>
{% block content %}
{% endblock %}
</div>
{% include "partials/footer.html" %}
</body>
Here's a sample code for my use-case:
<div className='flex flex-col min-h-screen'>
<div className='flex-1 mx-24 mt-12'>
<Header />
<div className='grid grid-cols-4 gap-12 my-12'>
{data.map( (item, i) => <Todo key={i} title={item.title} note={item.note} texts={item.texts}/>)}
</div>
</div>
<Footer />
</div>
Use the h-[100vmin] custom class on the first div inside your layout component, typically as follows:
<Layout>
<div class="container">
<div class="h-[100vmin]">
...
</div>
</div>
</Layout>
<footer class="absolute bottom-0 w-full px-6 py-6 text-white bg-emerald-500">
I think you can just use absolute bottom-0 to locate it, w-full to fill the width, and px and py to size your footer .
<div class='relative'>
<div class='fixed bottom-0 right-10 cursor-pointer rounded-t-3xl bg-red-500 w-10 h-10 grid content-center justify-center'>
your text
</div>
</div>
In my app I've a model. I'm using opacity on a model.
The problem that I have now is that the body of the model
should not have opacity how could I fix this? Only outside the model
should have opacity!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="flex flex-col bg-red min-h-screen">
<div class="fixed w-full h-full bg-blue opacity-50 flex items-center justify-center flex-col">
<div class="bg-black p-16">
<p class="text-white">Model body</p>
</div>
</div>
</div>
</body>
</html>
I know it's been almost three years, and I'm not sure if this is what you want in your situation. But using bg-opacity-{n} instead of opacity-{n} did the trick for me.
I wanted to display an overlay element with kind of blackish background, but the overlay element itself should have 100% opacity.
Example code:
<div className="p-20 border-4 border-black fixed top-0 left-0 bottom-0 right-0 w-full h-screen bg-black bg-opacity-75">
<div className="bg-white bg-opacity-100">
Sample Text
</div>
</div>
Posting this in case anyone else needs a solution like this.
TL;DR - use bg-opacity-75 in parent div, and bg-opacity-100 in child div. Using opacity-75 and opacity-100 doesn't work for some reason.
Checkout 'Changing the opacity' for background color with Tailwind:
https://tailwindcss.com/docs/background-color#changing-the-opacity
For example in this example 'bg-sky-500' will have an opacity of 50:
<button class="bg-sky-500/50 ..."></button>
You could add .opacity-100 to the nested div.
Check the Official Tailwind Documentation about Opacity for further details.
When you apply opacity to a container, all its content and children will inherit
the opacity.
You can see this question on Stackoverflow:
Allow opacity on container but not child elements
The solution is to apply opacity value to background-color. In tailwind you
can do it with bg-blue-{opacity} like bg-blue-100
You need to play around with relative/absolute, opacity and z-index
Here's a jsfiddle working example.
new Vue({
el: "#app",
data: function () {
return {
modalOpen: false
}
}
})
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="relative">
<div class="h-screen w-full p-4">
<span class="rounded p-2 bg-gray-200 cursor-pointer" #click="modalOpen = true;">
Open Modal
</span>
</div>
<div v-if="modalOpen" class="absolute bg-black opacity-25 inset-0 z-10" #click="modalOpen = false;"></div>
<div class="absolute inset-0 flex justify-center items-center" v-if="modalOpen">
<div class="bg-white p-8 z-20">
Modal
</div>
</div>
</div>
Assigning bg-opacity-40 to the outer div solved it for me