From c6dc0c7c75a74456bfe5354ff9bffe88f523a36c Mon Sep 17 00:00:00 2001 From: Andrew Haines Date: Wed, 22 Nov 2023 09:34:51 +0000 Subject: [PATCH] Document how to load the Prettier plugin --- .../automatic-class-sorting-with-prettier/index.mdx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/pages/blog/automatic-class-sorting-with-prettier/index.mdx b/src/pages/blog/automatic-class-sorting-with-prettier/index.mdx index d7edab64b..6e1e3ae57 100644 --- a/src/pages/blog/automatic-class-sorting-with-prettier/index.mdx +++ b/src/pages/blog/automatic-class-sorting-with-prettier/index.mdx @@ -25,13 +25,21 @@ This plugin scans your templates for class attributes containing Tailwind CSS cl It works seamlessly with custom Tailwind configurations, and because it's just a [Prettier](https://prettier.io/) plugin, it works anywhere Prettier works — including every popular editor and IDE, and of course on the command line. -To get started, just install `prettier-plugin-tailwindcss` as a dev-dependency: +To get started, install `prettier-plugin-tailwindcss` as a dev-dependency: ```sh {{ filename: 'Terminal' }} npm install -D prettier prettier-plugin-tailwindcss ``` -This plugin follows Prettier's [autoloading convention](https://prettier.io/docs/en/plugins.html), so as long as you've got Prettier set up in your project, it'll start working automatically as soon as it's installed. +Then add the plugin to your [Prettier configuration file](https://prettier.io/docs/en/configuration): + +```json {{ filename: '.prettierrc' }} +{ + "plugins": ["prettier-plugin-tailwindcss"] +} +``` + +You can also [load the plugin by using the `--plugin` flag with the Prettier CLI, or by using the `plugins` option with the Prettier API](https://prettier.io/docs/en/plugins.html#using-plugins). ---