Configuring tailwindcss #4986
Unanswered
H4ckint0sh
asked this question in
Q&A
Configuring tailwindcss
#4986
Replies: 3 comments 18 replies
-
|
@H4ckint0sh Its been added now and working. Here is the instructions in this PR, it needs to be added to wiki though. |
Beta Was this translation helpful? Give feedback.
6 replies
-
|
i did exactly the same but tailwind intelisense isn't working |
Beta Was this translation helpful? Give feedback.
-
|
You might need to check if intellisense for html tags/attributes are working. Here are the current versions I'm using, 
|
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
Hmm its there for me. ❯ cat ~/.config/helix/languages.toml
[[language]]
name = "typescript"
shebangs = ["deno"]
roots = ["deno.json", "deno.jsonc"]
file-types = ["js", "ts", "jsx", "tsx"]
language-servers = ["deno-lsp", "tailwindcss-ls"]
auto-format = true
[language-server.deno-lsp]
command = "deno"
args = ["lsp"]
environment = { NO_COLOR = "1" }
[language-server.deno-lsp.config.deno]
enable = true
# Uncomment to enable completion of unstable features of Deno
# unstable = true
# Uncomment to cache dependencies on save
# cacheOnSave = true
# Enable completion of importing from registries
# Enable completion of function calls
suggest = { completeFunctionCalls = false, imports = { hosts = { "https://deno.land" = true } } }
# suggest = { imports = { hosts = { "https://deno.land" = true, "https://crux.land" = true, "https://x.nest.land" = true } } }
# Uncomment to enable inlay hints
inlayHints.parameterNames.enabled = "all"
inlayHints.parameterTypes.enabled = true
inlayHints.variableTypes.enabled = true
inlayHints.propertyDeclarationTypes.enabled = true
inlayHints.functionLikeReturnTypes.enabled = true
inlayHints.enumMemberValues.enabled = true
[[language]]
name = "html"
language-servers = [ "vscode-html-language-server", "tailwindcss-ls" ]
[[language]]
name = "css"
language-servers = [ "vscode-css-language-server", "tailwindcss-ls" ]
|
Beta Was this translation helpful? Give feedback.
-
|
thanks for responding i will try to find some other fixes |
Beta Was this translation helpful? Give feedback.
-
|
Hi! @pyrossh I followed the steps in the wiki but it's not working 😕 .. I can't understand why. This is my [language-server.astro-ls]
command = "astro-ls"
args = [ "--stdio" ]
config = { "typescript" = { "tsdk" = "/Users/valerio.pescatori/.volta/tools/image/packages/typescript/lib/node_modules/typescript/lib"}, "environment" = "node" }
[language-server.tailwindcss-ls]
command = "tailwindcss-language-server"
args = ["--stdio"]
config = { userLanguages = { astro = "html", "*.astro" = "html" } }
[[language]]
name = "astro"
scope = "source.astro"
injection-regex = "astro"
file-types = ["astro"]
roots = ["package.json", "astro.config.mjs"]
language-servers = [ "astro-ls", "tailwindcss-ls" ]
auto-format = true
formatter = { command = "prettier", args = ["--parser", "astro"] }
[[language]]
name = "typescript"
auto-format = true
formatter = { command = "prettier", args = ["--parser", "typescript"] }
[[language]]
name = "jsx"
language-servers = [ "tailwindcss-ls", "typescript-language-server" ]
[[language]]
name = "tsx"
language-servers = [ "tailwindcss-ls", "typescript-language-server" ]
[[language]]
name = "html"
language-servers = [ "tailwindcss-ls", "vscode-html-language-server" ]
[[language]]
name = "css"
language-servers = [ "tailwindcss-ls", "vscode-css-language-server" ]this is the 
I also tried running Am I missing something? |
Beta Was this translation helpful? Give feedback.
4 replies
-
|
Hmm I tried it and seems like its it fails first and then works, Mainly these lines, 
Can you try using this boilerplate and see if it works in the index.html file first? My languages.toml, [[language]]
name = "typescript"
shebangs = ["deno"]
roots = ["deno.json", "deno.jsonc"]
file-types = ["js", "ts", "jsx", "tsx"]
language-servers = ["deno-lsp", "tailwindcss-ls"]
auto-format = true
[[language]]
name = "html"
language-servers = [ "vscode-html-language-server", "tailwindcss-ls" ]
[[language]]
name = "css"
language-servers = [ "vscode-css-language-server", "tailwindcss-ls" ]
[language-server.astro-ls]
command = "astro-ls"
args = [ "--stdio" ]
[[language]]
name = "astro"
scope = "source.astro"
injection-regex = "astro"
file-types = ["astro"]
roots = ["package.json", "astro.config.mjs"]
language-servers = [ "astro-ls", "tailwindcss-ls" ]
auto-format = true
formatter = { command = "prettier", args = ["--parser", "astro"] } |
Beta Was this translation helpful? Give feedback.
-
|
At this point the only difference is volta.. I can't use that boilerplate you linked, Node throws error because it can't create configuration files even if I ran the cmd with sudo. I also tried commenting out the I'm not getting any I'll try removing volta later to check if that's what is causing the problem |
Beta Was this translation helpful? Give feedback.
-
|
I have just pushed the boilerplate if you need it. https://github.com/pyrossh/tss |
Beta Was this translation helpful? Give feedback.
-
|
Late reply: in the end I figured out what was wrong: I simply installed the wrong package 🥲. |
Beta Was this translation helpful? Give feedback.
-
|
Any way to tell when something in tailwind is not written properly? I get intelisense but I can't tell typos. |
Beta Was this translation helpful? Give feedback.
8 replies
-
|
Managed to do that, diagnostics work perfect now, thank you so much! I have |
Beta Was this translation helpful? Give feedback.
-
|
The class sorting is made by prettier-plugin-tailwindcss, follow the link and it should work, also you need to set prettier as the formatter for your files: [[language]]
name = "typescript"
auto-format = true
language-servers = ["<your lsp s>"]
formatter = { command = "prettier" } |
Beta Was this translation helpful? Give feedback.
-
|
Sorry to bother you again 😄 This is my languages.toml As of now, I get this: I can't figure out which part of my languages.toml is doing that. I altered my .eslintrc.json And now it works. No idea what I'm doing at this point tho 🤣 |
Beta Was this translation helpful? Give feedback.
-
|
I think you're missing the prettier configuration file. Since you're using eslint you might also want to extend Prettier's config for eslint, it turns off rules that are not necessary and rules that conflict with prettier. |
Beta Was this translation helpful? Give feedback.
-
|
Hello, I already had a And checked with I tested several things, what seemed to work was: Deleting the contents of It now seems to be working properly and when I apply fixes and then format/save it doesn't create new issues, so it doesn't seem to be conflicting anymore. Not sure if this is the correct configuration as I fail to fully grasp it(always used editors that did this for me) Thank you so much! |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
i am trying to configure tailwindcss lsp I have the following config in my language.toml but I dont get any auto complete.
this a screenshot from "hx ---health" command.
Any help is greatly appreciated!
Beta Was this translation helpful? Give feedback.
All reactions