I have this background in simple css:
background: linear-gradient(152deg,#fff,#00bfd8 42%,#0083f5);
I want to add it into the tailwind css:
<section class="relative bg-[here] table w-full py-36 lg:py-44">
For equal color stops use tailwind's bg-gradient-to class
bg-gradient-to-br from-white via-[#00bfd8] to-[#0083f5]
If you want to use your custom colour stops use arbitrary values
bg-[linear-gradient(152deg,_#fff,_#00bfd8_42%,_#0083f5)]
Use "_" underscore for spaces : ref
To use tailwind colors in custom gradients: replace hex code with theme(colors.blue.500)
Theme()
Check it out in this playground
Related
<Button className={`white-color-text bg-gradient-to-r from-[#f02aa6] to-[#ff6f48] hover:"bg-gradient-to-r from-[#fff] to-[#ff6f48]" bodyS my-4`} text={"Get Started"} />
I cant see to change the background color (which is linear) on active in Tailwind . Any suggestions?
You are using the hover modifier with the wrong syntax. Instead of wrapping your hover modifier (hover:"bg-gradient-to-r from-[#fff] to-[#ff6f48]"), you need to apply the modifier to each segment of your gradient utility:
<div class="bg-gradient-to-r from-[#f02aa6] to-[#ff6f48] hover:bg-gradient-to-r hover:from-[#fff] hover:to-[#ff6f48]">Get Started</div>
Tailwind-play
There's an explanation on how to apply modifiers on each class in the documentation, for example, for the Gradient Color Stops.
I'm trying to add a pipe to my menu links, using tailwind ::before pseudo element but it doesn't work.
<a className='text-xl font-normal before:content-["|"] before:pl-8 bg-white font-open-sans'>home</a>
The above result in the following
How can I add the pipe properly with padding/margin between text and pipe?
You just need to add the padding to the other side of the pipe, changing before:pl-8 to before:pr-8.
Working version here: https://play.tailwindcss.com/G5IqVTI5Rg
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
I am working on canvas with Konvajs. I have a circle layer which I want to animate. Is there a way to add a custom CSS to button to make it blink. Below is the code section for Konva config.
<div class="container">
<v-stage :config="stageConfig" >
<v-layer>
<v-image :config="imageConfig1"/>
<v-circle :config="{radius:13,fill:'red',x:20,y:29}"/>
<v-text :config="{text:'5G Camera', x:42, y:15, fontSize:35, fontStyle: 'bold', fill:'white', stroke:'black',strokeWidth:'2', shadowEnabled:'true'}"/>
</v-layer>
</v-stage>
</div>
You can't use CSS to style Konva shapes. CSS is for DOM elements, Konva nodes are not DOM elements.
If you want to style shapes, you need to set properties directly. Such as fill.
If you want to animation shape, you can use some Konva methods such as Konva.Tween, node.to() method or Konva.Animation.
Take a look into Konva.Animation + Vue demo
I have an image (combination of blue and white in color) and background colour(white) . On click of the div, I need to reverse the colors. (background color to blue) and image(blue part of the image to white colour and white part of the image to blue colour).
Html :
<div class="col" ng-click="onHomeButtonClick()">
<img src="images/iconHome.png" class="menu-icons"><br>
</div>
Js code :
this.onHomeButtonClick = function($event){
$event.target.style.backgroundColor="DarkSlateBlue";
}
Tried so far :
Using $event.target.style.backgroundColor="DarkSlateBlue"; I am just able to set the background colour.But how do i invert the colors.
Try to use the CSS deklaration:
This could be like this:
HTML:
<img src="images/iconHome.png" id="imageToInvert" class="menu-icons">
CSS:
#imageToInvert:hover {
filter: invert(100%);
}
Hope this helps.
Not sure that filter:invert(100%) is actually what you're asking for but if it is as indicated in a comment you made, just make a class with that style. Such as .filterClass{filter: invert(100%)} then add that class in your click event using this element.className +="filterClass";
I hope this may help you Fiddle this one is for the div with background color you can use the same technique and change the image color too.