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.
Related
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'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>
My tailwind code behaves really weird. I have a div as a button and I want there an expanding border on hover. My first idea was something like hover:border-2. That doesn't work so I visited tailwind docs to figure it out. Then I put their classes from there border-2 hover:border-t-4 to mine button like this:
<div class="inline-block bg-green-500 p-2 rounded-2xl border-2 hover:border-t-4">Register</div> and the button doesn't respond for hover. When I put this line to the Tailwind playground, surprisingly code works there. Does anyone have an idea what I am doing wrong there? Cheers
<template>
<h1 class="text-2xl font-semibold">Register to use our app fully!</h1>
<div class="login">
<form class="bg-red-400 p-2 max-w-2xl mx-auto">
<div class="flex flex-col items-center">
<input type="text" id="name" placeholder="Nickname" class="m-2 p-1"/>
<input type="text" id="name" placeholder="Password" class="m-2 p-1"/>
<input type="number" id="name" placeholder="Age" class="m-2 p-1"/>
<div class="p-2">
<label for="name">I agree with licensing agreements: </label>
<input type="checkbox" id="name" />
</div>
</div>
<div class="inline-block bg-green-500 p-2 rounded-2xl border-2 hover:border-t-4">Register</div>
</form>
</div>
</template>
It seems you are using tailwind version below v3. As per documentation hover doesn't support border width but supports border color. Check this out https://v2.tailwindcss.com/docs/hover-focus-and-other-states#hover
But it supports border width in v3. Try changing version in tailwind playground with your code and see if it works