Styling file input: Shadow of "choose file" is cut off - css

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

Related

Tailwind CSS: change parent label style when a child checkbox is checked

I want to add the add a border to my checkbox container when the checkbox is checked.
Currently, I have this:
<label
htmlFor="choose-me"
className=
'flex w-fit items-center justify-evely p-3 border-2 border-grey-4 text-grey-8
peer-checked:bg-light-indigo peer-checked:text-medium-indigo peer-checked:border-medium-indigo'>
<input type="checkbox" id="choose-me" className="peer mr-3 " />
Check me
</label>
I want something like the below:
However, I am unable to change the label styles when I put my input inside the label.
A CSS-only solution would be to use the :has pseudo-selector (note: not supported yet in Firefox). This would apply the classes only if the label wraps a checkbox which has been checked.
index.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer components {
.checkbox-label:has(input:checked) {
#apply border-blue-800 bg-blue-400 text-blue-800;
}
}
Your JSX: (with the unused classes stripped out)
<label className="checkbox-label justify-evely border-grey-4 text-grey-8 flex w-fit items-center gap-x-2 border-2 p-3">
<input type="checkbox" id="choose-me" />
Check me
</label>
You can test it here: https://play.tailwindcss.com/zidP4zm2Pq
The list of browsers supporting :has: https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility
use useState for handle active state:
const [isactive,setActive] = useState(false)
in JSX:
<label
onClick={()=>setActive(isactive?false:true)}
className= {`${isactive?'active-style':'normal-style'} extra-style-classes`}
>
<input type="checkbox" id="choose-me" className= {`${isactive?'active-style':'normal-style'} extra-style-classes`} />
Check me
</label>
First off, it's important to remember that the peer functionality in tailwind doesn't target parents (which is what you currently have). You can only target elements that are next to one another.
Additionally, because of how the CSS :peer combinator works you can only target previous components, meaning the checkbox MUST come before the peer who's state you want to affect when the checkbox is checked.
<label
htmlFor="choose-me"
class=
'flex w-fit items-center justify-evely p-3 text-grey-8 relative'
>
<input type="checkbox" id="choose-me" class="peer mr-3 relative z-10" />
<div class="absolute inset-0 border-2 border-grey-4 peer-checked:bg-indigo-200 peer-checked:text-indigo-800 peer-checked:border-indigo-800 peer-checked:block z-0"></div>
<span class="relative z-10">Check me</span>
</label>
Here's an example that works using pure tailwind/css, assuming you don't want to handle the state in your react component, as per #Vikesir's comment (though that was my first thought as well and it's a good idea).
You'll notice I'm fudging in an empty div and using that to simulate the background and border changing. I also wrapped the label text in a span to make sure I could change it's z-index so that both the checkbox and the text were visible above the div that handles the state change.
EDIT:
Here is a version using a pseudo-element built off of the span holding the label text if you don't want the empty div in your code:
<label
htmlFor="choose-me"
class=
'flex w-fit items-center justify-evely text-grey-8 relative'
>
<input type="checkbox" id="choose-me" class="peer mr-3 absolute left-2.5 z-20" />
<span class="relative z-10 inset-0 py-3 pr-3 pl-8 before:-z-10 before:content-[''] before:absolute before:inset-0 before:h-full before:w-full before:border-2 before:border-grey-4 peer-checked:before:bg-indigo-200 peer-checked:before:text-indigo-800 peer-checked:before:border-indigo-800 peer-checked:before:block">Check me</span>
</label>

How to add specific styles to className in Tailwind

I am passing a style to a checkbox when it is checked, but I do it in my tailwind.css file.
I am wondering if it is possible somehow to do it in className inline, because I do not want really to add many global styles to tailwind.css.
So here's the component so whenever I check it adds an SVG instead of default checkbox:
<input
key={color}
type="checkbox"
className="peer hidden input:checked"
name="checkbox-colors"
checked={isChecked === color}
value={color}
onClick={(e) => {
handleColorChange(e.currentTarget.value);
}}
readOnly
/>
<div className="h-full w-full flex justify-center items-center">
<CheckIcon className="hidden" />
</div>
and the styles are these:
input:checked + div svg {
#apply block;
}
so if it is possible somehow to use it in input className="peer hidden input:checked..."
Actually found a way around of using cn of #classNames and doing it like that:
<div className="h-full w-full flex justify-center items-center">
<CheckIcon
className={cn({
hidden: isChecked !== color,
})}
/>
</div>
and works like a charm!

Tailwind css break-word not working in input field

Now my reactjs input field looked like this.
As you can see the text just keeps going straight and not moving down to the next line. How do I solve this? Here is my code for this input field.
<input className="bg-slate-50 text-main-blue border border-gray-300 drop-shadow-lg text-sm rounded-md my-5 block w-full p-2.5 whitespace-normal word-break:break-word" type="text" name="eventName" placeholder="Event Name" required onChange={event => setEventName(event.target.value)} value={eventName}/>
Change word-break:break-word to break-words
There is no class word-break:break-word in tailwind-css
This is actually work of textarea not text, Use type = "textarea" to get the desired result .
Tailwind Work around:
Use contenteditable prop of div and use break-words property
Code:
<div class="m-4 max-w-full overflow-y-hidden break-words border border-solid border-black text-4xl" contenteditable="true"></div>
Output:
Like : Tailwind Play

React and tailwind: making tooltip

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'],
}
},
}

Tailwind css don't show hover state when input is in focus

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'>

Resources