What tailwind vscode theme?

[ramiraza]

Does anyone know what theme and font is being used at the image of Tailwind Intellisense extension for vs code? I've included the image below for reference. I really like the rounded corners of the color highlights in the intellisense and the background theme.

Thanks in advance ☺️

[Core-Coder]

I don't know which theme is that, but i have another alternative that is still good. It's called "Git Hub theme", and for the font you can use "Font Switcher" and use the Hack font.

[smzm]

Tokyo night is The theme used in screenshots .

[cauxNicolas]

thanks

[pabloq1]

Were you able to find it? It's not Tokyo night.

[Core-Coder]

I think Tokyo Night match the reference quite perfectly.

[akkyjumbade]

It is Tailwind Moon
https://marketplace.visualstudio.com/items?itemName=shadowblood.tailwind-moon

[RvDstudio]

Hi @ramiraza i am busy to creating a vscode theme that looks like the new tailwind docs website https://tailwindcss.com/

Its still a work in progres but i am in the good direction.

[haoolii]

Nice, It's so exciting

[aditrachman]

what theme and font do you use?

[matagaralph]

Hi @ramiraza i am busy to creating a vscode theme that looks like the new tailwind docs website https://tailwindcss.com/

Its still a work in progres but i am in the good direction.

Any update on this or achievement buddy.

[Nabwinsaud]

Does anyone know what theme and font is being used at the image of Tailwind Intellisense extension for vs code? I've included the image below for reference. I really like the rounded corners of the color highlights in the intellisense and the background theme.

Thanks in advance ☺️

Tailwind theme search in vs code you will get

[Yiddishe-Kop]

It is an actual VScode theme, which is used on play.tailwindcss.com:

The site is open-source, and by digging into the code I found where the theme colors are being defined: light theme and dark theme.

And editor customizations other than colors (e.g. the autocomplete widget border-radius etc) are done in this CSS file.

Seems possible to extract that into a standalone VScode theme 🔥.

[Yiddishe-Kop]

OK, I've managed to recreate this theme by a combination of vscode settings customizations & custom css [via this extension].

Screenshot:

[EnhaoSun]

Hi bro, Could you share how did you do that? Thanks!

[rishu541]

can you share the same

[bilgekaana123]

can you share

[amirehsan]

Hi everyone!

Check this out and follow the steps.

[matagaralph]

https://marketplace.visualstudio.com/items?itemName=mataga.rhodium

Me playing with the colors. I like what i have managed to achieve so far. Not bad, recently Adam sad they will release the theme once they customise it for other languages.

[ahmedsomaa]

This is the closest I got to it. The theme is Tailwind Colour Themes with the following tweaks found here

Tweaks

{
  "editor.fontFamily": "Fira Code",
  "editor.fontSize": 12,
  "editor.fontLigatures": true,
  "editor.lineHeight": 2,
  "workbench.colorTheme": "Tailwind Moon Blue"

  "editor.tokenColorCustomizations": {
    "[Tailwind Moon Blue]": {
      "strings": "#7dd3fc",
      "textMateRules": [
        {
          "name": "TW HTML tags",
          "scope": ["punctuation.definition.tag", "punctuation.definition.string.begin.html", "punctuation.definition.string.end.html", "punctuation.separator.key-value.html"],
          "settings": {
            "foreground": "#63738A"
          }
        },
        {
          "name": "TW CSS unit / vue",
          "scope": ["keyword.other", "invalid.illegal.unrecognized-tag.html"],
          "settings": {
            "foreground": "#99F6E4"
          }
        },
        {
          "name": "TW CSS number",
          "scope": " constant.numeric.css",
          "settings": {
            "foreground": "#f8fafc"
          }
        },
        {
          "name": "TW CSS property",
          "scope": " support.type.property-name.css",
          "settings": {
            "foreground": "#7dd3fc"
          }
        },
        {
          "name": "TW Entity",
          "scope": ["entity.name.tag.template.html.vue","entity.name.tag.html"],
          "settings": {
            "foreground": "#F472B6"
          }
        },
        {
          "name": "TW Vue Attributes",
          "scope": "entity.other.attribute-name.html.vue",
          "settings": {
            "foreground": "#A78BFA"
          }
        },
        {
          "name": "TW Entity HTML",
          "scope": "entity.other.attribute-name.html",
          "settings": {
            "foreground": "#CBD5E1"
          }
        }
      ]
    }
  }
}

Demo