@@ -17,10 +17,11 @@ A blazingly fast, utility-first CSS framework built with Bun. Headwind generates
17
17
- 🎨 ** Tailwind-Compatible** - Familiar utility classes and syntax
18
18
- 💪 ** Fully Typed** - Complete TypeScript support with type-safe configuration
19
19
- 🔧 ** Highly Configurable** - Customize theme, colors, spacing, variants, and more
20
- - 📦 ** Zero Dependencies** - Minimal footprint, maximum performance
20
+ - 📦 ** Zero Runtime Dependencies** - Minimal footprint, maximum performance
21
21
- 🔥 ** Hot Reload** - Watch mode for instant rebuilds during development
22
22
- 🎭 ** Variant Support** - Responsive, state (hover, focus, etc.), dark mode, and custom variants
23
23
- ✨ ** Modern CSS Features** - Grid, Flexbox, animations, transforms, filters, and more
24
+ - 🔨 ** Class Compilation** - Optimize HTML by compiling utility groups into single class names
24
25
- 🧪 ** Thoroughly Tested** - 860+ tests including comprehensive performance benchmarks
25
26
- 🚀 ** Production Ready** - Minification, preflight CSS, and optimized builds
26
27
- ⌨️ ** CLI & API** - Use via command line or programmatic API
@@ -37,15 +38,22 @@ npm install headwind
37
38
38
39
### Quick Start
39
40
40
- 1 . ** Create a configuration file** (` headwind.config.ts ` ):
41
+ 1 . ** Initialize Headwind** :
42
+
43
+ ``` bash
44
+ # Create a config file
45
+ bunx headwind init
46
+ ```
47
+
48
+ This creates a ` headwind.config.ts ` file:
41
49
42
50
``` typescript
43
51
import type { HeadwindConfig } from ' headwind'
44
52
45
53
export default {
46
54
content: [' ./src/**/*.{html,js,ts,jsx,tsx}' ],
47
- output: ' ./dist/styles .css' ,
48
- minify: true ,
55
+ output: ' ./dist/headwind .css' ,
56
+ minify: false ,
49
57
} satisfies Partial <HeadwindConfig >
50
58
```
51
59
@@ -86,6 +94,21 @@ const result = await build({
86
94
console .log (` Generated ${result .classes .size } classes in ${result .duration }ms ` )
87
95
```
88
96
97
+ ## CLI Commands
98
+
99
+ Headwind provides a comprehensive CLI:
100
+
101
+ ``` bash
102
+ headwind build # Build CSS once
103
+ headwind watch # Build and watch for changes
104
+ headwind init # Create config file
105
+ headwind analyze # Analyze utility class usage
106
+ headwind clean # Remove output CSS file
107
+ headwind preflight # Generate preflight CSS only
108
+ headwind --version # Show version
109
+ headwind --help # Show help
110
+ ```
111
+
89
112
## Configuration
90
113
91
114
Headwind supports extensive configuration options:
@@ -153,6 +176,8 @@ export default {
153
176
} satisfies Partial <HeadwindConfig >
154
177
```
155
178
179
+ For more configuration options, see the [ Configuration Guide] ( https://headwind.stacksjs.org/config ) .
180
+
156
181
## Available Utilities
157
182
158
183
Headwind provides a comprehensive set of utility classes compatible with Tailwind CSS:
@@ -190,6 +215,24 @@ Headwind supports arbitrary values for maximum flexibility:
190
215
</div >
191
216
```
192
217
218
+ ### Compile Class (HTML Optimization)
219
+
220
+ Optimize your HTML by compiling utility groups into single class names:
221
+
222
+ ``` html
223
+ <!-- Before -->
224
+ <div class =" :hw: flex items-center justify-between px-4 py-2 bg-white rounded-lg shadow-md" >
225
+ Content
226
+ </div >
227
+
228
+ <!-- After build -->
229
+ <div class =" hw-2k9d3a" >
230
+ Content
231
+ </div >
232
+ ```
233
+
234
+ This reduces HTML file size by up to 60%. Learn more in the [ Compile Class documentation] ( https://headwind.stacksjs.org/features/compile-class ) .
235
+
193
236
## Testing
194
237
195
238
Headwind includes a comprehensive test suite with 860+ tests:
@@ -253,9 +296,19 @@ bun run typecheck
253
296
bun run build
254
297
```
255
298
299
+ ## Documentation
300
+
301
+ For comprehensive documentation, visit [ headwind.stacksjs.org] ( https://headwind.stacksjs.org )
302
+
303
+ - [ Installation Guide] ( https://headwind.stacksjs.org/install )
304
+ - [ Usage Guide] ( https://headwind.stacksjs.org/usage )
305
+ - [ Configuration] ( https://headwind.stacksjs.org/config )
306
+ - [ CLI Reference] ( https://headwind.stacksjs.org/features/cli )
307
+ - [ API Reference] ( https://headwind.stacksjs.org/api-reference )
308
+
256
309
## Changelog
257
310
258
- Please see our [ releases] ( https://github.com/stackjs /headwind/releases ) page for more information on what has changed recently.
311
+ Please see our [ releases] ( https://github.com/stacksjs /headwind/releases ) page for more information on what has changed recently.
259
312
260
313
## Contributing
261
314
0 commit comments