I'm making a switch to toggle dark mode in React. This is how it looks
<div className="flex gap-4 bg-black p-1 rounded-full relative" onClick={() => setDarkMode((mode:boolean) => !mode)}>
<div className="bg-white border-2 border-gray-400 h-8 w-8 rounded-full absolute
top-0 left-0 dark:left-auto"/>
<WbSunnyIcon className="text-yellow-400"/>
<ModeNightIcon className="text-white"/>
</div>
For some reason it doesn't move when I click on it. Why is that?
Related
I'm making a blog using NextJS and TailwindCSS. I've made a card, that the button overlays the card image right in the middle. But the button stays a little higher. Image:
And here is the code:
<div className="relative max-w-5xl mx-auto px-2 grid grid-cols-3">
<div className="relative overflow-hidden flex items-center justify-center flex-col">
<Image
src={
"https://static.wixstatic.com/media/5bfb6f_9f2519d5fc2d41f990a10dd92eb8658d.jpg/v1/fill/w_393,h_325,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/5bfb6f_9f2519d5fc2d41f990a10dd92eb8658d.jpg"
}
width={314}
height={314}
alt="Image"
className="object-cover"
/>
<div className="absolute w-full h-full top-0 bottom-0 left-0 right-0">
<button className="text-xl px-4 py-2 rounded text-blue-600 bg-white absolute bottom-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">Travel</button>
</div>
</div>
</div>
I've tried using absolute and relative positions. I've also tried using flexbox. But nothing worked. I'm expecting that the button will overlay on the image right on the center.
There are many ways to do this, but I think the easiest fix here is, instead of using absolute for the button, just add flex items-center justify-center to the parent class of button like this:
<div class="relative max-w-5xl mx-auto px-2 grid grid-cols-3">
<div class="relative overflow-hidden flex items-center justify-center flex-col">
<img
src="https://via.placeholder.com/314x314"
width="314"
height="314"
alt="Image"
class="object-cover"
/>
<div class="absolute w-full h-full top-0 bottom-0 left-0 right-0 flex items-center justify-center">
<button class="text-xl px-4 py-2 rounded text-blue-600 bg-white">Travel</button>
</div>
</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>
I have a problem. I use react and tailwind css. Th modal is relative and the overlay is flex positioned, because I want the main modal to be positioned in the middle of the screen on X axis. Here it comes the problem. The wrapper that contains the options tag renders in a different place than the parent select. I tried fixing it with absolute position and also with relative one. But nothing works...
Because there is not programming logic, I will paste the code.
<div className="modal flex fade fixed top-0 left-0 w-full h-full outline-none overflow-x-hidden overflow-y-auto" id="exampleModalCenteredScrollable" tabIndex="-1" aria-labelledby="exampleModalCenteredScrollable" aria-modal="true" role="dialog">
<div className=" modal-dialog modal-dialog-centered modal-dialog-scrollable relative w-auto pointer-events-none flex-1 p-2 bg-slate-200">
<div className="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding max-w-2xl mx-auto mt-5 rounded-md outline-none text-current">
<div className="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md ">
<h5 className="text-2xl font-bold leading-normal text-gray-700 underline " id="exampleModalCenteredScrollableLabel">
Add new exercice
</h5>
<button type="button" onClick={() => setOpen(!open)}
className="btn-close box-content p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
data-bs-dismiss="modal" aria-label="Close"><AiOutlineCloseCircle color='black' size={30}/></button>
</div>
<div className="modal-body relative p-4">
<p>Look for the exercice you wish to add, and click import. You may add as many exercices you want, however please make sure you will complete them by the end of the day.</p>
<form >
<div className='flex mt-3 flex-col'>
<input required placeholder='Search by word...' className='border border-slate-400 p-1 rounded-md flex-1 max-w-sm my-2'/>
{/* Problem is here!!!! */}
<select className='border border-slate-400 p-1 rounded-md max-w-sm my-2 [&>option]:bg-black'>
<option defaultValue>Slobozel</option>
<option>Slobozel</option>
<option>Slobozel</option>
<option>Slobozel</option>
</select>
</div>
Try to render all the Twcss Colors out,
because they are missing once a while
but end up only a few can display randomly.
I can manually use it one by one , it will show up otherwise it wont display in a map
Edit: Add the key, already set it one by one and refresh would NOT work as expected
export function Twcolors(props: TwcolorsProps) {
const colors = ['', 'slate', 'gray', 'zinc', 'neutral', 'stone', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
return (
<>
<main className="flex w-screen flex flex-col items-center justify-center">
<h1 className="text-4xl mt-3 font-extrabold text-gray-900 tracking-tight text-indigo-500">
Tailwind CSS
Colors</h1>
<p className="my-4 text-center leading-loose">
<code className="bg-gray-200 px-3 py-1 rounded-lg">-inherit</code>
<code className="bg-gray-200 px-3 py-1 rounded-lg">-current</code>
<code className="bg-gray-200 px-3 py-1 rounded-lg">-transparent</code>
<code
className="bg-gray-200 px-3 py-1 rounded-lg">-black</code>
<code
className="bg-gray-200 px-3 py-1 rounded-lg">-white</code>
<br/>as well as the following:</p>
<div className="bg-neutral-300"> Some</div>
{
colors.map(
(color) => (
<div key={color.toString()} className="grid grid-rows-10 grid-flow-col items-left">
<h2 key={color.toString()}>{color} {`bg-${color}-50`}</h2>
<div key={color.toString()}
className={`h-12 w-24 m-1 flex items-center justify-center rounded-xl bg-${color}-50`}>50
</div>
<div key={color.toString()}
className={`h-12 w-24 m-1 flex items-center justify-center rounded-xl bg-${color}-100`}>100
</div>
<div key={color.toString()}
className={`h-12 w-24 m-1 flex items-center justify-center rounded-xl bg-${color}-200`}>200
</div>
<div key={color.toString()}
className={`h-12 w-24 m-1 flex items-center justify-center rounded-xl bg-${color}-300`}>300
</div>
</div>
)
)
}
</main>
</>
)
;
}
export default Twcolors;
It is because you are using dynamic class names, which will not work as Tailwind can not detect the class names. This is documented here: https://tailwindcss.com/docs/content-configuration#dynamic-class-names
The "random" ones showing up will be bacause they are used in the rest of your code somewhere.
And that is why it works if you manually add the colors one by one.
If you check out the Tailwind Colors page, you will see they actually render all the colors using a style rather than Tailwind classes. https://tailwindcss.com/docs/customizing-colors
I want to turn my entire screen into the grey when my tailwind css modal open in my angular app but the screen remain white after modal open Please anyone can solve this
this is my html code
<button class="bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" (click)="toggleModal()">
Open modal
</button>
<div *ngIf="showModal" class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
<div class="relative w-auto my-6 mx-auto max-w-3xl">
<!--content-->
<div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
<!--header-->
<div class="flex items-start justify-between p-5 border-b border-solid border-blueGray-200 rounded-t">
<h3 class="text-3xl font-semibold">
Modal Title
</h3>
<button class="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none" (click)="toggleModal()">
<span class="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
×
</span>
</button>
</div>
<!--body-->
<div class="relative p-6 flex-auto">
<p class="my-4 text-blueGray-500 text-lg leading-relaxed">
I always felt like I could do anything. That’s the main
thing people are controlled by! Thoughts- their perception
of themselves! They're slowed down by their perception of
themselves. If you're taught you can’t do anything, you
won’t do anything. I was taught I could do everything.
</p>
</div>
<!--footer-->
<div class="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
<button class="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" (click)="toggleModal()">
Close
</button>
<button class="bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" (click)="toggleModal()">
Save Changes
</button>
</div>
</div>
</div>
</div>
This is my typescript code to open modal
showModal:boolean = false;
toggleModal(){
this.showModal = !this.showModal;
}
Here my modal is opening but the entire screen is not turning into the dark mode Please anyone can solve this Thanks in advance
Probably you need to add the specific style for your modal container as backgrop background, like custom style: style="background-color: rgba(0,0,0,0.5);"
In your code it should be look like: <div *ngIf="showModal" style="background-color: rgba(0,0,0,0.5);" class="overflow-x-hidden...
Also, you can add the specific '.backdrop' class to the root styles.css and use it as class:
.backdrop {
background-color: rgba(0,0,0,0.5);
}
in html:
<div *ngIf="showModal" class="backdrop overflow-x-hidden overflow-y-auto...
tailwind screen example with the dark background here
the component template html looks like that:
<button class="bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" (click)="toggleModal()">
Open modal
</button>
<div *ngIf="showModal" class="backdrop overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
//.......the rest code is the same....
I'm having a difficulty in making the border radius on the line below the text and I also have a problem on how to put a spacing between the text and the bottom line.
This is my expected output
Expected Output -> https://ibb.co/RSKytWm
Codepen -> Codepen
code
<div class="
min-h-screen
flex
items-center
justify-center
py-4
px-4
sm:px-6
lg:px-6
bg-black
">
<div class="max-w-lg w-full space-y-8">
<div class="flex flex-col w-full px-4 py-4 sm:px-6 md:px-8">
<div class="flex flex-row justify-center">
<button class="
inline-flex
items-end
justify-center
h-20
w-28
text-white
font-regular
border-b-4 border-white
rounded-3xl
">
Personal Details
</button>
<button class="
inline-flex
items-end
justify-center
h-20
w-28
text-white
font-regular
border-b-4 border-white
rounded-3xl
mr-10
ml-10
">
Contact Details
</button>
<button class="
inline-flex
items-end
justify-center
h-20
w-28
text-white
font-regular
border-b-4 border-white
rounded-3xl
">
Other Details
</button>
</div>
</div>
</div>
</div>
Update:
After a long discussion with the OP, the OP has noticed that the upper side is not curved (I didn't notice anyway), as below:
Even adding rounded-t-sm won't solve it, since this is not possible to solve because we are adding bottom-border to the button, the only way to solve is to remove the bottom-border and add <hr> and style it to look like line.
Updated code:
<div class="min-h-screen flex items-center justify-center py-4 px-4 sm:px-6 lg:px-6 bg-black">
<div class="max-w-lg w-full space-y-8">
<div class="flex flex-col w-full px-4 py-4 sm:px-6 md:px-8">
<div class="flex flex-row justify-center">
<button class="inline-flex flex-col items-end justify-center h-50 w-50 rounded-sm text-white font-regular">
Personal Details
<hr class="w-full border-white rounded-md border-2 mt-2" />
</button>
<button class="inline-flex flex-col items-end justify-center h-50 w-50 rounded-sm text-white font-regular mr-10 ml-10">
Contact Details
<hr class="w-full border-white rounded-md border-2 mt-2" />
</button>
<button class="inline-flex flex-col items-end justify-center h-50 w-50 rounded-sm text-white font-regular">
Other Details
<hr class="w-full border-white rounded-md border-2 mt-2" />
</button>
</div>
</div>
</div>
</div>
Updated result:
Playground
Old answer
Not sure what is the difficulty that you have in adding border-radius, try adding rounded-sm and it will work.
If you want to add some space between the text and line, try adding some padding on the button, I think that py-2 will fit your needs.
Code:
<div class="min-h-screen flex items-center justify-center py-4 px-4 sm:px-6 lg:px-6 bg-black">
<div class="max-w-lg w-full space-y-8">
<div class="flex flex-col w-full px-4 py-4 sm:px-6 md:px-8">
<div class="flex flex-row justify-center">
<button class="inline-flex items-end justify-center h-50 w-50 py-2 rounded-sm text-white font-regular border-b-4 border-white">
Personal Details
</button>
<button class="inline-flex items-end justify-center h-50 w-50 py-2 rounded-sm text-white font-regular border-b-4 border-white mr-10 ml-10">
Contact Details
</button>
<button class="inline-flex items-end justify-center h-50 w-50 py-2 rounded-sm text-white font-regular border-b-4 border-white">
Other Details
</button>
</div>
</div>
</div>
</div>
Result:
Playground