0
# Parsers and Transformations
1

2
The plugin integrates with Prettier's parser system to provide Tailwind class sorting across multiple file formats and languages. Users configure the plugin through Prettier settings, and the plugin automatically handles class sorting in supported file types.
3

4
## Capabilities
5

6
### Plugin Integration
7

8
The plugin exports parsers that extend Prettier's built-in parsers with Tailwind class sorting capabilities.
9

10
```typescript { .api }
11
// Plugin exports (used internally by Prettier)
12
const parsers: Record<string, Parser>;
13
const printers: Record<string, Printer>;
14
```
15

16
### Supported File Formats
17

18
The plugin automatically sorts Tailwind classes in the following file types when configured in Prettier:
19

20
#### HTML and Templates
21
- **HTML** (`.html`) - Standard HTML documents
22
- **Angular** (`.html`) - Angular component templates  
23
- **Vue** (`.vue`) - Vue.js single file components
24
- **Svelte** (`.svelte`) - Svelte components
25
- **Astro** (`.astro`) - Astro components
26
- **Glimmer** (`.hbs`) - Ember.js Handlebars templates
27
- **Liquid** - Shopify Liquid templates
28
- **Twig** - Twig template engine
29
- **Pug** - Pug template engine
30
- **Marko** - Marko templating language
31
- **LWC** - Lightning Web Components
32

33
#### CSS and Preprocessors
34
- **CSS** (`.css`) - Standard CSS files with `@apply` directives
35
- **SCSS** (`.scss`) - Sass stylesheets
36
- **Less** (`.less`) - Less stylesheets
37

38
#### JavaScript and TypeScript
39
- **JavaScript** (`.js`, `.mjs`) - JavaScript files with JSX
40
- **TypeScript** (`.ts`, `.tsx`) - TypeScript files
41
- **JSX/TSX** - React components with `className` attributes
42

43
### Attribute Support
44

45
The plugin sorts classes in different attributes based on the file format:
46

47
#### Static Attributes (sorted directly)
48
```typescript { .api }
49
// HTML-based formats
50
class="..."           // HTML, Angular, Vue
51
className="..."       // React/JSX
52

53
// Framework-specific
54
[class]="..."         // Angular property binding
55
:class="..."          // Vue.js binding
56
v-bind:class="..."    // Vue.js binding (full syntax)
57
```
58

59
#### Dynamic Attributes (JavaScript expressions parsed)
60
```typescript { .api }
61
// Angular
62
[ngClass]="expression"
63

64
// Vue.js  
65
:class="expression"
66
v-bind:class="expression"
67

68
// Astro
69
class:list="expression"
70
```
71

72
### Function Call Support
73

74
When configured with `tailwindFunctions`, the plugin sorts classes inside function calls:
75

76
```javascript
77
// Example with clsx function
78
clsx("px-4 bg-blue-500 text-white py-2")
79
// Becomes: clsx("bg-blue-500 px-4 py-2 text-white")
80

81
// Template literals
82
tw`px-4 bg-blue-500 text-white py-2`
83
// Becomes: tw`bg-blue-500 px-4 py-2 text-white`
84
```
85

86
### CSS @apply Directive Support
87

88
The plugin sorts Tailwind utilities in CSS `@apply` directives:
89

90
```css
91
.my-component {
92
  @apply px-4 bg-blue-500 text-white py-2;
93
}
94

95
/* Becomes: */
96
.my-component {  
97
  @apply bg-blue-500 px-4 py-2 text-white;
98
}
99
```
100

101
## Configuration Integration
102

103
### Custom Attributes
104

105
Add custom attributes to sort with the `tailwindAttributes` option:
106

107
```json
108
{
109
  "tailwindAttributes": ["myClass", "customClasses"]
110
}
111
```
112

113
This enables sorting in custom attributes:
114

115
```html
116
<div myClass="px-4 bg-blue-500 text-white py-2">Content</div>
117
```
118

119
### Custom Functions
120

121
Add custom function names with the `tailwindFunctions` option:
122

123
```json
124
{
125
  "tailwindFunctions": ["clsx", "cn", "classNames"]
126
}
127
```
128

129
This enables sorting inside specified function calls:
130

131
```javascript
132
const classes = cn("px-4 bg-blue-500 text-white py-2");
133
```
134

135
## Framework-Specific Features
136

137
### Angular
138
- Sorts `class` attributes in templates
139
- Parses and sorts `[ngClass]` directive expressions
140
- Handles Angular interpolation syntax
141

142
### Vue.js
143
- Sorts `class` attributes in templates  
144
- Parses and sorts `:class` and `v-bind:class` expressions
145
- Supports both object and array syntax in bindings
146

147
### React/JSX
148
- Sorts both `class` and `className` attributes
149
- Handles JSX expression containers
150
- Supports template literals and function calls
151

152
### Svelte
153
- Sorts `class` attributes in components
154
- Handles Svelte's reactive class syntax
155
- Processes mustache tag expressions
156

157
### CSS Preprocessors
158
- Preserves `!important` flags in `@apply` directives
159
- Maintains variable references and calculations
160
- Works with nested rules and mixins