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.
Related
I have several message boxes and each box has a data-author attribute.
If I want to apply styles to these message boxes in CSS, I can just do:
[data-author="Ben"] {
background-color: blue;
}
But I'm not sure how to do this with Tailwind CSS or whether it's even possible. Any idea?
Thanks
You can do this by adding a variant. In your tailwind.config.js:
Add const plugin = require('tailwindcss/plugin') at the top of the page.
Then in your export add:
plugins: [
plugin(({ addVariant }) => {
addVariant('ben', '&[data-author="Ben"]')
}),
]
All you have to do is then use it how you want: ben:bg-blue-500
You would need to create a new one for each individual author though, or come up with a convention for grouping them by colors.
Updated answer as of 2022/10/30
As of Tailwind v3.2, data attribute variants are supported.
<!-- Will apply -->
<div data-size="large" class="data-[size=large]:p-8">
<!-- ... -->
</div>
<!-- Will not apply -->
<div data-size="medium" class="data-[size=large]:p-8">
<!-- ... -->
</div>
See here: https://tailwindcss.com/blog/tailwindcss-v3-2#data-attribute-variants
you can use the syntax you used above. for implementation problems, you can use the #apply directive which can directly call the utility class from tailwind
In addition, you can also apply a color that is outside the tailwind color by using an arbitrary value
[data-author="Ben"] {
#apply bg-[#bada55];
}
You can learn more about arbitary value in this article:
https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values
This isn't possible with tailwind, you can only target elements by giving them classes. However, you can still write custom CSS and add styles to it with tailwind's #apply:
[data-author="Ben"] {
#apply bg-blue-500;
}
I think you are looking for the best syntax for state selection:
<a class="bg:blue[data-author=Ben]" data-author="Ben">Ben</a>
All native CSS selectors can be applied:
<button class="opacity:.5[disabled]" disabled>Submit</button>
It's enabled with zero configuration and the syntax is very similar to native CSS.
I wanna have transition-transform and transition-shadow, not neither transition-all nor only one. Putting the two not effecting, i couldn't find doc for it, i tried playing around like: transition-[transform, shadow] and obviously didn't work.
Basically, i have cards, you hover on it, it scale up a bit and drops a shadow.
className='hover:scale-105 hover:shadow-2xl transition-transform transition-shadow'
How to put transition properties transform and shadow together?
My app has white and black theme, that's way i don't want just to put transition-all because it flashes when switching the theme.
Only for TailwindCSS v3
Setting a class like transition-[transform, shadow] is interpretted by browsers as two separate classes: transition-[transform, and shadow].
You need to remove the space if possible or replace it by an underscore (_). That said, in your case you simply need to write:
transition-[transform,shadow]
// or
transition-[transform,_shadow]
If you want to customize their durations as well you can write something like:
[transition:transform_1s,shadow_2s]
Based on Adding Custom Styles - TailwindCSS v3
When an arbitrary value needs to contain a space, use an underscore (_) instead and Tailwind will automatically convert it to a space at build-time:
<div class="grid grid-cols-[1fr_500px_2fr]">
<!-- compiled to -- grid-template-columns: 1fr 500px 2fr; -->
</div>
In situations where underscores are common but spaces are invalid, Tailwind will preserve the underscore instead of converting it to a space, for example in URLs:
<div class="bg-[url('/what_a_rush.png')]">
<!-- compiled to -- background-image: url('/what_a_rush.png'); -->
</div>
In the rare case that you actually need to use an underscore but it’s ambiguous because a space is valid as well, escape the underscore with a backslash and Tailwind won’t convert it to a space:
<div class="before:content-['hello\_world']">
<!-- compiled to -- content: var('hello_world'); -->
</div>
I needed to do transition-[transform,box-shadow] not shadow
It is a bit off the question, however since I found this answer while searching for a solution I will give it a try.
To combine 2 transition properties with different durations or timing function, you would need to use Tailwindcss v3 with something like:
before:[transition:_color_0.1s,transform_0.2s_ease-out]
It answers https://stackoverflow.com/users/16945230/a-anvarbekov problem, I would have commented it but SO requires 50 reps to comment now.
Hope it helps some people out there!
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
I have the ng-repeat directive on my div <div ng-repeat="tab in tabs" class="test"></div>
In my css I have this:
.test {margin-right:1%}
.test:nth-child(4n) {margin-right:0}
The nth-child(4n) is not working with my ng-repeat but if I manually put my div without the ng-repeat it works like a charm.
(It's the same with all nth-child combination.
So what did I miss ?
EDIT: My case concerns the use of the ng-repeat combine with nth-child pseudo-element
Thank you in advance.
EDIT 2
This post is old but the problem as the last comment say, is that there is some ng-show.. It was obvious, no excuses.
I've got this structure:
<div id="d1">
Text
<div id="d2">Word</div>
My other text
</div>
Now, I want that on click to #hide:target, div#d2 disappear.
Can I do this with CSS?
You can do this with CSS!
If you change your HTML markup a little bit you can achieve this by using CSS :target
#d2:target {
display: none;
}
<div id="d1">
Text
<div id="d2">Word
My other text
</div>
You can do this with CSS but you need to use javascript to change the CSS (style) of the element.
This solution requires no plug ins (such as jQuery).
<div id="d1">
Text
<div id="d2">Word</div>
My other text
</div>
If you would like it to be completely functionless.
<div id="d1">
Text
<div id="d2">Word</div>
My other text
</div>
You should probably use javascript or jQuery to accomplish this.
$('#object').click(function(){
$('#tohide').hide();
});
To make it specific for this (local scope)
if($('#d2 a').attr('href')=='#hide'){
$('#d2 a').click(function(){
$('#d2').hide();
});
}
But that isn't the proper way to do it. Use classes.
You can do this with jQuery simply:
$(document).ready(function(){
$("a").click(function(){
$("#d2").hide();
});
});
I strongly believe that CSS is for style, and Javascript is for function (and HTML is for markup).
I have made the mistake of using :target and building functionality with CSS where it shouldn't be, and trust me, you are going to make a nightmare for yourself with these bad habits down the road. jQuery is going to be your best friend in situations like this. It works on ALL browsers (that support javascript) and you won't have your functionality breaking down in edge-cases and your users pissed off. Do what Jack says and use some simple jQuery. you can also use .addClass and .removeClass to change the css in other ways than just hide/show.
With css I think it isn't possible, but you could use this code that I am letting here, it is based in javascript, that can be really usefull in this situations. I am not so good at explaining but for these type of questions I recomend learning Javascript.
<div id="d1">Text</div>
<div id="d2">Word</div>
<a onclick="hide()">My other text</a>
This is your HTML file for now, I created a DOM event, when you click the , a function called hide() will run in our js file. TIP: Don't forget to link the html with de javascript file. You can do that with:
<script src="yourfilegoeshere"><script>
Now let's head in the css:
#d1 {
opacity: 1;
}
#d2 {
opacity: 1;
}
Based with this css both of them are visible. Now let's go to our Js file:
function hide() {
var d2 = document.getElementById('d2')
d2.style.opacity = '0'
}
Now if you click in your a the d2 will not be visible
I hope I helped!