I have custom radio buttons and I'm using the tailwind peer and peer-checked to change the background of the label when the radio button is checked , now I need to change the background color of the label when I am dark mode.
<input class="radio_input hidden peer" type="radio" id="html" name="expense_categories_id" value="html">
<label class="radio_label cursor-pointer bg-white flex justify-center items-center flex-col text-gray-800 rounded-xl border-4 border-gray-200 px-4 py-4 peer-checked:bg-gray-800 peer-checked:dark:bg-gray-100 peer-checked:text-white peer-checked:dark:text-gray-600 dark:border-gray-800 dark:bg-gray-600 dark:text-gray-100 " for="html">Name
</label>
Related
Here is me trying to hover over 'delete' popup button positioned absolute relatively to three dots to the left.
As you can see it ignores the delete button completely, even though I even explicitly added a higher z-index to it. It has the same effect with any other elements on the background, so I estimate that problem is somewhere in code relevant to 'delete' button and it's popover. There are no elements with sticky or fixed positioning in this project. Here is my JSX with TailwindCSS and Headless UI's Popover component:
Relative part of parent component.
<Disclosure.Panel className="w-full text-gray-900 flex flex-col" >
{projects?.map(project => Object.keys(project).map(key => (
<div className={`w-4/5 py-2 hover:font-medium cursor-pointer self-end pl-2 flex items-center justify-between ${selectedProject === key ? 'bg-gray-900 text-gray-50 font-medium' : ''}`} onClick={() => handleSelect(key)} key={key}>
<p>{key}</p>
<Popover className='relative z-100'>
<Popover.Button className='flex items-center'><EllipsisHorizontalIcon className='w-8 h-6 pr-2 hover:text-zinc-400'/></Popover.Button>
<ProjectSettingsPopover selectedProject={selectedProject} />
</Popover>
</div>
)))}
<div className="flex gap-2 h-7 mt-2 w-4/5 ml-auto">
<input type='text' className='w-4/5 bg-background rounded-md px-2 py-1 text-sm border-2 border-grayDark' placeholder='New Project' value={input} onChange={(e) => setInput(e.target.value)}></input>
<button className='bg-black p-1 rounded-full flex items-center justify-center hover:bg-zinc-700' onClick={() => handleNewProject()}><PlusCircleIcon className='text-primary h-5 w-5 group-hover:text-primaryDark'/></button>
</div>
</Disclosure.Panel>
ProjectSettingsPopover.js
return (
<Transition
enter="transition ease-out duration-200"
enterFrom="opacity-0 -translate-x-1"
enterTo="opacity-100 -translate-x-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 -translate-x-0"
leaveTo="opacity-0 -translate-x-1"
appear
>
<Popover.Panel className="left-9 -top-8 w-24 text-sm z-50 rounded-sm flex flex-col absolute bg-background shadow-lg ring-1 border border-black ring-black ring-opacity-5">
<Button btnStyle='default' btnSize='edgy' onClick={deleteProject}>delete</Button>
</Popover.Panel>
</Transition>
)
What is the reason of such a weird behavior?
I'm trying to vertically align the placeholder of the third input field. Assuming that "text-start" and "text-end" classes when used with placeholder modifier in tailwind vertically align the placeholder text. But weirdly, in my case, "text-start" & "text-end" are doing the same as "text-left" & "text-right" respectively.
<div class="flex flex-col space-y-8">
<div class="flex flex-col space-y-4 w-[540px]">
<input class="placeholder-Eerie-Black text-[13px] font-normal tracking-[0px] leading-[15px] bg-Amber border-2 border-opacity-50 border-Eerie-Black rounded-lg h-[50px] p-2" placeholder="Name and Surname*">
<input class="placeholder-Eerie-Black text-[13px] font-normal tracking-[0px] leading-[15px] bg-Amber border-2 border-opacity-50 border-Eerie-Black rounded-lg h-[50px] p-2" placeholder="Email*">
<input class="placeholder:text-end placeholder-Eerie-Black text-[13px] font-normal tracking-[0px] leading-[15px] bg-Amber border-2 border-opacity-50 border-Eerie-Black rounded-lg h-[98px] p-2 text-start" placeholder="Please provide as much detailed information as possible. Thank you *">
</div>
<button class="bg-Green w-[210px] h-[50px] rounded-lg">SUBMIT MESSAGE</button>
</div>
After doing a bit of research about the issue, I got to know that adding class placeholder:-translate-y-6
fixes this bug. But still curious why the above mentioned classes aren't doing this.
I've been trying to build this UI for almost a day.
I'm just stuck with not getting the middle div in the center of the screen and the last Copyright div align to the bottom of the screen. I'm a mobile dev first, just started out styling on web. This is what I've managed to build so far, ignore rest of the UI, I can do that part. Here's the sandbox for my code as well : https://codesandbox.io/s/tailwind-css-and-react-forked-v9c22d?file=/src/App.js:140-2801
<div className="bg-background-light dark:bg-background-dark h-screen w-full">
<div>
<img
src="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a"
className="h-24 w-24 mt-9 ml-9"
/>
<div className="flex justify-center items-center h-fit">
<div className="flex flex-col items-start">
<div className="text-4xl text-black">Admin Dashboard</div>
<div className="text-login-subtitle-light dark:text-login-subtitle-dark mt-6">
Enter your email and password to sign in
</div>
<label className="dark:text-white text-text-color-primary-light mt-6">
Email
</label>
<input
placeholder="Email"
className="w-full rounded font-thin px-5 py-3 mt-4"
autoFocus
type="email"
required
/>
<label className="dark:text-white text-text-color-primary-light mt-6">
Password
</label>
<input
placeholder="Password"
id="password"
className="w-full rounded font-thin px-5 py-3 mt-4"
autoFocus
type="password"
required
/>
<label
for="default-toggle"
class="inline-flex relative items-center cursor-pointer"
>
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 mb-5"></div>
<input
type="checkbox"
value=""
id="red-toggle"
class="sr-only peer"
checked
/>
<span class="ml-3 text-sm font-medium text-text-color-primary-light dark:text-white mb-5">
Remember me
</span>
</label>
<button
className="text-white bg-red-900 h-16 rounded-xl w-full text-xl"
type="submit"
>
Sign In
</button>
<div className="text-black dark:text-white">
© Example Technologies Pvt. Ltd.
</div>
</div>
</div>
</div>
</div>
Problem highlight, as you can see the second div starts as soon as the image ends
After adding your code and when I scroll, so when we add a bottom padding to the copyright view, it creates a white bg when I open the console, is this the expected behaviour?
You need to set the logo and the copyright absolute. The copyright can you stick to the bottom and left and right side with bottom-0 left-0 right-0, and center the text with text-center.
Then, you need to add flex to the parent div, and then m-auto to the div with the fields. This will center the div horizontal and vertical on the page (in the main div). I also set a background on it so you can see the div, but that is not necessary of cause.
Here is the code:
import React from "react";
import "./styles.css";
import "./styles/tailwind-pre-build.css";
export default function App() {
return (
<div className="relative flex bg-background-light dark:bg-background-dark h-screen w-full">
<img
src="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a"
className="absolute h-24 w-24 mt-9 ml-9"
/>
<div className="m-auto bg-gray-500 rounded-lg p-8">
<div className="flex justify-center items-center h-fit">
<div className="flex flex-col items-start">
<div className="text-4xl text-black">Admin Dashboard</div>
<div className="text-login-subtitle-light dark:text-login-subtitle-dark mt-6">
Enter your email and password to sign in
</div>
<label className="dark:text-white text-text-color-primary-light mt-6">
Email
</label>
<input
placeholder="Email"
className="w-full rounded font-thin px-5 py-3 mt-4"
autoFocus
type="email"
required
/>
<label className="dark:text-white text-text-color-primary-light mt-6">
Password
</label>
<input
placeholder="Password"
id="password"
className="w-full rounded font-thin px-5 py-3 mt-4"
autoFocus
type="password"
required
/>
<label
for="default-toggle"
class="inline-flex relative items-center cursor-pointer"
>
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 mb-5"></div>
<input
type="checkbox"
value=""
id="red-toggle"
class="sr-only peer"
checked
/>
<span class="ml-3 text-sm font-medium text-text-color-primary-light dark:text-white mb-5">
Remember me
</span>
</label>
<button
className="text-white bg-red-900 h-16 rounded-xl w-full text-xl"
type="submit"
>
Sign In
</button>
</div>
</div>
</div>
<div className="absolute bottom-0 left-0 right-0 text-center text-black dark:text-white">
© Example Technologies Pvt. Ltd.
</div>
</div>
);
}
I'm using tailwind and Vue to make some reusable toggle component. Border of component is gray color, but plan is when I click on component, border will be red like on a image below (I'm using/trying using focus).
Problem is because I can use focus just on input and button, but I need focus on div tag
I have one div, inside is two paragraph and one input (type:checkbox). I tried with tabindex and it doesn't work, when I click in checkbox or input field (gray button) it doesn't focus. Only focuses when I click inside a component but not in checkbox field.
Code is
<template>
<div>
<div tabindex="1"
class="relative border border-gray-300 px-10 max-w-md mx-auto my-2 cursor-pointer rounded-lg px-5 py-4 rounded-lg border bg-white transition duration-150
ease-in-out placeholder:text-zinc-400 hover:bg-zinc-100 focus:border-transparent
focus:outline-none focus:ring disabled:opacity-50 motion-reduce:transition-none
dark:bg-zinc-900 dark:placeholder:text-zinc-500 dark:hover:bg-zinc-800" :class="[ error
? 'border-red-500 caret-red-500 focus:ring-red-500/50'
: 'border-zinc-300 caret-primary focus:ring-primary/50 dark:border-zinc-600 dark:focus:border-transparent',
]"
>
<div class="flex justify-between">
<div>
<h1 class="text-md font-semibold text-black">
{{ titleToggle }}
</h1>
<p class="inline text-md text-gray-500">
{{ subtitleToggle }}
</p>
</div>
<label class="switch my-auto">
<input
:value="toggleSwitch"
v-bind="$attrs" type="checkbox"
class="rounded-lg " :class="[
error
? 'border-red-500 caret-red-500 focus:ring-red-500/50'
: 'border-zinc-300 caret-primary focus:ring-primary/50
dark:border-zinc-600 dark:focus:border-transparent',]" #click="updateInput"
>
<span :class="[toggleSwitch ? 'bg-red-500 border-red-500' : 'bg-gray-300 border-gray-300',
]" class="slider round absolute cursor-pointer inset-0 border rounded-full"
/>
</label>
</div>
</div>
</div>
</template>
Is anyone have advice, or maybe different way how to do it ?
I don't really understand your question, but you may have a look at this from the tailwind documentation :
focus-within (:focus-within) : Style an element when it or one of its descendants has focus using the focus-within modifier:
<div class="focus-within:shadow-lg ...">
<input type="text" />
</div>
https://tailwindcss.com/docs/hover-focus-and-other-states#focus
I am using Alpine.js in my new Tailwind project and now I am stuck, while it has been working great.
I made a hamburger menu icon with a checkbox and now I want the menu to actually show up.
Not really getting any closer from reading the Alpine documentation, it has a lot of info on buttons but not on checkboxes.
I want to initially not show the menu, check the checkbox ie. press the hamburger menu icon and show the mobile menu. Clicking the icon again ie. unchecking the checkbox, hides the menu again.
My code now:
<label for="check-menu" class="flex flex-col cursor-pointer w-70px">
<input type="checkbox" id="check-menu" class="hidden" x-model="show" />
<span class="duration-[400ms] bg-white rounded-md w-full h-7px mx-0 my-7px hamburger"></span>
<span class="duration-[400ms] bg-white rounded-md w-full h-7px mx-0 my-7px hamburger"></span>
<span class="duration-[400ms] bg-white rounded-md w-3/4 ml-25pc h-7px my-7px hamburger"></span>
</label>
<div x-text="show">
Menu on mobile
</div>
The site gives console errors and is not loading anymore..
I also tried the #click event with .self, not working as well (the mobile menu doesnt show).
Anyone has any clue how to make this happen?
You have to always mark an Alpine.js component with x-data directive and define the reactive variables there.
<div x-data="{show: false}">
<label for="check-menu" class="flex flex-col cursor-pointer w-70px">
<input type="checkbox" id="check-menu" class="hidden" x-model="show" />
<span class="duration-[400ms] bg-white rounded-md w-full h-7px mx-0 my-7px hamburger"></span>
<span class="duration-[400ms] bg-white rounded-md w-full h-7px mx-0 my-7px hamburger"></span>
<span class="duration-[400ms] bg-white rounded-md w-3/4 ml-25pc h-7px my-7px hamburger"></span>
</label>
<div x-show="show">
Menu on mobile
</div>
</div>