I wanted to place an absolute element behind a relative element. I have mentioned the z-index and also the position for the respective elements but its still not working.
This is what i had tried. I am using tailwind css.
const Searchbar: React.FC<SearchbarProps> = ({}) => {
const [toggle, setToggle] = useState(false);
const [dropdown, setDropdownToggle] = useState(false);
return (
<form className={`search flex items-center basis-9/12 pl-5 z-20 relative ${toggle ? 'dark': ''}`} >
{/* ICON */}
<svg className="ico-svg" viewBox="0 0 20 20" width="20">
<path d="M20,8c0-4.4-3.6-8-8-8C7.6,0,4,3.6,4,8c0,1.9,0.6,3.6,1.7,4.9L0,18.6L1.4,20l7.1-7.1l-0.2-0.2 C6.9,11.6,6,9.9,6,8c0-3.3,2.7-6,6-6c3.3,0,6,2.7,6,6c0,3.3-2.7,6-6,6c-0.7,0-1.3-0.1-1.9-0.3L10,13.7l-1.5,1.5l0.4,0.2 c1,0.4,2.1,0.7,3.2,0.7C16.4,16,20,12.4,20,8z"></path>
</svg>
{/* INPUT */}
<input className='basis-9/12 pl-3 h-[48px] text-sm font-normal self-stretch'
onClick={() => setToggle(!toggle)}
type="text" name="search" id="search" placeholder='Search websites, elements, courses...'/>
<div className="dropdown flex items-center justify-end basis-3/12">
{/* TEXT */}
<p className='uppercase mr-9 font-light text-xs'>in</p>
{/* DROPDOWN */}
<button className={`flex items-center h-[48px] justify-between basis-6/12 px-5 ${dropdown ? 'active': ''}`} onClick={(e) => {
e.preventDefault();
setDropdownToggle(!dropdown)
}
}>
<p className="capitalize text-sm font-medium">inspiration</p>
<svg className="dropdown__arrow" viewBox="0 0 20 20" width="12">
<path d="M1.6,4.1c-0.4,0-0.9,0.2-1.2,0.5c-0.7,0.7-0.7,1.7,0,2.4l8.4,8.4c0.7,0.7,1.7,0.7,2.4,0L19.5,7 c0.7-0.7,0.7-1.7,0-2.4c-0.7-0.7-1.7-0.7-2.4,0L10,11.8L2.8,4.6C2.5,4.3,2.1,4.1,1.6,4.1z"></path>
</svg>
</button>
{/* DROPDOWN LIST */}
<div className={`dropdown__list capitalize px-5 pt-2 pb-5 text-sm font-normal ${dropdown ? 'active' : ''}`}>
<ul>
<li className='pt-3'>Inspiration</li>
<li className='pt-3 pl-3'>websites</li>
<li className='pt-3 pl-3'>elements</li>
<li className='pt-3 pl-3'>collections</li>
<li className='pt-3'>blog</li>
<li className='pt-3'>courses</li>
<li className='pt-3'>directory</li>
</ul>
</div>
</div>
{/* SUGGESTIONS */}
<div className="search__suggestions z-10 absolute">
</div>
</form>
);
}
This is how its behaving:
Actual behaviour
Instead of this:
Expected Behaviour
As you can see i have a form tag that is relative places and i also have a div with the class "search__suggestions" that is placed absolutely. I have also provided the appropriate index to the tags, but for some reason its not working. Anyone knows why its behaving this way?
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'm trying to recreate this with tailwindcss however when I implement this the hover effect is not working.
export default Home(){
return(
<a
href={item.href}
className="px-3 py-2 text-sm font-medium after:origin-center after:scale-x-0 after:border-b-2 after:transition-all after:duration-500 after:ease-in-out after:content-none hover:after:scale-x-100 hover:after:border-white"
aria-current="current item"
>
Item name
</a>
)
}
I created a working example using Tailwind following your desired result.
You can check the live demo here: stackblitz
The environment is installed following Tailwind official guide.
Hope this will help!
Example:
<div className="flex flex-col gap-6 justify-center items-center">
<a
href="#"
className="inline-block text-4xl text-slate-400 uppercase visited:text-slate-400 hover:text-slate-400 after:block after:origin-center after:scale-x-0 after:border-b-4 after:transition-all after:duration-500 after:ease-in-out hover:after:scale-x-100 hover:after:border-sky-500"
aria-current="current item"
>
Hover effect center
</a>
<a
href="#"
className="inline-block text-4xl text-slate-400 uppercase visited:text-slate-400 hover:text-slate-400 after:block after:origin-left after:scale-x-0 after:border-b-4 after:transition-all after:duration-500 after:ease-in-out hover:after:scale-x-100 hover:after:border-sky-500"
aria-current="current item"
>
Hover effect left
</a>
<a
href="#"
className="inline-block text-4xl text-slate-400 uppercase visited:text-slate-400 hover:text-slate-400 after:block after:origin-right after:scale-x-0 after:border-b-4 after:transition-all after:duration-500 after:ease-in-out hover:after:scale-x-100 hover:after:border-sky-500"
aria-current="current item"
>
Hover effect right
</a>
</div>
This puzzles me a lot. I'm writing a Laravel application, and I want to draw a circle besides a description. The circle must be either gray or yellow depending on a condition, so my code is:
...
<ul>
#foreach ($section->lessons as $lesson)
<li class="flex items-start mb-1">
<span class="inline-block w-4 h-4 mt-1 mr-2 {{ $lesson->complete ? 'bg-yellow-400' : 'bg-gray-500' }} rounded-full"></span>
<a
class="cursor-pointer"
wire:click="changeLesson({{ $lesson }})"
>{{ $lesson->name }}</a>
</li>
#endforeach
</ul>
...
This code works, no problem with it, but with the display. Check the span Tailwind classes: "inline-block w-4 h-4 mt-1 mr-2 bg-yellow-400 }} rounded-full", this should draw a perfect circle (w-4 h-4) right?
Now see what it displays:
As you can see, for the one line descriptions, the circle is perfect, but for the ones that have two lines, it becomes sort of an oval, and it moves the margin slightly to the left
Why this happens and how can I fix it?
You have a flex container so you don't need inline-block on the spans but flex is also the reason your long line span element is getting squashed.
A simple fix is to add flex-shrink-0 to those spans.
Here it is working on Tailwind Play https://play.tailwindcss.com/H0kZFOVNaX
<ul>
<li class="flex items-start mb-1">
<span class="w-4 h-4 mt-1 mr-2 bg-gray-500 rounded-full"></span>
<a
class="cursor-pointer"
wire:click="changeLesson({{ $lesson }})"
>Some regular sized content</a>
</li>
<li class="flex items-start mb-1">
<span class="w-4 h-4 flex-shrink-0 mt-1 mr-2 bg-gray-500 rounded-full"></span>
<a
class="cursor-pointer"
wire:click="changeLesson({{ $lesson }})"
>Some extra large XXXL sized content that has way too long of a title and can smash an inline element.</a>
</li>
</ul>
I'm a complete Tailwind css newbie and am playing with it in a small project.
What is the idiomatic way to toggle the UI state of a tab? Here are a couple tabs taken straight from the Tailwind website:
<nav class="-mb-px flex space-x-8" aria-label="Tabs">
<a class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
Tab 1
</a>
<a class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
Tab 2
</a>
<a class="border-indigo-500 text-indigo-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
Tab 3
</a>
</nav>
As you can see, Tab 3 is the "selected" state. What if I want to change selection to Tab 1. I'd have to swap a bunch of the utility classes (border-indigo-500 into border-transparent, etc.).
With vanilla CSS, you might define a css class called .selected that would override a normal tab's css and toggle that class on the html element, but I don't think that's the idiomatic way that tailwind recommends here.
Sorry if this is a super newbie question. Thanks.
For this, you can maintain three variables.
One that contains the selected tab value:
let selectedTab = "tab1"
And the other classnames of an active and non-active tab. Something like this:
const active = "border-indigo-500 text-indigo-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
const nonActive = "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
Based on the click you change the value of the selected tab to its respective tab value and change the className of the HTML according to it.
Your HTML will look something like this
<nav class="-mb-px flex space-x-8" aria-label="Tabs">
<a class={selectedTab === "tab1" ? active : nonActive}> Tab 1 </a>
<a class={selectedTab === "tab2" ? active : nonActive}> Tab 2 </a>
<a class={selectedTab === "tab3" ? active : nonActive}> Tab 3 </a>
</nav>