0
# Prettier Plugin Tailwind CSS
1

2
Prettier Plugin Tailwind CSS is a Prettier v3+ plugin that automatically sorts Tailwind CSS classes based on the recommended class order. It provides parsers for multiple languages and frameworks, with extensive configuration options and compatibility with other Prettier plugins.
3

4
## Package Information
5

6
- **Package Name**: prettier-plugin-tailwindcss
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install -D prettier-plugin-tailwindcss`
10

11
## Core Imports
12

13
This plugin is automatically loaded by Prettier when configured. Users do not directly import from this package as it's a Prettier plugin:
14

15
```typescript
16
// No direct imports needed - plugin is configured in Prettier settings
17
// For TypeScript projects, the plugin automatically provides type safety
18
// through Prettier's plugin system
19
```
20

21
## Basic Usage
22

23
### Prettier Configuration
24

25
Add the plugin to your Prettier configuration:
26

27
```json
28
{
29
  "plugins": ["prettier-plugin-tailwindcss"]
30
}
31
```
32

33
### Basic Class Sorting
34

35
The plugin automatically sorts Tailwind classes in various contexts:
36

37
```jsx
38
// Before formatting
39
<div className="px-4 bg-blue-500 text-white py-2 rounded">
40
  Content
41
</div>
42

43
// After formatting
44
<div className="rounded bg-blue-500 px-4 py-2 text-white">
45
  Content
46
</div>
47
```
48

49
### With Configuration
50

51
```json
52
{
53
  "plugins": ["prettier-plugin-tailwindcss"],
54
  "tailwindConfig": "./tailwind.config.js",
55
  "tailwindFunctions": ["clsx", "cn"],
56
  "tailwindAttributes": ["myClass"]
57
}
58
```
59

60
## Architecture
61

62
The plugin is built around several key components:
63

64
- **Parser System**: Creates custom parsers for each supported file format that wrap the original Prettier parsers
65
- **AST Transformation**: Traverses and modifies Abstract Syntax Trees to sort class strings while preserving code structure
66
- **Tailwind Integration**: Loads Tailwind configuration to determine proper class ordering based on layer and utility priority
67
- **Plugin Compatibility**: Works with other Prettier plugins through explicit compatibility handling
68
- **Multi-Format Support**: Handles HTML, CSS, JavaScript, TypeScript, and various template languages
69

70
## Capabilities
71

72
### Configuration Options
73

74
Comprehensive configuration system for customizing plugin behavior including Tailwind config paths, custom attributes, function names, and formatting preferences.
75

76
```typescript { .api }
77
interface PluginOptions {
78
  /** Path to Tailwind configuration file */
79
  tailwindConfig?: string;
80
  /** Path to the CSS stylesheet in your Tailwind project (v4+) */
81
  tailwindStylesheet?: string;
82
  /** Path to the CSS entrypoint in your Tailwind project (v4+) @deprecated Use tailwindStylesheet instead */
83
  tailwindEntryPoint?: string;
84
  /** List of functions and tagged templates that contain sortable Tailwind classes */
85
  tailwindFunctions?: string[];
86
  /** List of attributes/props that contain sortable Tailwind classes */
87
  tailwindAttributes?: string[];
88
  /** Preserve whitespace around Tailwind classes when sorting */
89
  tailwindPreserveWhitespace?: boolean;
90
  /** Preserve duplicate classes inside a class list when sorting */
91
  tailwindPreserveDuplicates?: boolean;
92
  /** The package name to use when loading Tailwind CSS */
93
  tailwindPackageName?: string;
94
}
95
```
96

97
[Configuration](./configuration.md)
98

99
### Plugin Integration
100

101
The plugin integrates with Prettier's plugin system to provide class sorting capabilities across multiple file formats and languages.
102

103
```typescript { .api }
104
// Plugin exports (used internally by Prettier)
105
const parsers: Record<string, Parser>;
106
const printers: Record<string, Printer>;
107
const options: Record<string, SupportOption>;
108
```
109

110
[Parsers and Transformations](./parsers.md)
111

112
## Supported Languages and Frameworks
113

114
### Template Languages
115
- HTML, Angular, Vue.js, Svelte, Astro
116
- Glimmer (Ember.js), Marko, Twig, Pug
117
- Liquid templates, Lightning Web Components (LWC)
118

119
### Programming Languages
120
- JavaScript (ES5+), TypeScript
121
- CSS, SCSS, Less
122
- JSX/TSX (React)
123

124
### Attributes and Contexts
125
- Static attributes: `class`, `className`
126
- Dynamic attributes: `[ngClass]`, `:class`, `v-bind:class`
127
- CSS `@apply` directives
128
- Function calls: `clsx()`, `cn()`, custom functions
129
- Template literals and tagged templates
130

131