This current class works fine:
bg-[url('https://d2kcw0xpn7sann.cloudfront.net/[GLOBAL]/sellout-vbox-inner-bg.svg')]
But this one does not work:
lg:bg-[url('https://d2kcw0xpn7sann.cloudfront.net/[GLOBAL]/sellout-vbox-inner-bg.svg')]
Here is the tailwind play link if you wanna checkout for yourself
enter link description here
It is not about media query + background image but pattern. Try this
<div class="h-64 w-64 md:bg-[url('https://picsum.photos/200/300')]"></div>
You'll see it working
This instead does not (image on hover)
<div class="h-64 w-64 hover:bg-[url('https://d2kcw0xpn7sann.cloudfront.net/[GLOBAL]/sellout-vbox-inner-bg.svg')]"></div>
If you hover you class in TailwinPlay you should notice it is generates property but fail to generate class name
But if you replace : or one of brackets [ with any symbol it will generate class properly (of course image link will be broken in that case)
Why does this happen? I'm not entirely sure but I believe it because this image link meet Tailwind's pattern. Most common pattern for Tailwind's arbitrary values is
variant:utility-[value]
e.g.
lg:bg-[red]
your case
lg : bg- [ url(link) ]
lg - modifier
: - separator
bg- - utility
[] - arbitrary value wrapper
url(link) - arbitrary value
Also Tailwind supports variants combination e.g. md:hover:[some]:. If you look closer to your class lg:bg-[url('https://d2kcw0xpn7sann.cloudfront.net/[GLOBAL]/sellout-vbox-inner-bg.svg')] - it may be consider as two variants plus arbitrary value
lg: - variant 1
bg-[url('https: - variant 2
//d2kcw0xpn7sann.cloudfront.net/ - utility
[GLOBAL] - arbitrary value
So I think Tailwind confused here in a regex and don't know what to generate. Submit an issue in Tailwind's repository for that
Mean time if you need to fix it just encode square brackets
lg:bg-[url('https://d2kcw0xpn7sann.cloudfront.net/%5BGLOBAL%5D/sellout-vbox-inner-bg.svg')]
DEMO
Related
I am a noob web developer and made a big mistake.
I am creating a website for a college project, it needs to be responsive. I have tons of CSS written all in px units. But now for responsiveness, I want to convert all the px to rem. It would be a tiring task to do it one by one. Is there any tool that can help me?
I don't know of any tool that would automatically change all px to rems but you can make the changes quickly if you do something like this:
body {
font-size: 0.625rem;
{
Now 1 rem will be equal to 10 px, if you use Vscode you can enter a shortcut Ctrl + F and choose a Use Regular Expression option in Find input.
Then you can type (\d*)?(\d).?(\d*)?px in Find field, and $1.$2$3rem in Replace field.
But be alert, this regex doesn't work for sizes beginning with dot like .5px.
The search bar should look like this:
If you want to learn how this regular expression works click here.
Regex shouldn't be used this way, but...
This function should work but the predicament you are in is usually a one time thing and I normally advise against using Regex in this manner. The function pxToRem():
Finds all occurrences of a number (even with a decimal) adjacent to the letters 'px'.
Then a replacer function takes the number part and divides it by 16
Next it suffixes the new number with 'rem' and replaces the old number and 'px'.
Usage
Open your stylesheet, select as much of the text you need to change and copy it.
Next, paste it on a blank .html or .js file.
Wrap the text in grave marks ``` on a QWERTY keyboard it's the key located upper left hand corner `~
Assign the string to a variable.
Copy and paste pxToRem() code to the same page.
let css = `.box {width: 32px; height: 16px; border: 6px; padding 2.5px;}`;
function pxToRem(CSSString) {
const rgx = new RegExp(/(\d+\.?\d*)px/, 'g');
return CSSString.replace(rgx, (match, n) => (n / 16) + 'rem');
}
console.log(pxToRem(css));
Keep in mind that rem are relative to the font-size set on :root/html and if that font-size happens to be absolute (like the default of 16px) then the styles with rem aren't responsive, but they have the potential to be responsive. If you use a vmin units all rem will react immediately to any changes to the viewport. This not for the faint of heart.
I want to do the equivalent of style="background-image: url(foo.jpg); background-image: -webkit-image-set(url(foo_1x.jpg) 1x, url(foo_2x.jpg) 2x)" in a React component.
React requires me to provide a style object, not a string. But a JS object can't have the same property twice.
How do I get two background-image properties? Also, the order is significant – the image-set needs to be last.
It needs to be an inline style. (Because the URL is a dynamic, interpolated value retrieved from DB.)
I think I initially misunderstood your question. Seems you are looking to create a style object to pass as a prop to a component. You can combine your background images into a single comma separated list. You can use a string template to inject the dynamic image urls at runtime.
const style = {
backgroundImage: `url(${url1}),-webkit-image-set(url(${url2}) 1x, url(${url3}) 2x)`,
};
"spassvogel" on GitHub has a clever solution using CSS variables: https://github.com/facebook/react/issues/20757#issuecomment-776191029
The idea is to set CSS variables in the style property, like
style={ "--url1": "url(1.jpg)", "--url2": "url(2.jpg)" }
and then using them from an external style sheet, like
background-image: var(--url1);
and so on.
Turns out this still wasn't enough to solve everything I wanted – this rabbit hole runs ever deeper – but that's no fault of React's, so I'll consider this a valid answer.
I've seen an angular course telling that :
host-context is used to style elements inside a component, depending on some condition set outside of it.
I've searched the official documentation for it in https://angular.io
but it is not documented
can some one explain the different use cases where I can use this selector for an angular component ?
can some one explain the whole meaning of the -context added to host here ?
without an official documentation, does it mean that when someone give one use case, it mean that it is the only case the thing refers to ?
This answer explains the difference between host and host-context. Here is an example of host-context usage. Suppose you have a component that wraps an input and this input can be used inside two different components - table and dropdown. When inside a dropdown it should occupy 50% of the width, when in table - 100%. Now if you have these two components selectors defined like this:
<my-dropdown>
<my-table>
Then the styles for the input component can be defined like this:
:host-context(my-dropdown) input { width: 50% }
:host-context(my-table) input { width: 100% }
I am writing some protractor tests for an Angular app.
After blurring an input field, a CSS file is reloaded in the application, and I'd like to test if that style has effectively being applied to the elements that uses classes from that CSS file.
I've seen I can read values that are effectively on the styles attribute.
If it is not possible, then is there any way to test some element is rendered correctly using protractor??
element.all(by.css('.input')).get(0).then(function(styleProperty){
styleProperty.clear();
styleProperty.sendKeys('10px', protractor.Key.TAB);
element(by.css('.element')).getCssValue('border').then(function (borderCssValue) {
expect(borderCssValue).toBe('10px');
});
Message:
Expected '' to be '10px'.
border is not a valid css value, since it expands to border-top, border-left, etc. Try
element(by.css('.element')).getCssValue('border-top').then(...)
I have been trying to use the new collection in plone 4.2.1 to filter a set of documents. I can not use the 'and' operator to get the result I need.
For example I have the following documents:
document1, tag 'yellow'
document2, tag 'yellow', 'red'
document3, tag 'red'
How do I filter the collection to show only document 2?
It's not possible with the new-style-collections, because of the missing and/or-operators. :(
It is not possible (the way you want), but I have made a (very ugly) hack (which also has some minor bugs (basically if the tag contains spaces) in collective.ptg.quicksand
1) the tags are added to the content as (css) classes
2) A javascript (or css file) hides those without the right class.
This would mean that document1 has 'div class"yellow"' and document2 has
div class="yellow red". Then you hide all the divs with css (or javascript) and shows document2 by
.red.yellow {display: block} or similar.
You can see the idea here :http://products.medialog.no/galleries/quicksand
(although here I have not made any tags containing both (red and yellow), but that should be just to remove the "split" in the init py file, line 82 here:
init.py">https://github.com/collective/collective.ptg.quicksand/blob/master/collective/ptg/quicksand/init.py