docs: Improve the Tailwind CSS page (#31681)

Namely, ensuring we mention the support for their Prettier plugins.

Release Notes:

- N/A
This commit is contained in:
Danilo Leal
2025-05-29 08:15:59 -03:00
committed by GitHub
parent cb187b0b4d
commit e3354543c0
6 changed files with 20 additions and 9 deletions
+2 -2
View File
@@ -7,7 +7,7 @@ JavaScript support is available natively in Zed.
## Code formatting
Formatting on save is enabled by default for JavaScript, using TypeScript's built-in code formatting. But many JavaScript projects use other command-line code-formatting tools, such as [Prettier](https://prettier.io/). You can use one of these tools by specifying an _external_ code formatter for JavaScript in your settings. See the [configuration](../configuring-zed.md) documentation for more information.
Formatting on save is enabled by default for JavaScript, using TypeScript's built-in code formatting. But many JavaScript projects use other command-line code-formatting tools, such as [Prettier](https://prettier.io/). You can use one of these tools by specifying an _external_ code formatter for JavaScript in your settings. See [the configuration docs](../configuring-zed.md) for more information.
For example, if you have Prettier installed and on your `PATH`, you can use it to format JavaScript files by adding the following to your `settings.json`:
@@ -77,7 +77,7 @@ You can also only execute a single ESLint rule when using `fixAll`:
```
> **Note:** the other formatter you have configured will still run, after ESLint.
> So if your language server or prettier configuration don't format according to
> So if your language server or Prettier configuration don't format according to
> ESLint's rules, then they will overwrite what ESLint fixed and you end up with
> errors.
+1 -1
View File
@@ -14,7 +14,7 @@ While editing these files you can use `cmd-/` (macOS) or `ctrl-/` (Linux) to tog
If you use files with the `*.jsonc` extension when using `Format Document` or have `format_on_save` enabled, Zed invokes Prettier as the formatter. Prettier has an [outstanding issue](https://github.com/prettier/prettier/issues/15956) where it will add trailing commas to files with a `jsonc` extension. JSONC files which have a `.json` extension are unaffected.
To workaround this behavior you can add the following to your `.prettierrc`
To workaround this behavior you can add the following to your `.prettierrc` configuration file:
```json
{
+12 -1
View File
@@ -1,6 +1,6 @@
# Tailwind CSS
Tailwind CSS support is built into Zed.
Zed has built-in support for Tailwind CSS autocomplete, linting, and hover previews.
- Language Server: [tailwindlabs/tailwindcss-intellisense](https://github.com/tailwindlabs/tailwindcss-intellisense)
@@ -22,3 +22,14 @@ Languages which can be used with Tailwind CSS in Zed:
- [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"]
}
```
+3 -3
View File
@@ -32,11 +32,11 @@ Note, settings keys must be nested, so `yaml.keyOrdering` becomes `{"yaml": { "k
## Formatting
By default Zed will use prettier for formatting YAML files.
By default, Zed uses Prettier for formatting YAML files.
### Prettier Formatting
You can customize the formatting behavior of Prettier. For example to use single-quotes in yaml files add the following to a `.prettierrc`:
You can customize the formatting behavior of Prettier. For example to use single-quotes in yaml files add the following to your `.prettierrc` configuration file:
```json
{
@@ -53,7 +53,7 @@ You can customize the formatting behavior of Prettier. For example to use single
### yaml-language-server Formatting
To use `yaml-language-server` instead of Prettier for YAML formatting, add the following to your Zed settings.json:
To use `yaml-language-server` instead of Prettier for YAML formatting, add the following to your Zed `settings.json`:
```json
"languages": {