I need to set input with button horizontally like this and it works with this code
< label
for = "rootFolder"
class = "flex mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" >
Processing Directory <
/label> <
div class = "mb-6 flex" >
<
input type = "rootFolder"
id = "rootFolder"
class = "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder = ""
required / >
<
button class = "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" >
add <
/button> <
/div>
But I need to change add text to Korean, So I just change it but it makes it like this.
Not only does the text look vertical, but it also changes the size of the Input tag. What is the problem?
There was a problem with the width you gave to the input. I removed it and used grow instead and also removed the width of the button. See the link below:
https://play.tailwindcss.com/kRknIVE2Ra
Related
I am using framer motion, tailwind CSS ad react to try to animate grid elements in such a way that it starts from the first grid element's position and then moves on to its respective position in the grid
<div
className="
mx-auto
p-7 mt-10 md:mt-5
grid
grid-cols-1
sm:grid-cols-2
md:grid-cols-3
lg:grid-cols-4
gap-y-16
gap-x-14
">
{/* add button */}
<motion.div
className="
p-5
border-2 border-[#6e3820] rounded-3xl
hidden
max-w-[13rem]
max-h-[13rem]
cursor-pointer
active:bg-[#c37f37]
hover:bg-[#f9cdc0]
md:flex justify-center
"
onClick={formOpen}
variants={button}
whileHover="hover"
whileTap="pressed"
>
<div className="border-2 rounded-3xl border-dashed border-[#dfb589] flex items-center justify-center sm:p-5 md:p-10 lg:p-10 xl:p-14">
<button className="">
<motion.img
src="https://img.icons8.com/ios/50/dfb589/plus-math--v1.png"
whileHover={{ rotate: 45 }}
transition={{ duration: 0.6 }}
variants={plus}
/>
</button>
</div>
</motion.div>
{
usersContent.map((item)=>{
return(
<NoteCard
key = {item.id}
id = {item.id}
companion = {item.companion}
title = {item.title}
content={item.content}
deleteNote={deleteNote}
/>
)
})
}
</div>
Here I want the other notecards to start from the same position the add button is in and then go to its default location. If not with framer motion is it possible any other way?
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 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>
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'm a complete Tailwind css newbie and am playing with it in a small project.
What is the idiomatic way to toggle the UI state of a tab? Here are a couple tabs taken straight from the Tailwind website:
<nav class="-mb-px flex space-x-8" aria-label="Tabs">
<a class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
Tab 1
</a>
<a class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
Tab 2
</a>
<a class="border-indigo-500 text-indigo-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
Tab 3
</a>
</nav>
As you can see, Tab 3 is the "selected" state. What if I want to change selection to Tab 1. I'd have to swap a bunch of the utility classes (border-indigo-500 into border-transparent, etc.).
With vanilla CSS, you might define a css class called .selected that would override a normal tab's css and toggle that class on the html element, but I don't think that's the idiomatic way that tailwind recommends here.
Sorry if this is a super newbie question. Thanks.
For this, you can maintain three variables.
One that contains the selected tab value:
let selectedTab = "tab1"
And the other classnames of an active and non-active tab. Something like this:
const active = "border-indigo-500 text-indigo-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
const nonActive = "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
Based on the click you change the value of the selected tab to its respective tab value and change the className of the HTML according to it.
Your HTML will look something like this
<nav class="-mb-px flex space-x-8" aria-label="Tabs">
<a class={selectedTab === "tab1" ? active : nonActive}> Tab 1 </a>
<a class={selectedTab === "tab2" ? active : nonActive}> Tab 2 </a>
<a class={selectedTab === "tab3" ? active : nonActive}> Tab 3 </a>
</nav>