Could you tell me the way to do something like this in tailwindcss:
first[&>.a-child-class]:text-5xl
I'm trying to style the first element by the way passing classes when it's rendering,I want to change its child's style, but the code above did not work.
I tried to put that classes inside component by default, but I realized, the component need to reusable, so that it is not reasonable.
please help meeeee.
thank you so much, have nice day.
In tailwind 3.1, arbitrary variants can be stacked with built-in modifiers or with each other, just like the rest of the modifiers in Tailwind. You can see the document here. You are missing : after first.
Example:
<div className="first:[&>.a-child-class]:text-5xl">
<p className="a-child-class">first</p>
<p className="a-child-class">second</p>
<p className="a-child-class">third</p>
<p className="a-child-class">forth</p>
</div>
Tailwind Play demo
Related
I need to edit the css of some images in a class, but I'm doing it in a function, I've already done something similar but it directly edits a class, I need to know if I can do the same but edit only the img element of it.
Someone has had a similar issue here. I believe the solution is to use nested classes:
<div class="myParentClass">
<img class="myNestedClass" src="./myPicture"/>
</div>
Then just edit the class as you would normally. If you want to add css to it, you can just use:
.myParentClass .myNestedClass {
property: value;
}
I'm new to SFCC and I was wondering what is the best practices with writing conditional CSS classes in the ISML template. I couldn't find anything in the documentation specifically for element parameters but I have seen some code which works but doesn't look right to me.
<div class="foo <isif condition="${bar}">baz</isif>"></div>
Is this the right way to conditionally add a CSS class?
This is the documentation I've found for isif
https://documentation.b2c.commercecloud.salesforce.com/DOC1/index.jsp?topic=%2Fcom.demandware.dochelp%2FScriptProgramming%2FDemandwareJavaScriptExpressionsinISML.html
This variant is a little bit shorter
<div class="foo ${bar ? 'baz' : 'someting else'}></div>
From my understanding you first need to write the isml condition and inside it the html div, something like this:
<isif condition="${bar}">
<div class="foo">baz</div>
</isif>">
I'm only a couple months new to SFF so forgive me if I'm wrong.
I'm very new to typescript.
I've got a wrapper component, and a bunch of child components that I want to display.
So, something like this is in my parent component html: <component-card [someData]=someData></component-card> works just fine and displays my component. But how do I display a list of them?
Simply doing <li *ngFor="let card of componentCardArray"></li> doesn't work. I tried different ways
Most tutorials just cover simple types, I searched for hours and can't find a way to do it.
Okay, I figured it out! I was forgetting to put the selector after the whole *ngFor directive thing. So, here is how my components are displayed now in my wrapper.html:
<div *ngFor="let card of cardArray">
<component-card [myData]=myData></component-card>
</div>
I am trying to learn React. Why can you not use style inside of a return inside of a component?
The Error:
The style prop expects a mapping from style properties to values,
not a string. For example, style={{marginRight: spacing + 'em'}} when
using JSX. This DOM node was rendered by Home.
<div className="single_slide" style="background-image: url(../images/WinterCalling_2016.jpg);">
I have also tried this also:
<div className="single_slide" style={{background-image: 'url(../images/WinterCalling_2016.jpg)'}}>
or
<div className="single_slide" style={{background-image: url(../images/WinterCalling_2016.jpg)}}>
Any help with this syntax would be greatly appreciated. Other people posted they change style to say styles but that did not seem to work either.
From DOC:
In React, inline styles are not specified as a string. Instead they
are specified with an object whose key is the camelCased version of
the style name, and whose value is the style's value, usually a
string.
So instead of background-image use backgroundImage.
For example:
padding-top ---> paddingTop
padding-left ---> paddingLeft
margin-right ---> marginRight
...
How to specify the inline style?
We need to pass a object to style attribute which will contains all the values in form of key-value pair.
Like this:
<div
style={{
backgroundImage: 'url(../images/WinterCalling_2016.jpg)',
marginTop: 20}}
>
Update:
We can use template literals to pass a variable inside url, like this:
<div style={{backgroundImage: `url(${image1})`}}>
React follow the camelcase convention so you have to change background-image to backgroundImage instead.
For more info, the documentation is here.
If you want to use the style property, please provide a JavaScript dictionary object. However, the style key for background-image is backgroundImage.
<div
className="single_slide"
style={{backgroundImage: 'url(../images/WinterCalling_2016.jpg)'}}
>
Did you try wrapping background-image in quotes?
i.e.
<div className="single_slide" style={{'background-image': 'url(../images/WinterCalling_2016.jpg)'}}></div>
This seems to work for me (at least, when testing with the background-color property; I don't have an image on hand to test with for background-image)
or you can use '!important' with this ....like "background-color:red!important"
Note: And call your js in footer .Because sometimes js reacts first when we call that in header.so call your 'js' in footer.
<div class="yourclass" style="background-color:red;" >your div</div>
style="background-color:red;"
I have two view editmode:"New" and editmode:"edit" and trying to add different style for a paragraph, how to do that?
<p style="margin-left: 165px;margin-top: -23px;">===some messages---</p>
I'm not sure I really understand your question but if you want to add a different style depending on a variable you can do it with ngClass
You can use it like this
<p ng-class="{myClass: var}">Some text</p>
If the variable 'var' is == true then it will add the class 'myClass' to the paraghraph
There is more way how to use it, you can refer to the documentatation
https://docs.angularjs.org/api/ng/directive/ngClass
I think you need to be a little more specific on your question, or perhaps offer up an example.
BUT if I am reading this correctly, I'd suggest giving the separate <p> tags an ID and changing the properties in a CSS file. Make sure to attach the CSS file to your index.html
For more clarification, go HERE and get a better idea of how CSS can help.
If this wasn't helpful, I apologize. The question left a lot to be desired