On the following div:
<div className='border border-gray-400
text-gray-600
hover:border-gray-600
focus:border-green-500
focus-within:border-green-500'>
I want the hover state not to happen when an element is an in-focus state. How can I make it so?
Thanks!
Use the css :not selector, e.g. hover(:not focus):border-gray-600
Try this, border need to define width, so in this example I gave just 2 when it hovered.
check official Doc
<div className='hover:border-2 border-gray-400 text-gray-600
hover:border-gray-600
focus:border-green-500 focus-within:border-green-500'>
export const FramelessInput = ({ name }) => {
const [focused, setFocused] = useState(false);
return (
<div
className={classNames(
'w-[200px] rounded-sm border border-transparent text-gray-600 focus-within:border-green-500',
!focused && 'hover:border-gray-600'
)}
>
<input
type="text"
placeholder={name}
onFocus={(e) => setFocused(true)}
onBlur={(e) => setFocused(false)}
className="block text-sm leading-4 font-sans p-3 h-10 focus:outline-none"
/>
</div>
);
};
Try use property "ring"
<div className='border border-gray-400
text-gray-600
ring-green-500
focus-within:ring-2'>
Related
I tried to style file input button to look kind of like all buttons in my app. I use tailwind for styling.
Below example of button on hover:
The shadow is not hidden or cut off. But if I try to use the same style on file input - it looks like this:
The shadow is cut off. Looks like there is an overflow hidden but there isn't.
File input code:
<div className="flex flex-col gap-y-2 overflow-visible">
<label htmlFor="art_cover">Art cover</label>
<input
type="file"
name="art_cover"
id="art_cover"
onChange={({ currentTarget }: ChangeEvent<HTMLInputElement>) => {
currentTarget.files && formik.setFieldValue('art_cover', currentTarget.files[0]);
}}
className="text-gray-400 file:border-solid file:btn-style file:text-primary-light file:mr-3"
/>
</div>
Tailwind reused style that I use for buttons:
.btn-style {
#apply rounded-full bg-transparent border-2 border-primary-accent font-bold px-4 md:px-5 py-1 md:py-1.5 cursor-pointer
transition text-center text-sm md:text-base hover:bg-primary-accent hover:text-secondary-dark hover:shadow-accent;
}
.shadow-accent {
#apply drop-shadow-[0_0_15px_rgba(78,255,166,0.3)];
}
Fixed by changing my input implementation using this answer.
<div className="flex flex-col gap-y-2">
<label htmlFor="art_cover">Art cover</label>
<label htmlFor="art_cover" className="flex items-center">
<div className="btn-style text-primary-light mr-3">Choose file</div>
<p className="text-gray-400">{formik.values.art_cover === undefined ? 'No file chosen' : formik.values.art_cover['name']}</p>
</label>
<input
type="file"
name="art_cover"
id="art_cover"
onChange={({ currentTarget }: ChangeEvent<HTMLInputElement>) => {
currentTarget.files && formik.setFieldValue('art_cover', currentTarget.files[0]);
}}
className="hidden"
/>
</div>
Works like a charm
I made a custom switch in tailwind problem is that when it witch transiton doesnt work I think its becouse of this line
${isSwitched ? ' right-1 ' : 'left-1'}
import type { StateUpdater } from "preact/hooks"
type SwitchButtonProps = {
textLeft: String,
textRight: String,
isSwitched: boolean,
setIsSwitched: StateUpdater<boolean>
}
export const SwitchButton = ({ textLeft, textRight, isSwitched, setIsSwitched }: SwitchButtonProps) => {
return (
<div class="mx-8 shadow rounded border h-10 mt-4 flex p-1 relative items-center bg-gray-200">
<div class="w-full flex justify-center"
onClick={() => setIsSwitched(false)}
>
<button>{textLeft}</button>
</div>
<div class="w-full flex justify-center"
onClick={() => setIsSwitched(true)}>
<button>{textRight}</button>
</div>
<span
class={` bg-white shadow text-gray-800 flex items-center justify-center w-1/2 rounded h-8 transition-all top-[4px] absolute
${isSwitched ? ' right-1 ' : 'left-1'}
`}>
{isSwitched ? textRight : textLeft}
</span>
</div>
)
}
I'm having trouble with a design that consists in a 6 columns grid and a text ahead it. When I hover the text, the grid child has to change its background to an image (only the column hovered). It works fine, but I have the problem hovering behind the text... it seems impossible. Is there any solution? thanks!
const [dissapear, setDissapear] = useState([20]);
return (
<PageLayout
className="bg-softBlack"
>
<div className="relative h-[480px]">
<h1
className="absolute top-32 uppercase bg-transparent text-gray-10 text-[9.028vw] leading-[0.9] tracking-[-0.06em]"
style={{ zIndex: 1000, mixBlendMode: "difference" }}
>
welcome <br />
to the LAB.
</h1>
<div className="w-full h-full absolute left-0 top-0 grid grid-cols-6">
{array.map((e, idx) => (
<div
key={idx}
className="bg-black relative"
onMouseEnter={() => setDissapear((prev) => [...prev, idx])}
>
{dissapear.some((e) => e === idx) && (
<Image src={e} alt="background" layout="fill" />
)}
</div>
))}
</div>
</div>
</PageLayout>
I'm using next js, thanks
No sure to be sure to understand, but you seems using tailwindcss.
maybe group in tailwind doc might be what you are look for.
Hello so I have been working on this for hours and tried brute forcing it, with as many different solutions I could think of, but I don't seem to be getting it to work.
Goal: make the cards take up more width, when the screen is bigger
This is my root component:
function App() {
const event = new Date(Date.UTC(2000, 11, 20, 3, 0, 0));
return (
<div className="bg-gray-200 p-8 min-h-screen flex items-center justify-center antialiased text-gray-900 flex-col">
<Expenses date={event}></Expenses>
<Expenses date={event}></Expenses>
<Expenses date={event}></Expenses>
</div>
);
}
export default App;
This is the Expenses Component
export default function Expenses(props) {
return (
<div className="">
<ExpenseItem time={props.date}></ExpenseItem>
</div>
);
}
This is the Expense Item Component
export default function ExpenseItem(props) {
return (
<div className="bg-white rounded-lg overflow-hidden border flex h-auto mt-4 shadow">
<CalendarItem date={props.time}></CalendarItem>
<div className="p-4">
<h4 className="font-semibold text-lg">All my money for software engineering</h4>
<div>10000€</div>
<div className="mt-4 inline-block bg-indigo-300 text-white px-4 py-1 rounded-lg shadow-lg uppercase tracking-wide font-semibold text-sm ">
Delete
</div>
</div>
</div>
);
}
I am grateful for every input! Thank you!
Add "width: 100%" to the card and its parent component. When Browser resize(expand or shrink), they will resize too. You can handle the detail of their size by giving some width to the parent and the parent's width will be limit width of the card component.
I am trying to make tooltips for icons in my header, and right now I have made a component to make the icon and tooltip into one div, with tailwind styles in that
JSX Component:
const HeaderIcon = ({ icon, redirect = window.location.pathname.replace('/', ""), text = ""}:IconProps) => (
<div className="group relative flex items-center justify-center h-12 w-12 mt-2 mb-2 mx-5 cursor-pointer">
<button onClick={() => goto(redirect)} className="items-center inline-flex">{icon}</button>
<span className="group-hover:visible absolute rounded-md shadow-md text-white bg-gray-900 text-xs font-bold transition-all duration-100 p-2 text-center min-w-max invisible">
{text}
</span>
</div>
)
Here goto is a redirect function, icon is a JSX element from react-feather (icon library), redirect is a string telling the button where to redirect to, and text is the tooltip text. What tailwind classes should I use to position the tooltips under the icons, centered.
If there is any other things you may want then just ask and I will edit the code in.
you need to create a new variant group-hover for the plugin visibility in the Tailwind configuration:
// tailwind.config.js
module.exports = {
// ...
variants: {
extend: {
visibility: ['group-hover'],
}
},
}