I need to remove the hover while the checkbox is checked.
Hovering I implemented at the expense of styling based on parent state (group).
Tried method style based on sibling state, but didn't work either
<div className="group">
<input className="peer hidden" id="check" type="checkbox" />
<label
className="
peer/label
group-hover:bg-[#F2F2F2]
group-hover:border-2
group-hover:border-solid
group-hover:border-[#F2F2F2]
flex
justify-center
items-center
peer-checked:bg-[#4DD599]
peer-checked:border-2
peer-checked:border-solid
peer-checked:border-[#4DD599]
w-5
h-5
rounded-full
border-2
border-solid
border-[#E8E8E8]
cursor-pointer
inline-block
"
htmlFor="check">
<svg
className="
group-hover:opacity-100
relative
left-[0.5px]
"
width="11"
height="8"
viewBox="0 0 11 8"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
className="
group-hover:stroke-[#b2b2b2]
stroke-[#f2f2f2]
ease-in-out"
d="M9.29999 1.20001L3.79999 6.70001L1.29999 4.20001"
stroke="#000"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</label>
</div>
- not correct
Related
I have the following accordion item:
<div class="accordion-item mb-5 overflow-hidden rounded-lg border border-jacarta-100 dark:border-jacarta-600">
<h2 class="accordion-header" id="faq-heading-1">
<button class="accordion-button relative flex w-full items-center justify-between bg-white px-4 py-3 text-left font-display text-jacarta-700 dark:bg-jacarta-700 dark:text-white" type="button" data-bs-toggle="collapse" data-bs-target="#faq-1" aria-expanded="false" aria-controls="faq-1">
<span>What is tax and legal advisory?</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="accordion-arrow h-4 w-4 shrink-0 fill-jacarta-700 transition-transform dark:fill-white">
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"></path>
</svg>
</button>
</h2>
<div id="faq-1" class="accordion-collapse" aria-labelledby="faq-heading-1" data-bs-parent="#accordionFAQ">
<div class="accordion-body border-t border-jacarta-100 bg-white p-4 dark:border-jacarta-600 dark:bg-jacarta-700">
<p class="dark:text-jacarta-200">Learn how to create your very first NFT and how to create your NFT collections. Unique.
</p>
</div>
</div>
</div>
This item closes immediately after opening:
I expect to see this:
I have determined that unselecting the following css features via browser inspector gives me what I want:
For some reason the collapse class is added twice when I toggle the accordion. Why is the css created in a style sheet and both inline? I only have one file and it is separate. How can I fix this accordion button?
The problem arises because tailwind adds the collapse property which should be empty. Reference is below:
https://github.com/tailwindlabs/tailwindcss/issues/9663
For short term solution do the following:
In tailwind.config.js add this property:
corePlugins: {
visibility: false
},
In src/css/style.css add this:
#layer utilities {
.visible {
visibility: visible;
}
.invisible {
visibility: hidden;
}
}
I am having trouble positioning background color gray content to right side of my website. Any suggestions?
export function ContentImage(props: ImageProps): ReactElement | null {
const cn = classNames(
'relative sm:py-16 lg:py-0 m-0 right-0',
props.position === 'left' ? 'order-first' : 'order-first sm:order-last',
);
const backgroundCn = classNames(
'absolute inset-y-0 w-full bg-gray-50 rounded-r-3xl lg:right-72',
props.position === 'left' ? 'right-1/2' : 'left-3/4',
props.position === 'right' ? 'rounded-l-3xl' : 'rounded-r-3xl',
);
return (
<>
<div className={cn}>
<div
aria-hidden="true"
className="hidden overflow-hidden sm:block lg:absolute lg:inset-y-0 lg:right-0 lg:w-screen">
<div className={backgroundCn}/>
<svg
className="absolute top-8 left-1/2 -ml-3 lg:-right-8 lg:left-auto lg:top-12"
width={404}
height={392}
fill="none"
viewBox="0 0 404 392">
<defs>
<pattern
id="02f20b47-fd69-4224-a62a-4c9de5c763f7"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse">
<rect
x={0}
y={0}
width={4}
height={4}
className="text-gray-200"
fill="currentColor"
/>
</pattern>
</defs>
<rect
width={404}
height={392}
fill="url(#02f20b47-fd69-4224-a62a-4c9de5c763f7)"
/>
</svg>
</div>
<div className="relative order-last mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:max-w-none lg:px-0 lg:py-20">
<div className="relative overflow-hidden pt-64 pb-10">
<div className="absolute inset-0 h-full w-full">
<Image
src={props.image}
alt={props.imageAlt}
objectFit="cover"
layout="fill"
className={props.className}
/>
</div>
</div>
</div>
</div>
</>
);
}
I am new to Tailwind CSS and am trying to make a responsive search bar. When I increase the width it becomes unresponsive. How can I fix this?
<form className="flex items-center mx-4" onSubmit={submitHandler}>
<label htmlFor="simple-search" className="sr-only">Quick search</label>
<div className="relative w-full">
<input type="text"
ref={inputRef}
autoComplete="off"
id="name"
spellCheck="false" className="outline-none border-2 border-gray-300 text-gray-900 text-base rounded-lg focus:ring-slate-500 focus:border-slate-500 block w-80 pl-4 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white" placeholder="Search"></input>
</div>
<button type="submit" onClick={submitHandler} className="p-3 ml-2 text-sm font-medium text-white rounded-lg focus:outline-none bg-gray-700 ring-2 ring-gray-600 focus:ring-slate-500 focus:border-slate-500"><svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></button>
</form>
If you are talking the whole search bar overflows the viewport on mobile, you can checkout the Responsive Design to apply class conditionally at different breakpoints.
Example
<input className="w-full sm:w-80" />
In this way, your input bar will not be a fix width under sm breakpoint.
Another way is to set a max width to the input bar with a width: 100%;. In this way the input bar will be automatically responsive without using breakpoint condition.
Example
<input className="w-full max-w-xs" />
I dont want the folders not to take the extra height.
The folder object destructered here:
<div className='grid grid-cols-3 gap-4'>
{folders &&
folders.map((folder, index) => (
<Folder folder={folder} index={index} key={index} />
))}
</div>
The Folder.jsx
as you can see it is takig the extra height.
<div
className="border-2 border-gray-400 rounded-lg max-w-xs"
key={index}
>
<div className="flex my-2 mx-1 justify-between">
<p>{folder.name}</p>
<div>
<AddLink folderName={folder.name} />
<button onClick={() => deleteFolder(folder.name)}>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
</button>
</div>
</div>
<p className="flex sm:text-xs justify-end">{folder.date}</p>
my problem is center elements with Tailwind Grid.
GroupTooltipIcon1/GroupTooltipIcon2 are component that contain an svg.
I have to be able to center the svg component within this grid tailwind, can you help me?
<div className="mt-[75px] grid grid-cols-2 gap-2 justify-items-center">
<div>
<div className="iconInsideTooltip">
<GroupTooltipIcon1 width="48px" height="48px" />
</div>
<TextSection
p5={
<>
<div>
Testo 1
</div>
</>
}
/>
</div>
</div>
const GroupTooltipIcon1 = ({
width = "48",
height = "48",
classes = "stroke-white",
}) => {
return (
<svg
className={classes}
style={{ width, height }}
viewBox={`0 0 48 48`}
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_206_1350)">
<path d="M31.6027 22.5623L34.1509 20.0644C38.9389 22.0715 42.8398 19.6492 42.8398 19.6492C48.6345 14.1502 46.9798 6.58116 46.9798 6.58116L40.1784 13.3197C40.1784 13.3197 37.9889 13.3197 36.2775 11.8977C34.8555 10.1801 34.8555 7.99681 34.8555 7.99681L41.6003 1.20169C41.6003 1.20169 34.0313 -0.453049 28.5323 5.34168C28.5323 5.34168 26.11 9.24259 28.117 14.0306L23.373 18.869"
stroke="white"
strokeLinecap="round"
strokeLinejoin="round"/>
</g>
<defs>
<clipPath id="clip0_206_1350">
<rect width="48" height="48" fill="white"/>
</clipPath>
</defs>
</svg>
);
};
export default React.memo(GroupTooltipIcon1);
I have to be able to center the svg component within this grid tailwind, can you help me?
Thank you for help
I found a solution by doing it this way. I hope it will be useful to someone
<div className="mt-[75px] grid grid-cols-2 gap-2 items-start">
<div>
<div className="iconInsideTooltip flex justify-center">
<GroupTooltipIcon1 width="48px" height="48px" />
</div>
<TextSection
customClasses={{ "text-center p-5": "p5" }}
p5={
<>
<div>
Testo 1
</div>
</>
}
/>
</div>
</div>