tailwindcss language server config for helix

[plutack]

I have been trying for days to configure tailwind language server for helix particularly for templs files(I would later discover my config doesn't even work for html files). None of the config snippets I have found on reddit or github comment marked as answers have worked

# go lsp config
[language-server.gopls]
command = "gopls"
config = { "gofumpt" = true, "local" = "goimports", "semanticTokens" = true, "staticcheck" = true, "verboseOutput" = true, "analyses" = { "fieldalignment" = false, "nilness" = true, unusedparams = true, unusedwrite = true, useany = true }, usePlaceholders = true, completeUnimported = true, hints = { "assignVariableType" = true, "compositeLiteralFields" = true, "compositeLiteralTypes" = true, "constantValues" = true, "functionTypeParameters" = true, "parameterNames" = true, "rangeVariableTypes" = true } }

# [language-server.tailwindcss-ls]
# command = "tailwindcss-language-server"
# args = [ "--stdio" ]
config = {userLanguages = { templ = "html", "*.templ" = "html" } }


[language-server.tailwindcss-ls.config]
# command = "tailwindcss-language-server"
# args = [ "--stdio" ]
# tailwindCSS = {includeLanguages = { templ = "html", "*.templ" = "html" } }

[language-server.deno-lsp]
command = "deno"
args = ["lsp"]
config.deno.enable = true
# config.deno.unstable = true 
# config.deno.config = "/home/plutack/.config/deno/deno.json"
indent = { tab-width = 4, unit = "    " }

[language-server.vscode-json-language-server.config]
json = { validate = { enable = true }, format = { enable = true } }
provideFormatter = true
 
[language-server.vscode-css-language-server.config]
css = { validate = { enable = true } }
scss = { validate = { enable = true } }
less = { validate = { enable = true } }
provideFormatter = true

[language-server.emmet-language-server]
command="emmet-language-server"
args = ["--stdio"]

[language-server.typescript-language-server.config]
documentFormatting = false
hostInfo = "helix"
 
[language-server.sqls]
command = "sqls"

# introduce new language server
[language-server.scls]
command = "simple-completion-language-server"


[language-server.templ]
command = "templ"
# args = [ "lsp" , "-log", "./templ.log"]

[language-server.scls.config]
max_completion_items = 20            # set max completion results len for each group: words, snippets, unicode-input
snippets_first = true                # completions will return before snippets by default
snippets_inline_by_word_tail = false # suggest snippets by WORD tail, for example text `xsq|` become `x^2|` when snippet `sq` has body `^2`
feature_words = true                 # enable completion by word
feature_snippets = true              # enable snippets
feature_unicode_input = true         # enable "unicode input"
feature_paths = true                 # enable path completion
feature_citations = false            # enable citation completion (only on `citation` feature enabled)

# write logs to /tmp/completion.log
[language-server.scls.environment]
RUST_LOG = "info,simple-completion-language-server=info"
LOG_FILE = "/tmp/completion.log"



# introduce a new language to enable completion on any doc by forcing set language with :set-language stub
# [[language]]
# name = "stub"
# scope = "text.stub"
# file-types = []
# shebangs = []
# roots = []
# auto-format = false
# language-servers = [ "scls" ]
 
[[language]]
name = "sql"
language-servers = [ "sqls" ]

[[language]]
name = "typescript"
language-id = "typescript"
scope = "source.ts"
injection-regex = "^(ts|typescript)$"
file-types = ["ts"]
shebangs = ["deno"]
roots = ["deno.json", "deno.jsonc", "package.json"]
auto-format = true
language-servers = ["scls", "deno-lsp"]

[[language]]
name = "tsx"
language-id = "typescriptreact"
scope = "source.tsx"
injection-regex = "^(tsx)$"
file-types = ["tsx"]
shebangs = ["deno"]
roots = ["deno.json", "deno.jsonc", "package.json"]
auto-format = true
language-servers = [ "tailwindcss-ls", "deno-lsp" ] 


[[language]]
name = "jsx"
language-id = "javascriptreact"
scope = "source.jsx"
injection-regex = "^(jsx)$"
file-types = ["jsx"]
shebangs = ["deno"]
roots = ["deno.json", "deno.jsonc", "package.json"]
auto-format = true
language-servers = [ "tailwindcss-ls", "deno-lsp" ] #

[[language]]
name = "javascript"
language-id = "javascript"
scope = "source.ts"
injection-regex = "^(js|javascript)$"
file-types = ["js"]
shebangs = ["deno"]
roots = ["deno.json", "deno.jsonc", "package.json"]
auto-format = true
language-servers = [ "tailwindcss-ls", "deno-lsp" ] #


[[language]]
name = "json"
language-servers = [ "vscode-json-language-server" ]
auto-format = true


[[language]]
name = "html"
auto-format = true
formatter = { command = "prettier", args = [ "--parser", "html"] }
language-servers = [ "tailwind-ls", "vscode-html-language-server", "emmet-language-server", "scls"]
 

[[language]]
name = "css"
language-id = "css"
scope = "source.css"
file-types = ["css"]
language-servers = [ "vscode-css-language-server","tailwindcss-ls", "scls"]
formatter = { command = 'prettier', args = ["--parser", "css"] }
auto-format = true

[[language]]
name = "go"
roots = ["go.work", "go.mod"]
auto-format = true
comment-token = "//"
formatter = { command = "goimports"}
language-servers = [ "scls", "gopls"]

[[language]]
name = "templ"
scope = "source.templ"
auto-format = true
formatter = { command = "templ", args = [ "fmt" ]}
language-servers = [ "tailwindcss-ls", "templ" ]
indent = { tab-width = 4, unit = "    " }

my language config currently.

[TornaxO7]

May I ask if the logs are containing any relevant information? (Maybe post it here)

[plutack]

2025-01-29T16:34:15.536 helix_lsp::transport [INFO] templ -> {"jsonrpc":"2.0","method":"textDocument/didChange","params":{"contentChanges":[{"text":"package components\n\
ntempl Download() {\n\t<div class=\"flex <allgn-center</allgn-center> justify-center\">\n\t\t<form action=\"/download\" method=\"post\" class=\"flex gap-2 items-center \"
>\n\t\t\t<label class=\"input input-bordered flex items-center gap-2\">\n\t\t\t\t<img src=\"/assets/images/magnet.svg\" class=\"w-6 h-6\"/>\n\t\t\t\t<input type=\"text\"
class=\"grow\" placeholder=\"Magnet Link\"/>\n\t\t\t</label>\n\t\t\t<input type=\"submit\" value=\"Download\" class=\"btn\"/>\n\t\t</form>\n\t</div>\n}\n"}],"textDocument
":{"uri":"file:///home/plutack/projects/go/seedrlike/views/components/section-download.templ","version":44}}}
2025-01-29T16:34:15.536 helix_lsp::transport [INFO] tailwindcss-ls -> {"jsonrpc":"2.0","method":"textDocument/didChange","params":{"contentChanges":[{"text":"package comp
onents\n\ntempl Download() {\n\t<div class=\"flex <allgn-center</allgn-center> justify-center\">\n\t\t<form action=\"/download\" method=\"post\" class=\"flex gap-2 items-
center \">\n\t\t\t<label class=\"input input-bordered flex items-center gap-2\">\n\t\t\t\t<img src=\"/assets/images/magnet.svg\" class=\"w-6 h-6\"/>\n\t\t\t\t<input type=
\"text\" class=\"grow\" placeholder=\"Magnet Link\"/>\n\t\t\t</label>\n\t\t\t<input type=\"submit\" value=\"Download\" class=\"btn\"/>\n\t\t</form>\n\t</div>\n}\n"}],"tex
tDocument":{"uri":"file:///home/plutack/projects/go/seedrlike/views/components/section-download.templ","version":44}}}
2025-01-29T16:34:15.537 helix_lsp::transport [INFO] templ <- {"jsonrpc":"2.0","method":"textDocument/publishDiagnostics","params":{"uri":"file:///home/plutack/projects/go
/seedrlike/views/components/section-download.templ","diagnostics":[]}}
2025-01-29T16:34:15.538 helix_lsp::transport [INFO] templ <- {"jsonrpc":"2.0","method":"textDocument/publishDiagnostics","params":{"uri":"file:///home/plutack/projects/go
/seedrlike/views/components/section-download.templ","diagnostics":[]}}
2025-01-29T16:34:15.544 helix_lsp::transport [INFO] templ <- {"jsonrpc":"2.0","method":"textDocument/publishDiagnostics","params":{"uri":"file:///home/plutack/projects/go
/seedrlike/views/components/section-download.templ","version":44,"diagnostics":[]}}
2025-01-29T16:34:15.657 helix_lsp::transport [INFO] templ -> {"jsonrpc":"2.0","method":"textDocument/signatureHelp","params":{"position":{"character":31,"line":3},"textDo
cument":{"uri":"file:///home/plutack/projects/go/seedrlike/views/components/section-download.templ"}},"id":28}
2025-01-29T16:34:15.658 helix_lsp::transport [INFO] templ <- {"jsonrpc":"2.0","result":null,"id":28}
2025-01-29T16:34:15.658 helix_lsp::transport [INFO] templ <- null
2025-01-29T16:34:16.385 helix_lsp::transport [INFO] templ <- {"jsonrpc":"2.0","method":"window/logMessage","params":{"message":"2025/01/29 16:34:16 background imports cac
he refresh starting\n","type":3}}
2025-01-29T16:34:16.385 helix_term::application [INFO] window/logMessage: LogMessageParams { typ: Info, message: "2025/01/29 16:34:16 background imports cache refresh sta
rting\n" }
2025-01-29T16:34:16.440 helix_lsp::transport [INFO] templ <- {"jsonrpc":"2.0","method":"window/logMessage","params":{"message":"2025/01/29 16:34:16 background refresh fin
ished after 95.069424ms\n","type":3}}
2025-01-29T16:34:16.440 helix_term::application [INFO] window/logMessage: LogMessageParams { typ: Info, message: "2025/01/29 16:34:16 background refresh finished after 95
.069424ms\n" }
2025-01-29T16:34:17.267 helix_lsp::transport [INFO] templ -> {"jsonrpc":"2.0","method":"textDocument/didSave","params":{"text":"package components\n\ntempl Download() {\n
\t<div class=\"flex <allgn-center</allgn-center> justify-center\">\n\t\t<form action=\"/download\" method=\"post\" class=\"flex gap-2 items-center \">\n\t\t\t<label class
=\"input input-bordered flex items-center gap-2\">\n\t\t\t\t<img src=\"/assets/images/magnet.svg\" class=\"w-6 h-6\"/>\n\t\t\t\t<input type=\"text\" class=\"grow\" placeh
older=\"Magnet Link\"/>\n\t\t\t</label>\n\t\t\t<input type=\"submit\" value=\"Download\" class=\"btn\"/>\n\t\t</form>\n\t</div>\n}\n","textDocument":{"uri":"file:///home/
plutack/projects/go/seedrlike/views/components/section-download.templ"}}}
2025-01-29T16:34:17.267 helix_lsp::transport [INFO] tailwindcss-ls -> {"jsonrpc":"2.0","method":"textDocument/didSave","params":{"textDocument":{"uri":"file:///home/plutack/projects/go/seedrlike/views/components/section-download.templ"}}}
2025-01-29T16:34:17.267 helix_lsp::transport [INFO] emmet-language-server -> {"jsonrpc":"2.0","method":"textDocument/didSave","params":{"textDocument":{"uri":"file:///home/plutack/projects/go/seedrlike/views/components/section-download.templ"}}}
2025-01-29T16:34:17.389 helix_lsp::transport [INFO] tailwindcss-ls -> {"jsonrpc":"2.0","method":"textDocument/didChange","params":{"contentChanges":[{"text":"package components\n\ntempl Download() {\n\t<div class=\"flex allgn-center justify-center\">\n\t\t<form action=\"/download\" method=\"post\" class=\"flex gap-2 items-center \">\n\t\t\t<label class=\"input input-bordered flex items-center gap-2\">\n\t\t\t\t<img src=\"/assets/images/magnet.svg\" class=\"w-6 h-6\"/>\n\t\t\t\t<input type=\"text\" class=\"grow\" placeholder=\"Magnet Link\"/>\n\t\t\t</label>\n\t\t\t<input type=\"submit\" value=\"Download\" class=\"btn\"/>\n\t\t</form>\n\t</div>\n}\n"}],"textDocument":{"uri":"file:///home/plutack/projects/go/seedrlike/views/components/section-download.templ","version":45}}}
2025-01-29T16:34:17.389 helix_lsp::transport [INFO] emmet-language-server -> {"jsonrpc":"2.0","method":"textDocument/didChange","params":{"contentChanges":[{"range":{"end":{"character":46,"line":3},"start":{"character":18,"line":3}},"text":"allgn-center"}],"textDocument":{"uri":"file:///home/plutack/projects/go/seedrlike/views/components/section-download.templ","version":45}}}
2025-01-29T16:34:17.389 helix_lsp::transport [INFO] templ -> {"jsonrpc":"2.0","method":"textDocument/didChange","params":{"contentChanges":[{"text":"package components\n\ntempl Download() {\n\t<div class=\"flex allgn-center justify-center\">\n\t\t<form action=\"/download\" method=\"post\" class=\"flex gap-2 items-center \">\n\t\t\t<label class=\"input input-bordered flex items-center gap-2\">\n\t\t\t\t<img src=\"/assets/images/magnet.svg\" class=\"w-6 h-6\"/>\n\t\t\t\t<input type=\"text\" class=\"grow\" placeholder=\"Magnet Link\"/>\n\t\t\t</label>\n\t\t\t<input type=\"submit\" value=\"Download\" class=\"btn\"/>\n\t\t</form>\n\t</div>\n}\n"}],"textDocument":{"uri":"file:///home/plutack/projects/go/seedrlike/views/components/section-download.templ","version":45}}}
2025-01-29T16:34:17.391 helix_lsp::transport [INFO] templ <- {"jsonrpc":"2.0","method":"textDocument/publishDiagnostics","params":{"uri":"file:///home/plutack/projects/go/seedrlike/views/components/section-download.templ","diagnostics":[]}}
2025-01-29T16:34:17.394 helix_lsp::transport [INFO] templ <- {"jsonrpc":"2.0","method":"textDocument/publishDiagnostics","params":{"uri":"file:///home/plutack/projects/go/seedrlike/views/components/section-download.templ","version":45,"diagnostics":[]}}
2025-01-29T16:34:20.272 helix_lsp::transport [INFO] emmet-language-server -> {"jsonrpc":"2.0","method":"textDocument/completion","params":{"context":{"triggerCharacter":"l","triggerKind":2},"position":{"character":21,"line":3},"textDocument":{"uri":"file:///home/plutack/projects/go/seedrlike/views/components/section-download.templ"}},"id":25}
2025-01-29T16:34:20.272 helix_lsp::transport [INFO] templ -> {"jsonrpc":"2.0","method":"textDocument/completion","params":{"context":{"triggerKind":1},"position":{"character":21,"line":3},"textDocument":{"uri":"file:///home/plutack/projects/go/seedrlike/views/components/section-download.templ"}},"id":29}
2025-01-29T16:34:20.272 helix_lsp::transport [INFO] tailwindcss-ls -> {"jsonrpc":"2.0","method":"textDocument/completion","params":{"context":{"triggerKind":1},"position":{"character":21,"line":3},"textDocument":{"uri":"file:///home/plutack/projects/go/seedrlike/views/components/section-download.templ"}},"id":25}
2025-01-29T16:34:20.272 helix_lsp::transport [INFO] templ <- {"jsonrpc":"2.0","result":null,"id":29}
2025-01-29T16:34:20.272 helix_lsp::transport [INFO] templ <- null
2025-01-29T16:34:20.273 helix_lsp::transport [INFO] emmet-language-server <- {"jsonrpc":"2.0","id":25,"result":null}
2025-01-29T16:34:20.273 helix_lsp::transport [INFO] emmet-language-server <- null
2025-01-29T16:34:20.274 helix_lsp::transport [INFO] tailwindcss-ls <- {"jsonrpc":"2.0","id":25,"result":null}
2025-01-29T16:34:20.274 helix_lsp::transport [INFO] tailwindcss-ls <- null
2025-01-29T16:34:20.387 helix_lsp::transport [INFO] templ -> {"jsonrpc":"2.0","method":"textDocument/signatureHelp","params":{"position":{"character":21,"line":3},"textDocument":{"uri":"file:///home/plutack/projects/go/seedrlike/views/components/section-download.templ"}},"id":30}
2025-01-29T16:34:20.388 helix_lsp::transport [INFO] templ <- {"jsonrpc":"2.0","result":null,"id":30}
2025-01-29T16:34:20.388 helix_lsp::transport [INFO] templ <- null
2025-01-29T16:34:22.671 helix_lsp::transport [INFO] templ -> {"jsonrpc":"2.0","method":"textDocument/didChange","params":{"contentChanges":[{"text":"package components\n\ntempl Download() {\n\t<div class=\"flex allign-center justify-center\">\n\t\t<form action=\"/download\" method=\"post\" class=\"flex gap-2 items-center \">\n\t\t\t<label class=\"input input-bordered flex items-center gap-2\">\n\t\t\t\t<img src=\"/assets/images/magnet.svg\" class=\"w-6 h-6\"/>\n\t\t\t\t<input type=\"text\" class=\"grow\" placeholder=\"Magnet Link\"/>\n\t\t\t</label>\n\t\t\t<input type=\"submit\" value=\"Download\" class=\"btn\"/>\n\t\t</form>\n\t</div>\n}\n"}],"textDocument":{"uri":"file:///home/plutack/projects/go/seedrlike/views/components/section-download.templ","version":46}}}
2025-01-29T16:34:22.671 helix_lsp::transport [INFO] tailwindcss-ls -> {"jsonrpc":"2.0","method":"textDocument/didChange","params":{"contentChanges":[{"text":"package components\n\ntempl Download() {\n\t<div class=\"flex allign-center justify-center\">\n\t\t<form action=\"/download\" method=\"post\" class=\"flex gap-2 items-center \">\n\t\t\t<label class=\"input input-bordered flex items-center gap-2\">\n\t\t\t\t<img src=\"/assets/images/magnet.svg\" class=\"w-6 h-6\"/>\n\t\t\t\t<input type=\"text\" class=\"grow\" placeholder=\"Magnet Link\"/>\n\t\t\t</label>\n\t\t\t<input type=\"submit\" value=\"Download\" class=\"btn\"/>\n\t\t</form>\n\t</div>\n}\n"}],"textDocument":{"uri":"file:///home/plutack/projects/go/seedrlike/views/components/section-download.templ","version":46}}}
2025-01-29T16:34:22.671 helix_lsp::transport [INFO] emmet-language-server -> {"jsonrpc":"2.0","method":"textDocument/didChange","params":{"contentChanges":[{"range":{"end":{"character":21,"line":3},"start":{"character":21,"line":3}},"text":"i"}],"textDocument":{"uri":"file:///home/plutack/projects/go/seedrlike/views/components/section-download.templ","version":46}}}
2025-01-29T16:34:22.672 helix_lsp::transport [INFO] templ <- {"jsonrpc":"2.0","method":"textDocument/publishDiagnostics","params":{"uri":"file:///home/plutack/projects/go/seedrlike/views/components/section-download.templ","diagnostics":[]}}
2025-01-29T16:34:22.676 helix_lsp::transport [INFO] templ <- {"jsonrpc":"2.0","method":"textDocument/publishDiagnostics","params":{"uri":"file:///home/plutack/projects/go/seedrlike/views/components/section-download.templ","version":46,"diagnostics":[]}}
2025-01-29T16:34:22.684 helix_vcs::diff::worker [INFO] Diff computation timed out, update of diffs might appear delayed
2025-01-29T16:34:22.685 helix_lsp::transport [INFO] emmet-language-server -> {"jsonrpc":"2.0","method":"textDocument/completion","params":{"context":{"triggerCharacter":"i","triggerKind":2},"position":{"character":22,"line":3},"textDocument":{"uri":"file:///home/plutack/projects/go/seedrlike/views/components/section-download.templ"}},"id":26}
2025-01-29T16:34:22.685 helix_lsp::transport [INFO] templ -> {"jsonrpc":"2.0","method":"textDocument/completion","params":{"context":{"triggerKind":1},"position":{"character":22,"line":3},"textDocument":{"uri":"file:///home/plutack/projects/go/seedrlike/views/components/section-download.templ"}},"id":31}
2025-01-29T16:34:22.685 helix_lsp::transport [INFO] tailwindcss-ls -> {"jsonrpc":"2.0","method":"textDocument/completion","params":{"context":{"triggerKind":1},"position":{"character":22,"line":3},"textDocument":{"uri":"file:///home/plutack/projects/go/seedrlike/views/components/section-download.templ"}},"id":26}
2025-01-29T16:34:22.685 helix_lsp::transport [INFO] templ <- {"jsonrpc":"2.0","result":null,"id":31}
2025-01-29T16:34:22.685 helix_lsp::transport [INFO] templ <- null
2025-01-29T16:34:22.686 helix_lsp::transport [INFO] tailwindcss-ls <- {"jsonrpc":"2.0","id":26,"result":null}

a snippet of the logs

[babucarr32]

Make sure to install vscode-langservers-extracted and tailwindcss-ls



npm i -g vscode-langservers-extracted
npm i -g @tailwindcss/language-server



Your configuration should look like the one below

~/.config/helix/languages.toml


[language-server.vscode-css-language-server.config]
css = { validate = { enable = true } }
scss = { validate = { enable = true } }
less = { validate = { enable = true } }
provideFormatter = true


[language-server.tailwindcss-ls]
command = "tailwindcss-language-server"
args = ["--stdio"]

[[language]]
name = "css"
scope = "source.css"
injection-regex = "css"
file-types = ["css", "scss"]
block-comment-tokens = { start = "/*", end = "*/" }
language-servers = [ "vscode-css-language-server", "tailwindcss-ls" ]
auto-format = true
indent = { tab-width = 2, unit = "  " }

[[language]]
name = "html"
scope = "source.html"
injection-regex = "html"
file-types = ["html", "htm", "shtml", "xhtml", "xht", "jsp", "asp", "aspx", "jshtm", "volt", "rhtml", "cshtml"]
block-comment-tokens = { start = "<!--", end = "-->" }
language-servers = [ "vscode-html-language-server", "tailwindcss-ls" ]
auto-format = true
indent = { tab-width = 2, unit = "  " }

For jsx and tsx, include this configuration to the one above.

[[language]]
name = "jsx"
scope = "source.jsx"
injection-regex = "jsx"
language-id = "javascriptreact"
file-types = ["jsx"]
roots = [ "package.json" ]
comment-token = "//"
block-comment-tokens = { start = "/*", end = "*/" }
language-servers = [ "typescript-language-server", "tailwindcss-ls" ]
indent = { tab-width = 2, unit = "  " }
grammar = "javascript"
auto-format = true

[[language]]
name = "tsx"
scope = "source.tsx"
injection-regex = "(tsx)" # |typescript
language-id = "typescriptreact"
file-types = ["tsx"]
roots = [ "package.json", "tsconfig.json" ]
comment-token = "//"
block-comment-tokens = { start = "/*", end = "*/" }
language-servers = [ "typescript-language-server", "tailwindcss-ls"]
indent = { tab-width = 2, unit = "  " }
auto-format = true

[plutack]

Thanks for the comment but
This is roughly what I have in my language.toml file and for some reason I don't get the auto complete
I am also not looking to tamper what I have set as the language server for ext like tax as I am using deno lsp for that.
Right now what I am concerned about or rather have troubles with is why I am not getting auto suggestions using tailwind when I am though I'm the class attribute..be it templ files or even html files.
Thank you