Smit Barmase
2391fd649c
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.
49 lines
1.3 KiB
Markdown
49 lines
1.3 KiB
Markdown
# Tailwind CSS
|
|
|
|
Zed has built-in support for Tailwind CSS autocomplete, linting, and hover previews.
|
|
|
|
- Language Server: [tailwindlabs/tailwindcss-intellisense](https://github.com/tailwindlabs/tailwindcss-intellisense)
|
|
|
|
## Configuration
|
|
|
|
To configure the Tailwind CSS language server, refer [to the extension settings](https://github.com/tailwindlabs/tailwindcss-intellisense?tab=readme-ov-file#extension-settings) and add them to the `lsp` section of your `settings.json`:
|
|
|
|
```jsonc
|
|
{
|
|
"lsp": {
|
|
"tailwindcss-language-server": {
|
|
"settings": {
|
|
"classFunctions": ["cva", "cx"],
|
|
"experimental": {
|
|
"classRegex": ["[cls|className]\\s\\:\\=\\s\"([^\"]*)"],
|
|
},
|
|
},
|
|
},
|
|
},
|
|
}
|
|
```
|
|
|
|
Languages which can be used with Tailwind CSS in Zed:
|
|
|
|
- [Astro](./astro.md)
|
|
- [CSS](./css.md)
|
|
- [ERB](./ruby.md)
|
|
- [HEEx](./elixir.md#heex)
|
|
- [HTML](./html.md)
|
|
- [TypeScript](./typescript.md)
|
|
- [JavaScript](./javascript.md)
|
|
- [PHP](./php.md)
|
|
- [Svelte](./svelte.md)
|
|
- [Vue](./vue.md)
|
|
|
|
### Prettier Plugin
|
|
|
|
Zed supports Prettier out of the box, which means that if you have the [Tailwind CSS Prettier plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) installed, adding it to your Prettier configuration will make it work automatically:
|
|
|
|
```json
|
|
// .prettierrc
|
|
{
|
|
"plugins": ["prettier-plugin-tailwindcss"]
|
|
}
|
|
```
|