VScode change appearance of intellisense popup - visual-studio-code

Question

On the website for Tailwind CSS there is a video of someone editing in vscode.
How did they get the popup to look like that? Can I reproduce it some how?
For those wanting to see the gif on their website: https://tailwindcss.com/docs/editor-setup

Answer 1

You are looking at the result of someone's chosen color theme in their vscode editor. You could contact them and ask for the name of that theme and whether it is available on the VSCode Marketplace or you can make your own.
Specifically for the Suggest Widget you showed in your question:
You can do this in vscode's own settings. In your settings.json
{
"workbench.colorCustomizations": {
"editorSuggestWidget.background": "#344255",
// the first line in your gif is selected
"editorSuggestWidget.selectedBackground": "#485669",
// the letters you have typed to bring up intellisense: 'bg' in your example
"editorSuggestWidget.highlightForeground": "#97f4e2",
// 'bg' in a selected entry
"editorSuggestWidget.focusHighlightForeground": "#97f4e2",
"editorSuggestWidget.foreground": "#fff" // the text color
}
}
The workbench.colorCustomizations object allows you to change the color of many of vscode UI elements. To learn more about this see
Customizing a Color Theme:
You can use IntelliSense while setting workbench.colorCustomizations
values or, for a list of all customizable colors, see the Theme Color
Reference.
So, for instance if you know that is the suggestWidget, just typing "suggestWidget" (including the quotes) inside a workbench.colorCustomizations object should give you all the properties of a suggestWidget of which you can change the color.
Thet are also listed here: Theme Color Reference: Editor Widget Colors.
[I used an eyedropper browser extension to get the colors for the various elements.]
[I assume the rounded corners are a result of MacOS, the demo below is with W11.]

Answer 2

It says in their guide here.
By default VS Code will not trigger completions when editing "string" content, for example within JSX attribute values. Updating the editor.quickSuggestions setting may improve your experience:
Add these settings.json
"editor.quickSuggestions": {
"strings": true
},
"tailwindCSS.includeLanguages": {
"html": "html",
"javascript": "javascript",
"css": "css"
},
Save and restart VS code.
When you want to use tailwind related classes use eg. "text-" you should see the suggestions.

Answer 3

You have to use vscode-custom-css extension
Install the extension and try the CSS below...
.monaco-editor .suggest-widget {
border-radius: 15px 15px 15px 15px;
box-shadow: 0 0 15px 15px rgba(0, 0, 0, 0.1);
padding-top: 15px
}
you can use Tailwind Moon theme to get similar colors also...

Answer 4

Use this extension: vscode-custom-css and this css:
.colorspan {
border-radius: 4px;
}
.monaco-editor .ced-1-TextEditorDecorationType24-3::before {
border-radius: 4px;
}
.monaco-editor .suggest-widget {
border-radius: 15px 15px 15px 15px;
box-shadow: 0 0 15px 15px rgba(0, 0, 0, 0.1);
background-color: #344254 !important;
padding: 10px;
}
.monaco-editor .monaco-highlighted-label .highlight {
color: #79bcb6;
}
.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused {
background-color: #485668 !important;
}
.monaco-editor .monaco-list-row:hover:not(.selected):not(.focused) {
background-color: #485668 !important;
}