According to documentation, this is how you style a button with Tailwind:
<button class="py-2 px-4 bg-green-500 text-white rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75">
Click me
</button>
This shouldn't require any special configuration.
But when I try this code in Tailwind Play, the button doesn't even get rendered.
What gives?
Many thanks in advance.
Related
I've got the tailwind UI toggle working. However the toggle it self doesn't do anything in a form. It needs a Checkbox. Hence I'm trying to add a checkbox that checks and unchecks when the toggle is clicked.
I gave it the right data-model, but nothing happens.
<div>
<div class="flex items-center justify-between" x-data="{ on: false }">
<span class="flex flex-grow flex-col">
<span class="text-sm font-medium text-gray-900" id="availability-label">Books</span>
<span class="text-sm text-gray-500" id="availability-description">Yes gibe me a free book</span>
</span>
<button type="button"
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 bg-gray-200"
role="switch" aria-checked="false" x-ref="switch" x-state:on="Enabled" x-state:off="Not Enabled"
:class="{ 'bg-primary-600': on, 'bg-gray-200': !(on) }" aria-labelledby="availability-label"
aria-describedby="availability-description" :aria-checked="on.toString()" #click="on = !on">
<span aria-hidden="true"
class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out translate-x-0"
x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'translate-x-5': on, 'translate-x-0': !(on) }"></span>
</button>
<input type="checkbox" style="display:none" name="free_books" x-model="on">
</div>
</div>
In my web project, I'm trying to reproduce the following card:
When the Card is not active it is characterized by the fact that the image is always in the center even though the title has a dynamic height, and when its active (i.e it has the blue background) I don't want to change the height of the card but just to push the image up a little bit to add that extra space where the new round arrow button will appear and I'm completely unable to make this happen.
I'm using tailwind in a Nextjs project but plain and simple html and css would also be fine.
You could use flexbox to align the content to the bottom of the card and give the text a fixed height when inactive to keep it at the same position regardless of whether it spans one or two lines.
To move everything up for the arrow you could render an arrow element below the text when he card is active and it would automatically push everything up. You could remove the fixed height of the text when active so there is no gap between the text and arrow. I have created an example here https://play.tailwindcss.com/7h1IY8alDQ.
Here is the code:
<div class="flex h-screen space-x-4 bg-blue-100 p-6">
<!-- card 1 -->
<div class="group flex h-32 w-32 flex-col items-center justify-end space-y-2 rounded-lg border-4 border-white bg-white p-2 hover:border-[#5691C3] hover:bg-[#80B2D5]">
<!-- icon -->
<div class="h-10 w-10 bg-gray-300 group-hover:bg-white"></div>
<!-- title -->
<p class="h-8 text-center text-xs text-black group-hover:h-auto group-hover:text-white group-hover:underline">Motor</p>
<!-- arrow -->
<div class="relative hidden h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 border-white text-sm group-hover:flex"></div>
</div>
<!-- card 2 -->
<div class="group flex h-32 w-32 flex-col items-center justify-end space-y-2 rounded-lg border-4 border-white bg-white p-2 hover:border-[#5691C3] hover:bg-[#80B2D5]">
<!-- icon -->
<div class="h-10 w-10 bg-gray-300 group-hover:bg-white"></div>
<!-- title -->
<p class="h-8 text-center text-xs text-black group-hover:h-auto group-hover:text-white group-hover:underline">Workmen Compensation</p>
<!-- arrow -->
<div class="relative hidden h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 border-white text-sm group-hover:flex"></div>
</div>
</div>
I got some starter code from a tutorial and I've been struggling to set the correct size. I've tried to find solutions via documentation but I feel like I'm missing something very basic. The issue that I am having is that the size of the box changes based on the content that is inside. I'd like a definitive size set regardless of the inside content. This is my code for the section:
<div className="flex flex-wrap -m-4">
{projects.map((project) => (
<a
href={project.link}
key={project.image}
rel="noopener noreferrer"
target="_blank"
className="flex w-1/2 h-full p-4">
<div className="flex relative">
<img
alt="gallery"
className="absolute inset-0 w-full h-full rounded-2xl object-cover object-center border-4 border-white"
src={project.image}
/>
<div className="px-8 py-10 relative z-0 w-full rounded-2xl border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
<h2 className="tracking-widest text-sm title-font font-medium text-orange-700 mb-1">
{project.subtitle}
</h2>
<h1 className="title-font text-lg font-medium text-white mb-3">
{project.title}
</h1>
<p className="leading-relaxed">{project.description}</p>
</div>
</div>
</a>
))}
</div>
Thank you!
On your a tag you have className="flex w-1/2 h-full p-4"> updating the h-full to be the specified height that you want should do the trick. The tailwind numbers will provide a value in em I believe. To get these to be a px value you can write the style like this: h-[50px] but include your desired height in the square brackets instead of teh 50px.
I am currently facing a weird issue with a project of mine
I am attempting to make a button change its color when I hover over it and also change the text's color inside of the button
This works perfectly until I hover over the border button which triggers the hover event for the whole button but not the text inside of it
<a class="min-w-full lg:min-w-[0px]" target="_blank" href="https://stackoverflow.com">
<button
type="button"
class="border-4 border-github rounded-[12px] min-w-full lg:min-w-[0px] mx-1 mb-4 lg:mb-2 py-2 hover:bg-github transition duration-200 ease-in-out">
<span
class="w-full h-full select-none text-github text-2xl lg:text-3xl lg:px-
[6.625rem] font-semibold hover:text-background transition duration-100">
check this out
</span>
</button>
</a>
How could I make the border of a button not trigger the hover event ?
Or are there any other better ways to do what I am trying to do?
group-hover
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state
Try this:
<a class="min-w-full lg:min-w-[0px]" target="_blank" href="https://stackoverflow.com">
<button type="button" class="group border-4 border-github rounded-[12px] min-w-full lg:min-w-[0px] mx-1 mb-4 lg:mb-2 py-2 hover:bg-github transition duration-200 ease-in-out">
<span class="w-full h-full select-none text-github text-2xl lg:text-3xl lg:px- [6.625rem] font-semibold group-hover:text-background transition duration-100"> check this out </span>
</button>
</a>
I have a web app I'm building out in Rails 5, Ruby 2.4. Im using Tailwindcss as my design framework.
I have a hero image (below) in which I'm using a tailwind like alert as a banner to advertise a new web store for merch. It sits exactly where I want it to im the hero, however on page scroll it floats over my fixed nav, and in mobile view with the nav menu dropped down it floats overtop of it blocking the nav view.
Im not too sure how to fix this so it sits behind the nav and dosnt obstruct the nav functionality.
link to site for viewing
Loadlead website
my hero image code:
<div class="flex flex-wrap sm:block bg-transparent" id="header-hero">
<div class="container mx-auto">
/* BANNER THATS CAUSING ISSUES */
<div class="bg-transparent text-center py-4 lg:px-4">
<div class="p-2 bg-load-lead-green items-center text-white leading-none lg:rounded-full flex lg:inline-flex opacity-75 border-b-4 border-black md:mt-8">
<span class="flex rounded-full bg-blue uppercase px-2 py-1 text-xs font-bold mr-3 border-b-2 border-black">New</span>
<span class="font-semibold mr-2 text-left flex-auto">Pre-order LoadLead gear in our new web store</span>
<svg class="fill-current opacity-75 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"/></svg>
</div>
</div>
/* END BANNER */
<div class="flex py-8 px-4 sm:px-8">
<div class="w-full py-8">
<p class="text-4xl text-black font-sans font-bold mb-1">Trucking. Simplified</p>
<p class="text-xl text-black sm:text-lg mb-6 font-sans font-semibold">Minimize your trucks downtime & keep your loads moving!</p>
<a class="bg-blue text-white no-underline uppercase text-sm px-4 py-2 rounded-full font-bold hover:bg-blue border border-b-4 border-black hover:border-transparent cursor-not-allowed" href="/#">Take a Tour</a>
<a class="bg-load-lead-green text-white no-underline uppercase text-sm px-4 py-2 rounded-full font-bold hover:bg-load-lead-green border border-b-4 border-black hover:border-transparent cursor-not-allowed" href="/#">Join the Community</a>
</div>
</div>
</div>
</div>
Any help here would be greatly appreciated!
You need to have your hero as relative and the banner as absolute positions.