diff --git a/docs/src/languages/tailwindcss.md b/docs/src/languages/tailwindcss.md index be9c9437d1382dfd356120663ebea2c1fe012684..42b08aa1eb2b08e3d542d554b8bbe1633f99f7de 100644 --- a/docs/src/languages/tailwindcss.md +++ b/docs/src/languages/tailwindcss.md @@ -37,6 +37,28 @@ Languages which can be used with Tailwind CSS in Zed: - [Svelte](./svelte.md) - [Vue](./vue.md) +### 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 `@screen`. + +To use the Tailwind CSS language mode for CSS files, add the following to `languages` section of your `settings.json`: + +```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: