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:
Related
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.
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 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>
How can I vertically align a div with Tailwind?
What I want:
-----------------------------------
| |
| |
| |
| item1 |
| item2 |
| |
| |
| |
-----------------------------------
What I currently have:
-----------------------------------
| item1 |
| item2 |
| |
| |
| |
| |
| |
| |
-----------------------------------
HTML
<div class="flex flex-col h-screen my-auto items-center bgimg bg-cover">
<h3 class="text-white">heading</h3>
<button class="mt-2 bg-white text-black font-bold py-1 px-8 rounded m-2">
call to action
</button>
</div>
CSS
.bgimg {
background-image: url('https://d1ia71hq4oe7pn.cloudfront.net/photo/60021841-480px.jpg');
}
I have successfully centered on the secondary axis (left-right) with class items-center. Reading the documentation, I tried align-middle but it does not work. I have confirmed the divs have full height and my-auto.
I'm using this version of Tailwind: https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css
Here is a JSFiddle: https://jsfiddle.net/7xnghf1m/2/
You can also do
<div class="flex h-screen">
<div class="m-auto">
<h3>title</h3>
<button>button</button>
</div>
</div>
Partly referencing #mythicalcoder 's solution but using only the necessary classes provided by TailwindCss (Version 1.8.+):
flex : To use a flex-div as container
h-screen : To size the container-height to the viewport height.
justify-center : To justify center (horizontal center) - main axis - Doc
items-center : To align the items to center (horizontal center) - cross axis - Doc
My Solution to center two text lines:
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex h-screen justify-center items-center">
<div class="text-center bg-blue-400"> <!-- ⬅️ THIS DIV WILL BE CENTERED -->
<h1 class="text-3xl">HEADING</h1>
<p class="text-xl">Sub text</p>
</div>
</div>
Justify-Center and Items-Center
While Anders' answer solves the problem for this particular case, I think it's important to note that using justify-center and items-center is circumstantial.
Let's have a look at one of the examples from the tailwind documentation.
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex justify-center bg-gray-100">
<div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">1</div>
<div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">2</div>
<div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">3</div>
</div>
As we can see the above code centers the elements horizontally. The reason for this is because the justify-center class centers the element on the flex container's main axis.
This means that if we were to change the main axis to 'column' then we would get a different result.
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-col justify-center bg-gray-100">
<div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">1</div>
<div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">2</div>
<div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">3</div>
</div>
Justify-Center and Items-Center centers the elements on the main axis and the cross axis, and they can be used in place of each other. They are the opposites of each other and will produce different results depending on what the current main axis is.
According to the question, the "Items1", "Items2" should be both horizontally and vertically aligned.
Horizontal => text-center/justify-center
Vertical => items-center
Here is a sample code for producing a view similar to the ASCII image in the question.
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="relative h-32 bg-blue-400">
<div class="absolute inset-0 flex items-center justify-center">
Item 1
<br>
Item 2
</div>
</div>
I have tried to summarize different occurances of centering the divs
Center divs in Column
For fit width
<div class="bg-yellow-400 flex flex-col h-screen justify-center items-center">
<div className="bg-green-500 p-2">item 1</div>
<div className="bg-pink-500 p-2">item 2</div>
</div>
For full width
<div class="bg-yellow-400 flex flex-col h-screen justify-center items-center">
<div className="bg-green-500 p-2 w-full flex justify-center">
item 1
</div>
<div className="bg-pink-500 p-2 w-full text-center">item 2</div>
</div>
Extra:
Center vertically split divs
<div class="flex h-screen flex-col">
<div class="flex flex-1 items-center justify-center bg-green-500 p-2 text-4xl">
<div class="bg-yellow-400 p-6">Item 1</div>
</div>
<div class="flex flex-1 items-center justify-center bg-pink-500 p-2 text-4xl"><div class="bg-amber-400 p-6">Item 2</div></div>
</div>
Center horizontally split divs
<div class="flex h-screen">
<div class="flex flex-1 items-center justify-center bg-green-500 p-2 text-4xl">
<div class="bg-yellow-400 p-6">Item 1</div>
</div>
<div class="flex flex-1 items-center justify-center bg-pink-500 p-2 text-4xl"><div class="bg-amber-400 p-6">Item 2</div></div>
</div>
Center divs in Row
For fit height
<div>
<div class="flex h-screen items-center justify-center bg-yellow-400">
<div class="flex justify-center bg-green-500 p-2">item 1</div>
<div class="bg-pink-500 p-2 text-center">item 2</div>
</div>
</div>
For full height
<div>
<div class="flex h-screen items-center justify-center bg-yellow-400">
<div class="flex h-full items-center bg-green-500 p-2">item 1</div>
<div class="flex h-full items-center bg-pink-500 p-2">item 2</div>
</div>
</div>
#bastiotutuama's answer is already good, however if there are other surrounding items then use align self utilities instead of items-center. source
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="bg-blue-500 flex justify-center h-screen">
<div class="bg-red-300 self-start">
<h1>
Let us get you off the board <br>
<span>Pursue what you wanted</span>
</h1>
<div class="mt-2 flex items-center">
Get started
Learn more
</div>
</div>
<div class="bg-yellow-300 self-center">
<h1>
Let us get you off the board <br>
<span>Pursue what you wanted</span>
</h1>
<div class="mt-2 flex items-center">
Get started
Learn more
</div>
</div>
<div class="bg-red-300 self-end">
<h1>
Let us get you off the board <br>
<span>Pursue what you wanted</span>
</h1>
<div class="mt-2 flex items-center">
Get started
Learn more
</div>
</div>
</div>
You have another choice which is grid and can do
<div class="grid justify-items-center items-center h-screen">
<div>
<h3>title</h3>
<button>button</button>
</div>
</div>
Navigation using React
<nav className="flex gap-8 items-center justify-center">
<Link className=''>SHOP</Link>
<Link className=''>BACKPACK</Link>
</nav>
For vertical center in Tailwind Grid
use class name:
self-center
<div class="self-center">
you can do
<div class="flex justify-center items-center flex-col">
<p>Item 1</p>
<p>Item 2</p>
</div>
However, this approach requires flexbox.
I did it this way and it works.
<div class="grid grid-cols-3 h-screen">
<div class="bg-red-400 col-span-3 sm:col-span-1 flex">
<div class="bg-blue-300 m-auto">
<h1>hello</h1>
</div>
</div>
<div class="col-span-3 bg-red-50 sm:col-span-2"></div>
See image
Use class justify-center to align on the main axis. align-middle operates on the cross axis.