I'm looking for some help: I want to add TailwindCSS IntelliSense / suggestions into Monaco Editor. There is an official extension for VSCode https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss - but unfortunately, I know it's impossible to add VScode plugins into Monaco.
Another Website ( https://play.tailwindcss.com/ ) uses the same IntelliSense with Monaco Editor.
Thanks
Remcohaszing realeased a package for Tailwindcss intellisense support in Monaco editor :
https://github.com/remcohaszing/monaco-tailwindcss
Related
I installed the plugin #tailwindcss/line-clamp, but its not working its not being suggested by intellisense and even when I type in the class manually it doesn't change my styling .
here is my tailwind config :
module.exports = {
content: ['./src/**/*.tsx', './src/**/*.ts'],
plugins: [require('#tailwindcss/forms'), require('#tailwindcss/line-clamp')],
}
btw this a typescript React project .
This same thing happend with me as well. For me I was using tailwind alongside with daisyUI and sometimes the vscode pulgin was working sometimes not.
One thing you can follow, make sure to use the tailwind docs Taiwind Docs and follow the instruction on how to install tailwind for your project as per the framework you are using. Give it a try.
Or if it's not working you can try installing the below extention along side with tailwind extention in vscode.
HTML CSS Support
You can also try to add the below in your settings.json. It worked for me actally.
"editor.quickSuggestions": {
"strings": true
}
For more on this one - Stack Overflow
answered here https://stackoverflow.com/a/72731657/12763140
The extension HTML CSS Support extension is not the correct way to go.you should follow the official installation section of the detail page in the extension page in VSC.
In order for the extension to activate you must have tailwindcss installed and a Tailwind config file named tailwind.config.js or tailwind.config.cjs in your workspace.
so adding a file (even empty) named tailwind.config.js or tailwind.config.cjs at the root of your app will make it work.
On a ReactJS project, if I choose the style Jsx Attribute for inline CSS,
.
Then CSS intellisense won't work or work only after I add some fields manually.
But if I type the style attribute manually without clicking on the jsx attribute that VSCODE suggested, it would work normally.
Sometimes VSCode Intellisense does not work. not sure but this may be a bug but it shouldn't be that problematic.
but if it does bother you that much then try this kite. kite is more like
auto-complete.
https://www.kite.com/integrations/vs-code/
And if don't want auto-complete then add this extension in your VSCode.
Eclipse seems to be missing highlighting for // comments in SCSS:
Is there a way I can add that?
I added *.scss files to follow the highlighting of *.css files, but the reason why I'm running into this problem is that // comments are not allowed in CSS but they are in SCSS.
//This line is not properly highlighted
/*This line is properly highlighted*/
The Eclipse Web Tools Platform CSS editor does not support SCSS.
You can use the LiClipseText plug-in to edit SCSS files.
See Eclipse Marketplace for plug-ins that support SCSS.
I'm editing a customized wordpress theme that has visual composer installed in it. I can edit a lot of css in the default editor from Wordpress. But there are some css tags such as: .vc_custom_1496470898482 that I don't know where to edit.
Thanks for your help!
This is an auto generated CSS by visual composer so can't be edited.
So there are two approaches for applying your CSS to it and these are as follows:
Inside visual composer, add your own class/id for that particular row/element and then apply CSS using this newly added class/id. (Recommended)
Override this class with same name i.e .vc_custom_1496470898482 in your CSS file or inside custom CSS editor provided by the visual composer or theme.
Hope it helps.
Is there any tool available wherein I may open a CSS file and see a color box next to each color and background-color rules?
There's plenty. You can do this in Visual Studio with the Web Essentials plugin. Chrome Developer Tools does it. If you use Sublime Text there's a package for that: https://github.com/a-sk/livecss. If you use Notepad++ there's plenty of plugins: http://npp.campulka.net/
It's a matter of a simple Google Search and you'll find want you need.