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.

[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

[lannodev]

Tailwind Weekly #189: New Catalyst Update, Course Template Sneak Peek, and New Editor Themes coming soon 🔥

New Tailwind CSS editor themes just around the corner 💻️

If you have seen any of the recent Tailwind CSS channel videos, then you probably saw that they have their own custom editor theme. Well, they decided to share it with everyone and are planning to release it soon 😄