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.
Related
Doing components for app. For section want to add ability to pass some optional accent color to get output like:
<section style="--mycolor:red">
... //contents
</section>
where "red" can be passed in backend during page build as color name, #hex, "rgba()" or "hsla()" strings. It gives opportunity to use that color to children elements of this section - for border colors, first letters, markers, backgrounds etc.
Simple code^:
<section style={`--mycolor:{color}`};>
does not work because next expects mappable code, but looks like css variables names aren't parse-able in inline syntax.
I can also inject it with <style jsx> statement:
<style jsx>{`
section{
--mycolor: ${ color != '' ? color : 'var(--default-color)'};
}
`}
</style>
but this soluition looks "dirty" for such simple task - adds tons of unnecessary code just to serve one css rule.
I think it can be achieved with something like
<section styles={myStyle}>
where myStyle is jsx style object, but i don't understand how to manually create it (in examples its only imported prop w/o details where did it get from).
So is there a way to achieve simple output like <section style="--mycolor:red"> ?
#juliomalves, thanks for help, final solution is like
style={{ '--mycolor': color }}>
where:
'--mycolor' = css variable name quoted as string (css properties are not quoted !)
color = prop of an element
If using TypeScript with Nextjs, there is very simple solution as blow
{{ ['your css variable name' as any] : your value}}
e.g.
['--rating' as any]: 2.5,
['--star-color' as any]: '#b3b3b3',
incase if you want to insert inline styling using style tag in next.js , you have to insert an object inside the style={} tag as all of the style and classNames in next are considered as object . For example you want to insert the background colour of your div using the insline styling than do the followings
<div style={{ ["background-color" as any]: "#ffc107" }}></div>
do make sure that You use semicolons to insert style properties
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.
I would like to modify quite a large amount of styles on a page through a customisable panel. When a user clicks an option, the content on the page will completely change based on whatever was clicked.
This cannot be a scenario where a class is appended to a parent element and use CSS/LESS to adjust accordingly. For this scenario (for requirement reasons) the CSS needs to be internal on the angular component HTML.
Is it possible to have a value in the component TS like this:
myNewColour: "red"
That can then be used in an internal style sheet that's inside my angular component.html like this?:
<style>
.myContainer { background: myNewColour }
</style>
<!-- HTML Content -->
<div class="myContainer"> Stuff </div>
Any help with this would be appreciated! :)
"Internal in the HTML template" is called inline style ;) Apart from that, you can use ngStyle like so
<tag [ngStyle]="{'background': myNewColour}"></tag>
EDIT if it makes your code too long, what you can do is simply
let customStyle = {
'background': this.myNewColour
};
And in your tag, simply
<tag [ngStyle]="customStyle"></tag>
Is there any way to select elements with same attribute value which I don't exactly have access to? I imagine doing it in way like this:
.first[attribute=.second[attribute]]
I want to use ONLY pure CSS.
no, there is no way to achieve this using css
however, if you need to do something like this you should consider changing your markup (ex. using additional classes) - css is not a programming language
CSS cannot do that. For comparing two elements you need to have access to DOM.
We cannot achieve this through css but this can be done by JavaScript:
window.onload=function(){
var attr = 'elementValue',
elements=document.querySelectorAll('.first, .second');
console.log(
elements[0].getAttribute(attr) ===
elements[1].getAttribute(attr)
);
}
<div class="first" elementValue="1">hello</div>
<div class="second" elementValue="1">hello</div>
Hope this helps
I have the following elements I have applied the Bootstrap btn and default-btn classes to:
<input class="btn btn-default add-to-cart-btn" type="submit" name="addcart" value="Add to Cart" />
<div class="btn btn-default enquire-btn" >Enquire</div>
My CSS selectors look like:
.add-to-cart-btn, .enquire-btn {
//CSS
}
However, only the add-to-cart-btn CSS overwrties the Bootstrap CSS.
Would anyone know why this is or if/why Bootstrap has issues with overwriting styles on divs?
Your CSS must be more specific than the css you are trying to overload.
Your are doing .add-to-cart-btn, .enquire-btn.
So bootstrap might be doing "div.enquire-btn". This is more specific than your CSS.
To overload it div.enquire-btn.
I would try making two different classes.
.add-to-cart-btn {...}
.enquire-btn {...}
Your first issue is that for your input class you've spelt "btn-default" incorrectly. So the bootstrap.css for that class isn't being used, which is why your custom code is working for that and not the other.
Without seeing the rest of your document, I can only assume that your custom css is being loaded before the bootstrap stylesheet which is why that is receiving preference. Try making your custom selectors more specific by adding the btn class to them.
eg;
.btn.add-to-cart-btn, .btn.enquire-btn {
//CSS
}
This is quite strange. But I will try to do this instead to see if it's working or not.
input.add-to-cart-btn, div.enquire-btn {
/* Your Style Here */
}