a01a2ed0e0
Closes #37028 I noticed many projects use Tailwind in plain TypeScript (.ts) files, so it makes sense to support them out of the box, alongside .js and .tsx files we already handle. For example, see [supabase](https://github.com/supabase/supabase/blob/master/packages/ui/src/lib/theme/defaultTheme.ts). Note: You’ll still need to add `"classFunctions": ["cva", "cx"],` manually for Tailwind completions to work in `cva` type methods. This is because you don’t want completions on every string, only in specific methods or regex matches. This is documented. Release Notes: - Added out-of-the-box support for Tailwind completions in `.ts` files.
1.3 KiB
1.3 KiB
Tailwind CSS
Zed has built-in support for Tailwind CSS autocomplete, linting, and hover previews.
- Language Server: tailwindlabs/tailwindcss-intellisense
Configuration
To configure the Tailwind CSS language server, refer to the extension settings and add them to the lsp section of your settings.json:
{
"lsp": {
"tailwindcss-language-server": {
"settings": {
"classFunctions": ["cva", "cx"],
"experimental": {
"classRegex": ["[cls|className]\\s\\:\\=\\s\"([^\"]*)"],
},
},
},
},
}
Languages which can be used with Tailwind CSS in Zed:
Prettier Plugin
Zed supports Prettier out of the box, which means that if you have the Tailwind CSS Prettier plugin installed, adding it to your Prettier configuration will make it work automatically:
// .prettierrc
{
"plugins": ["prettier-plugin-tailwindcss"]
}