I tried adding a background image property to my tailwind.config.js file by writing the path to my image which uses backslashes (am on windows). I tried escaping with double backslashes (\) but it doesn't seems to work. Here's a snippet of my code:
I don't think the public folder is needed, as it's considered as the root folder.
You should use regular slashes, no need to put backslashes or escape them. source: Tailwind docs
Also, is that heroImage needed multiple times in the project? If not, you can try using arbitrary values instead.
tailwind.config.js generally uses CSS values and functions. The url() function should take a value that uses forward slashes, like any URL you'd type into your browser.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/url
Related
I have a next.js project, inside pages I created a file called [collectionId].jsx but tailwind css does not work? When I change the name to [collectionId].js removing the x it works? My question is why does tailwind css not work, if it work in other files I have ending with .jsx could be because of the brackets? I'd appreciate any insight to this. Thanks
Your config is likely looking for a glob path of pure text with a file with extension .jsx and isn't interpreting the ] as part of the text name.
If you need the brackets you probably need to update how it globs files to include the brackets.
This is a bit hard to solve without seeing the webpack or tailwind config though.
i have a folder filled with svg's (path: src/assets/icons).
The css function url() is implemented like this:
url("/assets/icons/CheckSmall.svg");
It finds the svg data, when I run ng serve.
But when I build my Project, it cant find the svg data. Although it exists in the folder dist/myApp/assets/icons/CheckSmall.svg
I have read through many forums and discussions and tested a few things (One of many discussions).
For example i used different pathing "strategies":
1. url("^assets/icons/CheckSmall.svg")
2. url("~/assets/icons/CheckSmall.svg")
For number (1) it seems like it is not a supported feature in Angular, thats why i dont want to use it. And for (2) it copies my Assets and puts them into the folder dist/myApp.
Is there a viable(supported or documented) alternative? Or can I somehow adjust the angular.json.
Try using the following syntax:
background-image: url('../../assets/icons/<file-name>')
Where the route is relative to the css file
If you're setting non-default baseHref or deployUrl flags as part of the build that can also affect it
Try using that approach in styles.scss or in the relevant component, without the scss variable. The relative path won't be correct when the scss variable is used in different folders
Atom recently stopped highlighting any embedded ruby inside my .html.erb files, so now they look like this:
However, if I change the grammar being used for the editor file to HTML (Rails) instead of ERB, everything goes back to being highlighted the way it should be:
But every time I open an ERB page it defaults to using the ERB grammar from the language-ruby package, which doesn't highlight any of the ERB, and I don't want to have to manually change the grammar each time I open an ERB file.
Is there any way to change which grammar Atom uses by default for a given file type? If not, are there any other workarounds to fix this and get ERB to start rendering embedded ruby in color again?
Before we get down to the actual question, how to change the default highlighting of a specific syntax, please check that this isn't related to the new treesitter parser.
If you really want to change the default syntax, you can add the following to your Atom configuration (config.cson):
"*":
core:
customFileTypes:
"text.html.ruby": [
"*.erb"
]
Make sure not to overwrite your existing configuration and nest the customFileTypes key correctly, since CSON is an indentation-sensitive format.
I use Brackets as my text editor. How can I compile and convert my LESS code into CSS?
The following is a link from where I downloaded the LESS compiler but I don't know how to convert my code into CSS.
https://github.com/jdiehl/brackets-less-autocompile
You can install less-autocompile extension directly in Brackets using the second icon at the right of the editor. (I guess you are using last version of Brackets).
By default, when you save a less file, it will look for every .less file and compile them to .css files.
If you want to produce a single .css file, you'll have to add lines at the top of your less files.
Is there a convenient way to have SASS automatically prepend a comment to the beginning of each CSS output file? Specifically, when using Compasss I'd like to stick a brief warning telling designers not to edit the CSS directly and to point them to instructions on getting started with Compass. I use an output style of :compressed, which strips out comments that are in the input SCSS/SASS file.
If there isn't a convenient way to do this then I'll submit an issue/patch. I was thinking of adding an option named :output_prefix that takes a String that will be prepended to all output CSS files.
From the SASS reference on comments:
When the first letter of a comment is !, the comment will be interpolated and always rendered into css output even in compressed output modes. This is useful for adding Copyright notices to your generated CSS.
So you could start your SASS file with something like this:
/*!
* WARNING: Don't edit this file by hand! Instead, you should be using Compass.
* (More information at http://compass-style.org/)
*/
compressed strips out all comments. I suggest you put this in a property:
warning { do-not: "edit this file"; }
Regarding the proposed patch, I do not think this use case is compelling enough to warrant such a feature.
Known bug in Sass. Fixed in master but not yet released:
https://github.com/nex3/sass/issues/784