Skip to content

Commit 8bf5fb2

Browse files
committed
Update README with banner
1 parent a032709 commit 8bf5fb2

File tree

2 files changed

+11
-9
lines changed

2 files changed

+11
-9
lines changed

.github/banner.jpg

86.7 KB
Loading

README.md

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
1-
# prettier-plugin-tailwindcss
1+
<img src="https://raw.githubusercontent.com/tailwindlabs/prettier-plugin-tailwindcss/main/.github/banner.png" alt="prettier-plugin-tailwindcss" />
22

3-
A [Prettier](https://prettier.io/) plugin for Tailwind CSS that automatically sorts classes based on Tailwind's internal class sorting algorithm.
4-
5-
> Note, this plugin is only compatible with Tailwind CSS v3.
3+
A [Prettier](https://prettier.io/) plugin for Tailwind CSS v3.0+ that automatically sorts classes based on our recommended class order.
64

75
## Installation
86

9-
Install `prettier-plugin-tailwindcss` via npm as a dev-dependency.
7+
To get started, just install `prettier-plugin-tailwindcss` as a dev-dependency:
108

119
```sh
12-
npm install --save-dev prettier prettier-plugin-tailwindcss
10+
npm install -D prettier prettier-plugin-tailwindcss
1311
```
1412

15-
This plugin follows the Prettier autoloading convention, so once it's installed it should automatically start working.
13+
This plugin follows Prettier’s autoloading convention, so as long as you’ve got Prettier set up in your project, it’ll start working automatically as soon as it’s installed.
1614

1715
## Resolving your Tailwind configuration
1816

@@ -33,6 +31,10 @@ If a local configuration file cannot be found the plugin will fallback to the de
3331

3432
## Compatibility with other Prettier plugins
3533

36-
To make this plugin work we had to build it in a way that the Prettier plugin system was not originally designed for. We had to extend the core parsers in Prettier with our own custom parsers. And while this totally works, it makes this plugin incompatible with other Prettier plugins that are built the same way.
34+
To make this plugin work we had to use private Prettier APIs that can only be used by a single plugin at once. This means this plugin is incompatible with other Prettier plugins that are using the same APIs.
35+
36+
The most popular example we know of is [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte), which can't be installed at the same time as the Tailwind CSS plugin.
37+
38+
To work around this, we've bundled `prettier-plugin-svelte` directly into `prettier-plugin-tailwindcss`, so if you'd like to use this plugin with Svelte, just uninstall `prettier-plugin-svelte` and everything should work as expected.
3739

38-
One example of this incompatibility is with the [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte) plugin. It's not possible to use the Svelte plugin at the same time as the Tailwind CSS plugin. However, as a workaround for this specific situation, we've bundled the Svelte plugin into our plugin. Simply remove `prettier-plugin-svelte` from your Svelte project when installing the `prettier-plugin-tailwindcss` plugin, and everything should continue working.
40+
If you discover any other incompatibilities, open an issue and hopefully we can figure out a way to make it work.

0 commit comments

Comments
 (0)