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!
Related
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>
I am trying to apply an onhover effect for a viewport larger than 768px. Below 768px it should look like the elements are "always onhover".
Specifically, on desktop or larger devices in general, there should be a background in a box at onhover. This background should always be shown on mobile, i.e. <768px in my case.
What am I doing wrong?
Here are the snippets.
JSX-Snippet:
import { features } from "../constants"; import styles from "../style";
const FeatureCard = ({ icon, title, content, index }) => (
<div className=
{`
flex flex-row p-6 rounded-[20px]
ss:max-sm:feature-card-small
sm:feature-card
${index !== features.length - 1 ? "mb-6" : "mb-0"}
`}
>
<div className={`
w-[64px]
h-[64px]
rounded-full
${styles.flexCenter}
bg-dimBlue`
}>
<img
src={icon}
alt="star"
className="
w-[50%]
h-[50%]
object-contain"
/>
</div>
<div className="flex-1 flex flex-col ml-3">
<h4 className="
font-poppins
font-semibold
text-white
text-[18px]
leading-[23.4px]
mb-1">
{title}
</h4>
<p className="
font-poppins
font-normal
text-dimWhite
text-[16px]
leading-[24px]
">
{content}
</p>
);
export default FeatureCard;
CSS-Snippet:
.feature-card:hover { background: var(--black-gradient); box-shadow: var(--card-shadow); }
.feature-card-small { background: var(--black-gradient); box-shadow: var(--card-shadow); }
simply apply feature-card as class without viewport specification works as expected; onhover --> background changes
different viewport-specifications (sm:..., ss:max-sm and sm:) and creation of different CSS classes (so there can be no overlap for sure) did not work
sorry if the code block looks like a mess here on stackoverflow. my first post, still learning.
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 have the following toggle input which comes from:
<div className="relative">
<input
data-testid="toggle-input-checkbox"
onChange={handleOnChange}
id={id}
type="checkbox"
className="sr-only"
checked={isChecked}
/>
<div className="base w-9 h-3.5 bg-grey-6 rounded-full shadow-inner" />
<div className="dot bg-white absolute w-5 h-5 rounded-full shadow -left-1 -top-1 transition" />
</div>
and toggle.css:
input:checked ~ .base {
background-color: #46e18c;
}
input:checked ~ .dot {
transform: translateX(100%);
}
is there a way in Tailwind to avoid using custom classes to achieve the desired style?
Use peer modifier, like that:
// Add `peer` to the element which state you want to track
<input type="checkbox" checked class="peer" />
// Then use `peer-*` modifiers on the target element which style you want to change
<div class="peer-checked:text-red-500">Sibling</div>
Playground link
More info in the docs as always
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'],
}
},
}