No color decorators for syntax from SublimeText/Tailwind CSS

[jnns]

When I set the syntax of my stylesheet files in Sublime Text to one of the default ones (CSS, CSS3) the color decorators work just fine. For working with Tailwind CSS I use https://github.com/SublimeText/TailwindCSS/ because directives like @apply and nesting are not supported by the other two. However, color decorators don't work with that syntax.

I tried to change my LSP-tailwindcss settings to include the source.css.tailwindcss scope but it still doesn't work:

{
  "selector": "source.jsx | source.js.react | source.js | source.tsx | source.ts | source.css.tailwind | source.css | source.scss | source.less | text.html.vue | text.html.svelte | text.html.basic | text.html.twig | text.blade | embedding.php | text.html.rails | text.html.erb | text.haml | text.jinja | text.html.elixir",
  "languages": [
    {
      "languageId": "css",
      "scopes": ["source.css", "source.css.tailwind"],
      "syntaxes": [
        "Packages/CSS/CSS.sublime-syntax",
        "Packages/CSS3/CSS3.sublime-syntax",
        "Packages/Tailwind CSS/Tailwind CSS.sublime-syntax"
      ]
    }
  ]
}

Do I have the wrong setup? How do I get the "Tailwind CSS" syntax to show color decorators as well?

Ouptut from "Troubleshooting: LSP-tailwindcss"

Troubleshooting: LSP-tailwindcss

Version

• LSP: 1.20.0
• Sublime Text: 4141

Server Test Run

• exit code: 0
• output

Server Configuration

• command

[
  "/usr/bin/node", 
  "/home/jnns/.cache/sublime-text/Package Storage/LSP-tailwindcss/18.7.0/language-server/node_modules/@tailwindcss/language-server/bin/tailwindcss-language-server", 
  "--stdio"
]

• shell command

/usr/bin/node "/home/jnns/.cache/sublime-text/Package Storage/LSP-tailwindcss/18.7.0/language-server/node_modules/@tailwindcss/language-server/bin/tailwindcss-language-server" --stdio

• selector

source.jsx | source.js.react | source.js | source.tsx | source.ts | source.css | source.scss | source.less | text.html.vue | text.html.svelte | text.html.basic | text.html.twig | text.blade | embedding.php | text.html.rails | text.html.erb | text.haml | text.jinja | text.html.elixir

• priority_selector

(source.css)|(source.css.tailwind)

• init_options

{}

• settings

{
  "tailwindCSS": {
    "classAttributes": [
      "class", 
      "className", 
      "ngClass"
    ], 
    "colorDecorators": true, 
    "emmetCompletions": false, 
    "experimental": {
      "classRegex": []
    }, 
    "files": {
      "exclude": [
        "**/.git/**", 
        "**/node_modules/**", 
        "**/.hg/**"
      ]
    }, 
    "includeLanguages": {}, 
    "lint": {
      "cssConflict": "warning", 
      "invalidApply": "error", 
      "invalidConfigPath": "error", 
      "invalidScreen": "error", 
      "invalidTailwindDirective": "error", 
      "invalidVariant": "error", 
      "recommendedVariantOrder": "warning"
    }, 
    "rootFontSize": 16, 
    "showPixelEquivalents": true, 
    "validate": true
  }
}

• env

{
  "PATH": "/usr/bin:/usr/bin:"
}

Active view

• File name

/home/jnns/<...>/forms.css

• Settings

{
  "auto_complete_selector": "meta.tag, source - comment - string.quoted.double.block - string.quoted.single.block - string.unquoted.heredoc", 
  "lsp_active": true, 
  "syntax": "Packages/Tailwind CSS/Tailwind CSS.sublime-syntax"
}

• base scope

source.css.tailwind

## Project / Workspace
 - folders
```json
[
  "/home/jnns/<...>"
]

• is project: True
• project data:

{}

LSP configuration

{
  "clients": {
    "LSP-pyright": {
      "enabled": false
    }
  }
}

System PATH

• /home/jnns/.local/bin
• /usr/local/bin
• /usr/local/sbin
• /usr/bin
• /usr/sbin

[rchl]

Add this to LSP-tailwindcss settings.

    "initializationOptions": {
        "userLanguages": {
            "tailwind": "css",
        }
    },

Note that this is something that should be fixed in this package still.

BTW. You don't have to care about changing languages as this is for ST3 only.