b72a46db68
Some checks failed
Update All Top Ranking Issues / update_top_ranking_issues (push) Has been cancelled
Triage Project Sync (#84) / Sync triage project (push) Has been cancelled
release_nightly / notify_on_failure (push) Has been cancelled
release_nightly / check_style (push) Has been cancelled
release_nightly / run_tests_windows (push) Has been cancelled
release_nightly / clippy_windows (push) Has been cancelled
release_nightly / bundle_linux_aarch64 (push) Has been cancelled
release_nightly / bundle_linux_x86_64 (push) Has been cancelled
release_nightly / bundle_mac_aarch64 (push) Has been cancelled
release_nightly / bundle_mac_x86_64 (push) Has been cancelled
release_nightly / bundle_windows_aarch64 (push) Has been cancelled
release_nightly / bundle_windows_x86_64 (push) Has been cancelled
release_nightly / build_nix_linux_x86_64 (push) Has been cancelled
release_nightly / build_nix_mac_aarch64 (push) Has been cancelled
release_nightly / update_nightly_tag (push) Has been cancelled
Hotfix Review Monitor / check-hotfix-reviews (push) Has been cancelled
Stale PR Review Reminder / check-stale-prs (push) Has been cancelled
Update Weekly Top Ranking Issues / update_top_ranking_issues (push) Has been cancelled
Bump collab-staging Tag / update-collab-staging-tag (push) Has been cancelled
compliance_check / scheduled_compliance_check (push) Has been cancelled
Single-commit orphan branch: full zed-industries/zed @ 8c74db0 source tree with a 3-file patch applied (no upstream history). Patch (crates/gpui_linux/src/linux/wayland/): - serial.rs: add SerialKind::KeyboardEnter - client.rs: store wl_keyboard.enter serial; add latest_serial_of() - window.rs: activate() uses keyboard-enter serial (Mutter focus gate) Mutter honors window activation only when the token carries the keyboard- focus serial from wl_keyboard.enter; GPUI used a stale mouse-press serial. See docs/tray-window-focus-wayland.md in logiguard. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
78 lines
2.8 KiB
Markdown
78 lines
2.8 KiB
Markdown
---
|
|
title: Tailwind CSS
|
|
description: "Configure Tailwind CSS language support in Zed, including language servers, formatting, and debugging."
|
|
---
|
|
|
|
# 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)
|
|
|
|
Languages which can be used with Tailwind CSS in Zed:
|
|
|
|
- [Astro](./astro.md#using-the-tailwind-css-language-server-with-astro)
|
|
- [CSS](./css.md)
|
|
- [ERB](./ruby.md#using-the-tailwind-css-language-server-with-ruby)
|
|
- [Gleam](./gleam.md)
|
|
- [HEEx](./elixir.md#using-the-tailwind-css-language-server-with-heex-templates)
|
|
- [HTML](./html.md#using-the-tailwind-css-language-server-with-html)
|
|
- [TypeScript](./typescript.md#using-the-tailwind-css-language-server-with-typescript)
|
|
- [JavaScript](./javascript.md#using-the-tailwind-css-language-server-with-javascript)
|
|
- [PHP](./php.md#using-the-tailwind-css-language-server-with-php)
|
|
- [Svelte](./svelte.md#using-the-tailwind-css-language-server-with-svelte)
|
|
- [Vue](./vue.md#using-the-tailwind-css-language-server-with-vue)
|
|
|
|
## Configuration
|
|
|
|
If by default the language server isn't enough to make Tailwind work for a given language, you can configure the language server settings and add them to the `lsp` section of your `settings.json`:
|
|
|
|
```json [settings]
|
|
{
|
|
"lsp": {
|
|
"tailwindcss-language-server": {
|
|
"settings": {
|
|
"classFunctions": ["cva", "cx"],
|
|
"experimental": {
|
|
"classRegex": ["[cls|className]\\s\\:\\=\\s\"([^\"]*)"]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
Refer to [the Tailwind CSS language server settings docs](https://github.com/tailwindlabs/tailwindcss-intellisense?tab=readme-ov-file#extension-settings) for more information.
|
|
|
|
### Using Tailwind CSS Mode in CSS Files
|
|
|
|
Zed includes support for the Tailwind CSS language mode, which provides full CSS IntelliSense support even when using Tailwind-specific at-rules like `@apply`, `@layer`, and `@theme`.
|
|
Configure language servers in Settings ({#kb zed::OpenSettings}) under Languages > CSS, or add to your settings file:
|
|
|
|
```json [settings]
|
|
{
|
|
"languages": {
|
|
"CSS": {
|
|
"language_servers": [
|
|
"tailwindcss-intellisense-css",
|
|
"!vscode-css-language-server",
|
|
"..."
|
|
]
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
The `tailwindcss-intellisense-css` language server serves as an alternative to the default CSS language server, maintaining all standard CSS IntelliSense features while adding support for Tailwind-specific syntax.
|
|
|
|
### 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"]
|
|
}
|
|
```
|