@@ -12,7 +12,8 @@ npm install -D prettier prettier-plugin-tailwindcss
1212
1313Then add the plugin to your [ Prettier configuration] ( https://prettier.io/docs/en/configuration.html ) :
1414
15- ``` json
15+ ``` json5
16+ // .prettierrc
1617{
1718 " plugins" : [" prettier-plugin-tailwindcss" ]
1819}
@@ -32,10 +33,10 @@ By default the plugin will look for this file in the same directory as your Pret
3233
3334Note that paths are resolved relative to the Prettier configuration file.
3435
35- ``` js
36- // prettier.config.js
37- module . exports = {
38- tailwindConfig: ' ./styles/tailwind.config.js' ,
36+ ``` json5
37+ // .prettierrc
38+ {
39+ " tailwindConfig" : " ./styles/tailwind.config.js"
3940}
4041```
4142
@@ -47,10 +48,10 @@ By default this plugin only sorts classes in the `class` attribute as well as an
4748
4849You can sort additional attributes using the ` tailwindAttributes ` option, which takes an array of attribute names:
4950
50- ``` js
51- // prettier.config.js
52- module . exports = {
53- tailwindAttributes: [' myClassList' ],
51+ ``` json5
52+ // .prettierrc
53+ {
54+ " tailwindAttributes" : [" myClassList" ]
5455}
5556```
5657
@@ -72,10 +73,10 @@ In addition to sorting classes in attributes, you can also sort classes in strin
7273
7374You can sort classes in function calls using the ` tailwindFunctions ` option, which takes a list of function names:
7475
75- ``` js
76- // prettier.config.js
77- module . exports = {
78- tailwindFunctions: [' clsx' ],
76+ ``` json5
77+ // .prettierrc
78+ {
79+ " tailwindFunctions" : [" clsx" ]
7980}
8081```
8182
@@ -106,10 +107,10 @@ This plugin also enables sorting of classes in tagged template literals.
106107
107108You can sort classes in template literals using the ` tailwindFunctions ` option, which takes a list of function names:
108109
109- ``` js
110- // prettier.config.js
111- module . exports = {
112- tailwindFunctions: [' tw ' ],
110+ ``` json5
111+ // .prettierrc
112+ {
113+ " tailwindFunctions" : [" tw " ],
113114}
114115```
115116
0 commit comments