enter image description here
i can't use emmet in css in Vs Code for some reason is it supported?
How to enable emmmet in css?
add this in JSON settings:
"emmet.includeLanguages": {
"CSS": "css",
}
Related
I have installed tailwind css and followed the documentation, but the intellisense works in a weird way: if I use tab to autocomplete className, then if my cursor is inside the brackets, the intellisense doesn't work, but once I click off and on again then the intellisense starts working.
I also updated settings.json and added
{
"tailwindCSS.includeLanguages": {
"typescript": "typescript",
"javascript": "javascript",
"html": "HTML"
}
"editor.inlineSuggest.enabled": true,
"emmet.triggerExpansionOnTab": true,
"tailwindCSS.emmetCompletions": true,
"editor.quickSuggestions": {
"strings": true
}
But nothing seems to help, to use intellisense I first need my caret to go outside of the quotes, and then go back inside.
Video
Here you have where I found solution,
https://github.com/tailwindlabs/tailwindcss-intellisense/issues/392
but if you're too busy to dig in here solution is
ctrl + space in quotation marks
, it works for me.
I found this question looking for solution and I've found it so here you have.
Have fun c:.
I'm using Flowbite (both JS and CSS) in my application. JS was inserted and works (using Webpack and import 'flowbite' in the entry point JS).
For the CSS, I'm using this in the tailwind.config.js file as the documentation tells you to do.
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
extend: {}
},
plugins: [
require('flowbite/plugin')
]
}
However when compiling everything (npx tailwind build) the CSS doesn't seem to be included in the final CSS file.
I can tell because the FlowBite modal should have a dark background (making everything except the modal darker), but that background does not appear when creating the compiled CSS.
When I do include the flowbite.css manually though, it does render correctly. So the current working solution I have is (in my HTML):
<!-- TODO: Adding the plugin in tailwind.config.js does not work -->
<link rel="stylesheet" href="https://unpkg.com/flowbite#latest/dist/flowbite.min.css" />
But I'd like to have it compiled automatically from the Tailwind build command.
Someone in the Discord community answered to me directly. I had to include this:
module.exports = {
content: ['./src/**/*.html', './node_modules/flowbite/**/*.js'],
plugins: [
require('flowbite/plugin')
]
}
The './node_modules/flowbite/**/*.js' in content was missing.
Tried many way doesn't work.
So I have quick fix, add this css:
.h-modal{
background-color: rgba(0,0,0,0.3);
}
I am writing a Chrome extension to modify the CSS of a specific page. Although, when I try to apply styles using style.min.css my spreadsheet is rendered before the site's spreadsheet in the cascade. To be precise, my rules are computed before theirs so their rules override mine.
For example, if I try this
article {
background-color: red;
}
their rule gets computed last and my background won't be red.
This is what the dev tools look like. We can see my injected stylesheet doesn't have priority in the cascade.
Also this is my manifest.json without the project description and name.
"content_scripts": [{
"css": ["style.min.css"],
"js": ["main.js"],
"matches": ["https://intra.epitech.eu/*"]
}],
"permissions": ["tabs"]
So if anyone has any idea on how to go around that by prioritising your styles in a chrome extension please leave a comment :)
article {
background-color: red !important;
}
The !important tag stops other styles from overriding your styles.
You should use the !important tag lightly though. Because if you over use it you will start running into conflicting styles when your CSS file becomes very big.
As per the OP comments "run_at": "document_end" works only for js files.
So load js file at document end then insert css files dynamically by loading css files from that js file.
In manifest.json write this
"content_scripts": [
{
"js": ["main.js"],
"matches": ["https://intra.epitech.eu/*"],
"run_at": "document_end"
}
]
More specific rules override more general ones (https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade) :
#homeboard section article {
background-color: red;
}
How to customize ion-tab tabtitle font ?
For example
<ion-tab [root]="tab1Root"tabTitle="Home" tabIcon="home"></ion-tab>
how to customize font of "Home" here ? i created scss file inside tabs folder but couldnt make it work.
thanks
You can add the following to your app.scss:
.tab-button-text {
font-family: fantasy;
}
You can always use chrome dev tools or safari dev tools to check which class you have to modifiy to change the style of a specific element.
I was able to add JavaScript snippets in the Atom editor, but I couldn't add CSS snippets. Is there a way to add CSS snippets in Atom?
#js this works fine
".source.js":
"getElementById":
"prefix": "geid"
"body": "documnet.getElementById($1)"
#css this does not work
".source.css":
"blue background":
"prefix": "bgblue"
"body": " background-color: blue "
I just tried it exactly as you posted, and it worked for me.
Make sure your Atom is fully updated, and make sure the document you're trying to use the snippet in is using the appropriate language/grammar.