I'm using TailwindCSS for a project, and I'm stuck on a weird interraction.
The result I'm looking for is to have a ring outside a button when I hover it, but using the ring classes from Tailwind, I can't get the ring on hover, yet it work using focus.
Before filling a bug report, I thought maybe one you guys might see a mistake on my part before ?
I made the smallest possible codepen to reproduce my issue : https://codepen.io/Pymous/pen/bGBQKPO
The CodePen contains this simple code :
<button class="mt-4 ml-4 px-8 py-2 text-white bg-yellow-500 ring-offset-2 ring-transparent ring-2 focus:ring-red-500 hover:ring-red-500">
Connexion
</button>
Thanks !
Hover is not enabled by default according to tailwindcss's documenation.
By default, only responsive, focus-within and focus variants
are generated for ring width utilities.
You can control which variants are generated for the ring width
utilities by modifying the ringWidth property in the variants section
of your tailwind.config.js file.
For example, this config will also generate hover and active variants:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
ringWidth: ['hover', 'active'],
}
}
}
https://tailwindcss.com
Related
I was wondering if there is a way to chain multiple tailwind css classes on a single hover instance on an html element instead of using multiple hover instances.
For instance instead of this
<button class="hover:bg-blue-900 hover:text-white"></button>
whether you can have this or something else
<button class="hover:bg-blue-900:text-white"></button>
No there isn't. As from the docs(https://tailwindcss.com/docs/hover-focus-and-other-states), you can see they themselves add multiple classes for focus/hover.
However you can create reusable styles to counter this
Sadly it seems not. Maybe something that should be suggested to the team
I was trying to do something similar, i wanted the text to change color when hover the div.
searching in the docs i found the 'group' that helped me:
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state
i tried different types of hover like:
hover:bg-green-600 text-gray-50
hover:[bg-green-600 text-gray-50]
hover:(bg-green-600 | text-gray-50)
Maybe you can try wrapping the button in a div and add the group class
my code before, did not work like this
<Link to='/home'>
<div className="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer hover:(bg-green-600 text-gray-50)">
<span className="text-[15px] ml-4 text-gray-500 font-bold">Home</span>
</div>
</Link>
after using gruop
<Link to='/home' className='group'>
<div className="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer group-hover:bg-green-600" >
<span className="text-[15px] ml-4 text-gray-500 group-hover:text-gray-50 font-bold">Home</span>
</div>
</Link>
with group when i hover the div it also change the span text color, like this the cursor don't need to be right on top of the word to make hover work.
but I still wish there was a way to put more than one class on the same hover, I hope they add it in the future...
hope it may help
I stumbled upon the same issue and was going to write a Tailwind plugin for that but it turns out that it's hard to mess with the rules they have set, you can only extend it by adding new variants and utilities but cannot do something like hover:(text-white bg-red-500).
However, I did find out about twin.marco that has this variant groups feature so check do check that out.
Is it possible to use transforms with the group-hover pseudo selector? I can get group-hover to work for things that aren't transforms like text color, but I can't get it to work while doing things like translate-x or scale. Below is an example. Neither of the group-hover transforms on the inner div work for me but the group hover for background and text work.
<div class="group">
<div id="inner" class="transform group-hover:translate-x-1/2 group-hover:scale-110 group-hover:bg-blue-200">
<p class="group-hover:text-white">some text</p>
</div>
</div>
Am I doing something wrong? here's a codepen of it in action
See, as per the documentation group-hover is enabled for a few core plugins which does not include transform.
So to support transform too, you will have to enable group-hover variant for it in the tailwind.config.js, as explained in the documentation.
The documentation is not that detailed.
To make group-hover work with transform -> translate you have to enable it in fact for the translate attribute - not transform.
At least this is what worked for me in tailwind v2.2.16.
You can do it like this (so it will work both for group-hover and hover):
config: {
variants: {
extend: {
translate: ['group-hover', 'hover'],
},
},
}
in your tailwind.config.js file.
Is it possible to set transition to trigger only one way for the v-btn?
I created button with text that changes depending on the condition and use transition to change it smoothly. However if i change view and condition changes the transition reverses and it looks glitchy. I dont want this behaviour, and only would like to have transition trigger one way.
<v-btn
class="ma-1"
#click="addToList"
width
:disabled="isAdded"
>
<span v-if="!isAdded">
Add to List
</span>
<v-slide-x-transition>
<span v-if="isAdded">
Added
<v-icon>
mdi-check
</v-icon>
</span>
</v-slide-x-transition>
</v-btn>
Here is example how this works:
https://codepen.io/pokepim/pen/VwKNzxj?editors=101
In the carousel when you switch between slides you can see that button reverses back and it extends width and generally this looks somewhat glitchy. Is it possible to only keep transition when clicking on the button in this case (so no backward transition from disable to active button)?
EDIT:
I tried Dan's answer, and while it works fine with the carousel case it still does not solve glitchy transition in general, here is the example of same behaviour using method instead of computed property:
https://codesandbox.io/s/vuetifyvuex-store-testing-ground-wyl4n?file=/src/App.vue
There's only one isAdded condition being used for all of the slides. When that condition is false on the next slide, it gets set before the animation is finished and it looks bad.
Use a method instead of a computed for isAdded so each slide can maintain its own button state:
methods: {
addToList() {
this.btnlist.push(this.model);
},
isAdded(i) {
return this.btnlist.includes(i);
}
}
And change all isAdded in the template to isAdded(i).
Here's the updated demo
To your edit, try the hide-on-leave attribute on the transition:
<v-slide-x-transition hide-on-leave>
<span v-if="isAdded(this.idUn)">
Added
<v-icon> mdi-check </v-icon>
</span>
</v-slide-x-transition>
I am referring to the React Lazy Load Image Component.
I need to tweak the display attribute of the image I am rendering with this library. But can't seem to find any way.
I tried to wrap the component with a div and use style={{display: 'inline'}}, but it didn't work.
<div className="ui image" style={{ display: 'inline' }}>
<LazyLoadImage
src={src}
effect="blur"
/>
</div>
I am using this portion of code inside a <Card/> component. The default css of the library contains display: inline-block which is making my image have an extra border at the bottom. I don't want it.
P.S.
I am using Semantic UI for my entire project. I want to use whatever style Semantic is providing me. That's why I need to teak the display attribute of this library.
When I add buttons to my Angular Datatables, it creates them with default themeing, which is causing the buttons to look different from the rest of my page (see Column Visibility button in the image below):
I have tried playing with CSS to get the buttons to mimic the Bootstrap buttons (like the other buttons on the page), but I'm not having much luck. I tried adding my CSS values to button.dt-button, div.dt-button, a.dt-button {} but had to override everything with !important which didn't seem right to me.
I also tried adding bower_components/datatables/media/css/buttons.bootstrap.css to my page <links> but it also had no effect.
Is there a pretty straight forward way to achieve this?
I use to remove the dt-button references. dt-button seems to cause all the trouble. It is dataTables own attempt to style different tags to a unified button look and this conflicts with bootstrap. So to have dataTables buttons that looks like the rest of the BS3 layout I add bootstrap classes to className :
.withButtons([
{ extend: 'pdf',
className: 'btn btn-sm btn-primary'
}
])
and remove any dt-button reference in initComplete :
.withOption('initComplete', function() {
$('.dt-button').removeClass('dt-button')
})
This ensures that the buttons is pure BS with no extra styling. I am sure this is not the "correct" way to do this. In theory there should be a working combination of withBootstrap() and withButtons() along with adequate package versions, but have never been able to find one successfully. I get all packages by CLI and do not want to mingle around with packages manually.
datatables.net
datatables.net-bs
datatables.net-buttons
angular-datatables
I believe the .net packages have low priority compared to dataTables download builder, cdn and github. They are not in sync.
You will need to adjust accordingly but in my case I added:
display: inline;
to the css of the elements on the left that are floating above. In my case (jQuery / Rails / Bootstrap) I was adding Buttons and the Bootstrap theme messes things up too (as mentioned above).
For bonus points you can override the default CSS classes on the elements:
https://datatables.net/reference/option/buttons.dom
So in my case (CoffeeScript notation):
$ ->
locations = $('#locations').dataTable
dom: 'Bfrtip'
ajax:
url: $('#locations').data('source')
type: 'GET'
order: [[ 3, 'desc' ], [ 2, 'desc' ]]
processing: true
serverSide: false
responsive: false
buttons:
dom:
container:
className: 'btn-group'
button:
className: 'btn btn-primary btn-outline'
This gets rid of the dt-buttons and dt-button which allows the base BS CSS to work properly.
<div class="btn-group">
<a class="btn btn-primary btn-outline buttons-copy buttons-html5" tabindex="0" aria-controls="locations" href="#">
<span>Copy</span></a>
<a class="btn btn-primary btn-outline buttons-pdf buttons-html5" tabindex="0" aria-controls="locations" href="#">
<span>PDF</span></a>
</div>
This then output the proper BS buttons.