Tailwind CSS support #5830
Comments
chloerei
added
enhancement
hovsater
added
the
potential extension
|
This would be awesome. It is the only thing stopping me from using Zed for a lot of my front-end development work. |
|
Is there TailwindCSS support? |
|
There's no Tailwind CSS support yet. |
|
Is the only think stopping me from using Zed as my main code editor. |
|
+1. Buzz kill. Started using Zed, loved it. Then hit landmine -- no Tailwind intellisense. Stops me dead in my tracks. I'll stay subscribed and switch over after Tailwinds support added. Otherwise fantastic editor!! |
|
Would love to see this come to Zed. Definitely would make the switch easier |
|
please be considerate and only write a comment if there's something meaningful to add with that said, it is on our radar and it will be tackled when priorities allow it |
Release Notes: - Added basic Tailwind CSS autocomplete support ([#746](https://github.com/zed-industries/community/issues/746)).
|
It would be good if Zed supported other locations of the |
|
Or you can have a monorepo project with more different tailwind.config files. |
|
@widersky Our experimental Tailwind autocomplete support has not shipped yet, you can try it out in our next preview build this Wednesday or on stable next week 😄 |
|
Just tried it, it works in .html files and in css selectors when using it with @apply. But not in svelte/vue files. Can I fix this with a setting somehow? |
I'm wondering if this will also work in JSX/TSX files, as opposed to just HTML/CSS? |
I try on tsx it work fine. |
|
@ForLoveOfCats tried and didn't work when config file was inside another folder 🤷♂️ |
|
Hey all, I'm going to close this issue since initial support is in preview now. We're bound to have some bugs; if you're running into anything, please open new issues so we can track those separately. |
|
@patrikengborg I've created a separate issue for Tailwind in Svelte components here #6294, so it can be tracked there. |
|
I've been using the preview for a few weeks now, and I still can't get tailwind autocomplete working. It simply doesn't appear in the list of language servers. Using the default NextJS project config. |
|
Do we need to do something to enable the TW language server? So far in TSX files I'm not getting any completion / suggestions. Further, Update: looks like it was the same issue identified in #4628. Once I moved my |
|
Does this not work for anyone in typescript files? It just doesnt autocomplete tailwind at all |
|
As for documentation missing: it seems like tailwindcss-language-server expects a That's where the error comes from. We do get the |
|
@mrnugget Thank you very much for fixing this bug. May I ask in which version of zed I can try it? |
|
It's in v0.136.0-pre |
This fixes the issue mentioned here: zed-industries#5830 (comment) In order for other languages to work, we need to pass the following settings along to the Tailwind language server. With the following Zed settings, it then also works for Scala: ```json { "languages": { "Scala": { "language_servers": ["tailwindcss-language-server"] }, }, "lsp": { "tailwindcss-language-server": { "settings": { "includeLanguages": { "scala": "html" }, "experimental": { "classRegex": ["[cls|className]\\s\\:\\=\\s\"([^\"]*)"] } } } } } ``` Release Notes: - Added ability to configure settings for `tailwindcss-language-server`, namely the `includeLanguages` and `experimental` objects. **NOTE**: I have only tested that the language server boots up for Scala files and that the settings are forwarded correctly. I don't have a Scala+Tailwind project with which to test that the actual completions also work. cc @nguyenyou
|
I hope this pre will also work on |
It should, yeah! |
|
Somehow the intellisense doesn't work for me. I'm on Windows and i compiled the latest source code.
|
|
@vipexv can you create a separate ticket with the necessary logs? Use |
|
Turns out same thing happens for the LUA Language Server. |
|
Any way how to add this config (taken from VS Code)? So i can use like this |
This addresses the question in [this comment](#5830 (comment)) by adding support for `classAttributes` to the settings. Meaning that the following Zed `settings.json` now works: ```json { "lsp": { "tailwindcss-language-server": { "settings": { "classAttributes": [ "class", "className", "ngClass", // add styles so will give intellisense to styles constant. "styles" ] // Optional: // "includeLanguages": { // "erb": "html", // "ruby": "html" // }, // "experimental": { // "classRegex": ["\\bclass:\\s*['\"]([^'\"]*)['\"]"] // } } } } } ```
This addresses the question in [this comment](#5830 (comment)) by adding support for `classAttributes` to the settings. Meaning that the following Zed `settings.json` now works: ```jsonc { "lsp": { "tailwindcss-language-server": { "settings": { "classAttributes": [ "class", "className", "ngClass", // add styles so will give intellisense to styles constant. "styles" ] // Optional: // "includeLanguages": { // "erb": "html", // "ruby": "html" // }, // "experimental": { // "classRegex": ["\\bclass:\\s*['\"]([^'\"]*)['\"]"] // } } } } } ``` Release Notes: - Added support for setting `classAttributes` in the configuration for `tailwindcss-language-server`. Example: `{ "lsp": { "tailwindcss-language-server": { "settings": { "classAttributes": [ "class", "className", "ngClass", "styles" ] } } } }`
…3923) This addresses the question in [this comment](zed-industries#5830 (comment)) by adding support for `classAttributes` to the settings. Meaning that the following Zed `settings.json` now works: ```jsonc { "lsp": { "tailwindcss-language-server": { "settings": { "classAttributes": [ "class", "className", "ngClass", // add styles so will give intellisense to styles constant. "styles" ] // Optional: // "includeLanguages": { // "erb": "html", // "ruby": "html" // }, // "experimental": { // "classRegex": ["\\bclass:\\s*['\"]([^'\"]*)['\"]"] // } } } } } ``` Release Notes: - Added support for setting `classAttributes` in the configuration for `tailwindcss-language-server`. Example: `{ "lsp": { "tailwindcss-language-server": { "settings": { "classAttributes": [ "class", "className", "ngClass", "styles" ] } } } }`
|
Just installed the new Linux release and Tailwind support also isn't working for me out of the box - is there anything else needed to be done to set it up properly?
☝🏼 This is all that appears, no Tailwind or TypeScript or anything else. |
|
@secondl1ght no, it should work out of the box, but maybe you're using a language for which it isn't enabled by default. Hard to tell without knowing what file type you're editing with which setup :) |
|
@mrnugget I am editing a |
|
Is there anything in the logs? |
|
@mrnugget this command doesn't seem to exist when I open the Command Palette: |
|
Sorry, it's
|
|
|
@mrnugget here is one part mentioning Tailwind: |
|
Yeah, seems like it can't download it: |
|
I turned off my VPN and restarted Zed and it appears that the language servers are running now: I wonder why these servers are blocking VPNs... I think I can still use Zed with a VPN running once I have downloaded the updates though right? It seems to be working now even after re-enabling my VPN and restarting Zed again. One suggestion is that there should be an error notification in the UI if the language servers cannot start - the logs are useful but it seems like something the user should be notified about right away, so that they know the editor is not functioning as expected. |
|
It works for me unless I'm using CLSX. Vscode has a regex setting that makes this possible but I wish Zed could also do it |
|
What's the regex? We do support {
"languages": {
"Scala": {
"language_servers": ["tailwindcss-language-server"]
},
},
"lsp": {
"tailwindcss-language-server": {
"settings": {
"includeLanguages": {
"scala": "html"
},
"experimental": {
"classRegex": ["[cls|className]\\s\\:\\=\\s\"([^\"]*)"]
}
}
}
}
} |
and others
Check for existing issues
Language
Tailwind CSS
Tree Sitter parser link
No response
Language server link
https://github.com/tailwindlabs/tailwindcss-intellisense/tree/master/packages/tailwindcss-language-server
Misc notes
Hope to be like Tailwind's VS Code plugin: https://github.com/tailwindlabs/tailwindcss-intellisense
Feature:
The text was updated successfully, but these errors were encountered: