66<!-- [![npm downloads][npm-downloads-src]][npm-downloads-href] -->
77<!-- [![Codecov][codecov-src]][codecov-href] -->
88
9- # headwind
9+ # crosswind
1010
11- A blazingly fast, utility-first CSS framework built with Bun. Headwind generates only the CSS you need by scanning your files for utility classes, providing Tailwind CSS-compatible utilities with exceptional performance.
11+ A blazingly fast, utility-first CSS framework built with Bun. Crosswind generates only the CSS you need by scanning your files for utility classes, providing Tailwind CSS-compatible utilities with exceptional performance.
1212
1313## Features
1414
@@ -31,59 +31,59 @@ A blazingly fast, utility-first CSS framework built with Bun. Headwind generates
3131### Installation
3232
3333``` bash
34- bun add headwind
34+ bun add crosswind
3535# or
36- npm install headwind
36+ npm install crosswind
3737```
3838
3939### Quick Start
4040
41- 1 . ** Initialize Headwind ** :
41+ 1 . ** Initialize Crosswind ** :
4242
4343``` bash
4444# Create a config file
45- bunx headwind init
45+ bunx crosswind init
4646```
4747
48- This creates a ` headwind .config.ts` file:
48+ This creates a ` crosswind .config.ts` file:
4949
5050``` typescript
51- import type { HeadwindOptions } from ' headwind '
51+ import type { CrosswindOptions } from ' crosswind '
5252
5353export default {
5454 content: [' ./src/**/*.{html,js,ts,jsx,tsx}' ],
55- output: ' ./dist/headwind .css' ,
55+ output: ' ./dist/crosswind .css' ,
5656 minify: false ,
57- } satisfies HeadwindOptions
57+ } satisfies CrosswindOptions
5858```
5959
60602 . ** Add utility classes to your HTML** :
6161
6262``` html
6363<div class =" flex items-center justify-between p-4 bg-blue-500 text-white rounded-lg shadow-md hover:bg-blue-600" >
64- <h1 class =" text-2xl font-bold" >Hello Headwind !</h1 >
64+ <h1 class =" text-2xl font-bold" >Hello Crosswind !</h1 >
6565</div >
6666```
6767
68683 . ** Build your CSS** :
6969
7070``` bash
7171# Build once
72- bunx headwind build
72+ bunx crosswind build
7373
7474# Build and watch for changes
75- bunx headwind watch
75+ bunx crosswind watch
7676
7777# Build with options
78- bunx headwind build --output ./dist/styles.css --minify
78+ bunx crosswind build --output ./dist/styles.css --minify
7979```
8080
8181### Programmatic API
8282
83- You can also use Headwind programmatically:
83+ You can also use Crosswind programmatically:
8484
8585``` typescript
86- import { build } from ' headwind '
86+ import { build } from ' crosswind '
8787
8888const result = await build ({
8989 content: [' ./src/**/*.html' ],
@@ -96,25 +96,25 @@ console.log(`Generated ${result.classes.size} classes in ${result.duration}ms`)
9696
9797## CLI Commands
9898
99- Headwind provides a comprehensive CLI:
99+ Crosswind provides a comprehensive CLI:
100100
101101``` 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
102+ crosswind build # Build CSS once
103+ crosswind watch # Build and watch for changes
104+ crosswind init # Create config file
105+ crosswind analyze # Analyze utility class usage
106+ crosswind clean # Remove output CSS file
107+ crosswind preflight # Generate preflight CSS only
108+ crosswind --version # Show version
109+ crosswind --help # Show help
110110```
111111
112112## Configuration
113113
114- Headwind supports extensive configuration options:
114+ Crosswind supports extensive configuration options:
115115
116116``` typescript
117- import type { HeadwindOptions } from ' headwind '
117+ import type { CrosswindOptions } from ' crosswind '
118118
119119export default {
120120 // Content sources to scan for utility classes
@@ -173,14 +173,14 @@ export default {
173173
174174 // Presets
175175 presets: [],
176- } satisfies HeadwindOptions
176+ } satisfies CrosswindOptions
177177```
178178
179- For more configuration options, see the [ Configuration Guide] ( https://headwind .stacksjs.org/config ) .
179+ For more configuration options, see the [ Configuration Guide] ( https://crosswind .stacksjs.org/config ) .
180180
181181## Available Utilities
182182
183- Headwind provides a comprehensive set of utility classes compatible with Tailwind CSS:
183+ Crosswind provides a comprehensive set of utility classes compatible with Tailwind CSS:
184184
185185- ** Layout** : display, position, overflow, z-index, etc.
186186- ** Flexbox & Grid** : flex, grid, gap, align, justify, etc.
@@ -207,7 +207,7 @@ Headwind provides a comprehensive set of utility classes compatible with Tailwin
207207
208208### Arbitrary Values
209209
210- Headwind supports arbitrary values for maximum flexibility:
210+ Crosswind supports arbitrary values for maximum flexibility:
211211
212212``` html
213213<div class =" w-[500px] h-[calc(100vh-4rem)] bg-[#1da1f2] text-[clamp(1rem,5vw,3rem)]" >
@@ -231,11 +231,11 @@ Optimize your HTML by compiling utility groups into single class names:
231231</div >
232232```
233233
234- This reduces HTML file size by up to 60%. Learn more in the [ Compile Class documentation] ( https://headwind .stacksjs.org/features/compile-class ) .
234+ This reduces HTML file size by up to 60%. Learn more in the [ Compile Class documentation] ( https://crosswind .stacksjs.org/features/compile-class ) .
235235
236236## Testing
237237
238- Headwind includes a comprehensive test suite with 1300+ tests:
238+ Crosswind includes a comprehensive test suite with 1300+ tests:
239239
240240``` bash
241241# Run all tests
@@ -259,38 +259,38 @@ bun test --watch
259259
260260## Performance
261261
262- Headwind is designed for speed. We've benchmarked against other popular utility-first CSS frameworks to demonstrate our performance advantages.
262+ Crosswind is designed for speed. We've benchmarked against other popular utility-first CSS frameworks to demonstrate our performance advantages.
263263
264264### Benchmark Results
265265
266- Our comprehensive benchmark suite (20 tests) compares Headwind with UnoCSS, Tailwind CSS v3, and Tailwind CSS v4.
266+ Our comprehensive benchmark suite (20 tests) compares Crosswind with UnoCSS, Tailwind CSS v3, and Tailwind CSS v4.
267267
268- | Scenario | Headwind | UnoCSS | Tailwind v3 | Tailwind v4 | Winner |
268+ | Scenario | Crosswind | UnoCSS | Tailwind v3 | Tailwind v4 | Winner |
269269| ----------| ----------| --------| -------------| -------------| --------|
270- | ** Simple Utilities** (10 classes) | ** 2.75µs** | 31.58µs | 14.32ms | 46.47ms | Headwind ⚡ |
271- | ** Complex Utilities** (11 classes) | ** 8.61µs** | 43.77µs | 14.25ms | 39.26ms | Headwind ⚡ |
272- | ** Arbitrary Values** (10 classes) | ** 41.71µs** | 64.44µs | 15.52ms | - | Headwind ⚡ |
273- | ** Real-world Components** (~ 60 classes) | ** 25.26µs** | 97.71µs | 16.12ms | 45.07ms | Headwind ⚡ |
274- | ** Large Scale** (500 classes) | ** 94.89µs** | 201.30µs | 14.51ms | 40.06ms | Headwind ⚡ |
275- | ** CSS Output** (1000 values) | ** 1.50ms** | 115.59ms | 16.03ms | - | Headwind ⚡ |
276- | ** Color Utilities** (330 classes) | ** 100.85µs** | 526.82µs | 12.89ms | 37.27ms | Headwind ⚡ |
277- | ** Responsive** (500 classes) | ** 100.16µs** | 211.39µs | 12.86ms | 41.07ms | Headwind ⚡ |
278- | ** Interactive States** (440 classes) | ** 260.75µs** | 1.16ms | 13.84ms | 38.06ms | Headwind ⚡ |
279- | ** Duplicate Handling** (6000 items) | ** 43.19µs** | 1.81ms | 18.47ms | 48.11ms | Headwind ⚡ |
280- | ** Typography** (50 classes) | ** 16.06µs** | 94.37µs | 14.37ms | 39.33ms | Headwind ⚡ |
281- | ** Flexbox** (50 classes) | ** 13.77µs** | 88.62µs | 13.04ms | 42.38ms | Headwind ⚡ |
282- | ** Grid** (55 classes) | ** 59.89µs** | 118.31µs | 15.10ms | 39.00ms | Headwind ⚡ |
283- | ** Stacked Variants** (40 classes) | ** 73.43µs** | 148.79µs | 15.65ms | 41.11ms | Headwind ⚡ |
284- | ** Transforms** (55 classes) | ** 78.39µs** | 100.85µs | 13.76ms | 44.34ms | Headwind ⚡ |
285- | ** Transitions** (30 classes) | ** 12.96µs** | 66.47µs | 14.38ms | 36.46ms | Headwind ⚡ |
286- | ** Border & Ring** (45 classes) | ** 12.55µs** | 90.45µs | 10.52ms | 40.58ms | Headwind ⚡ |
287- | ** Shadow & Effects** (35 classes) | ** 6.92µs** | 62.12µs | 10.89ms | 36.62ms | Headwind ⚡ |
288- | ** Incremental Generation** (200 classes) | ** 73.91µs** | 196.35µs | 14.07ms | 35.58ms | Headwind ⚡ |
289- | ** Full Project** (~ 800 classes) | ** 649.87µs** | 1.38ms | 14.41ms | - | Headwind ⚡ |
270+ | ** Simple Utilities** (10 classes) | ** 2.75µs** | 31.58µs | 14.32ms | 46.47ms | Crosswind ⚡ |
271+ | ** Complex Utilities** (11 classes) | ** 8.61µs** | 43.77µs | 14.25ms | 39.26ms | Crosswind ⚡ |
272+ | ** Arbitrary Values** (10 classes) | ** 41.71µs** | 64.44µs | 15.52ms | - | Crosswind ⚡ |
273+ | ** Real-world Components** (~ 60 classes) | ** 25.26µs** | 97.71µs | 16.12ms | 45.07ms | Crosswind ⚡ |
274+ | ** Large Scale** (500 classes) | ** 94.89µs** | 201.30µs | 14.51ms | 40.06ms | Crosswind ⚡ |
275+ | ** CSS Output** (1000 values) | ** 1.50ms** | 115.59ms | 16.03ms | - | Crosswind ⚡ |
276+ | ** Color Utilities** (330 classes) | ** 100.85µs** | 526.82µs | 12.89ms | 37.27ms | Crosswind ⚡ |
277+ | ** Responsive** (500 classes) | ** 100.16µs** | 211.39µs | 12.86ms | 41.07ms | Crosswind ⚡ |
278+ | ** Interactive States** (440 classes) | ** 260.75µs** | 1.16ms | 13.84ms | 38.06ms | Crosswind ⚡ |
279+ | ** Duplicate Handling** (6000 items) | ** 43.19µs** | 1.81ms | 18.47ms | 48.11ms | Crosswind ⚡ |
280+ | ** Typography** (50 classes) | ** 16.06µs** | 94.37µs | 14.37ms | 39.33ms | Crosswind ⚡ |
281+ | ** Flexbox** (50 classes) | ** 13.77µs** | 88.62µs | 13.04ms | 42.38ms | Crosswind ⚡ |
282+ | ** Grid** (55 classes) | ** 59.89µs** | 118.31µs | 15.10ms | 39.00ms | Crosswind ⚡ |
283+ | ** Stacked Variants** (40 classes) | ** 73.43µs** | 148.79µs | 15.65ms | 41.11ms | Crosswind ⚡ |
284+ | ** Transforms** (55 classes) | ** 78.39µs** | 100.85µs | 13.76ms | 44.34ms | Crosswind ⚡ |
285+ | ** Transitions** (30 classes) | ** 12.96µs** | 66.47µs | 14.38ms | 36.46ms | Crosswind ⚡ |
286+ | ** Border & Ring** (45 classes) | ** 12.55µs** | 90.45µs | 10.52ms | 40.58ms | Crosswind ⚡ |
287+ | ** Shadow & Effects** (35 classes) | ** 6.92µs** | 62.12µs | 10.89ms | 36.62ms | Crosswind ⚡ |
288+ | ** Incremental Generation** (200 classes) | ** 73.91µs** | 196.35µs | 14.07ms | 35.58ms | Crosswind ⚡ |
289+ | ** Full Project** (~ 800 classes) | ** 649.87µs** | 1.38ms | 14.41ms | - | Crosswind ⚡ |
290290
291291### Highlights
292292
293- - ** Headwind wins 20/20 benchmarks** vs all competitors
293+ - ** Crosswind wins 20/20 benchmarks** vs all competitors
294294- ** Simple utilities** : 11x faster than UnoCSS, 5,200x faster than Tailwind v3
295295- ** Typography** : 6x faster than UnoCSS
296296- ** Flexbox** : 6.4x faster than UnoCSS
@@ -310,21 +310,21 @@ You can run the benchmarks yourself to see the performance on your hardware:
310310# Run the comprehensive benchmark suite
311311bun run benchmark
312312
313- # Or run from the packages/headwind directory
314- cd packages/headwind
313+ # Or run from the packages/crosswind directory
314+ cd packages/crosswind
315315bun run benchmark
316316```
317317
318318All benchmarks use [ Mitata] ( https://github.com/evanwashere/mitata ) for accurate measurements and run on Bun runtime. Results may vary based on your hardware.
319319
320320## Development
321321
322- To contribute to Headwind development:
322+ To contribute to Crosswind development:
323323
324324``` bash
325325# Clone the repository
326- git clone https://github.com/stacksjs/headwind .git
327- cd headwind
326+ git clone https://github.com/stacksjs/crosswind .git
327+ cd crosswind
328328
329329# Install dependencies
330330bun install
@@ -347,17 +347,17 @@ bun run build
347347
348348## Documentation
349349
350- For comprehensive documentation, visit [ headwind .stacksjs.org] ( https://headwind .stacksjs.org )
350+ For comprehensive documentation, visit [ crosswind .stacksjs.org] ( https://crosswind .stacksjs.org )
351351
352- - [ Installation Guide] ( https://headwind .stacksjs.org/install )
353- - [ Usage Guide] ( https://headwind .stacksjs.org/usage )
354- - [ Configuration] ( https://headwind .stacksjs.org/config )
355- - [ CLI Reference] ( https://headwind .stacksjs.org/features/cli )
356- - [ API Reference] ( https://headwind .stacksjs.org/api-reference )
352+ - [ Installation Guide] ( https://crosswind .stacksjs.org/install )
353+ - [ Usage Guide] ( https://crosswind .stacksjs.org/usage )
354+ - [ Configuration] ( https://crosswind .stacksjs.org/config )
355+ - [ CLI Reference] ( https://crosswind .stacksjs.org/features/cli )
356+ - [ API Reference] ( https://crosswind .stacksjs.org/api-reference )
357357
358358## Changelog
359359
360- Please see our [ releases] ( https://github.com/stacksjs/headwind /releases ) page for more information on what has changed recently.
360+ Please see our [ releases] ( https://github.com/stacksjs/crosswind /releases ) page for more information on what has changed recently.
361361
362362## Contributing
363363
@@ -375,7 +375,7 @@ We welcome contributions! Whether it's:
375375
376376For help, discussion about best practices, or any other conversation that would benefit from being searchable:
377377
378- [ Discussions on GitHub] ( https://github.com/stacksjs/headwind /discussions )
378+ [ Discussions on GitHub] ( https://github.com/stacksjs/crosswind /discussions )
379379
380380For casual chit-chat with others using this package:
381381
@@ -401,10 +401,10 @@ The MIT License (MIT). Please see [LICENSE](LICENSE.md) for more information.
401401Made with 💙
402402
403403<!-- Badges -->
404- [ npm-version-src ] : https://img.shields.io/npm/v/headwind ?style=flat-square
405- [ npm-version-href ] : https://npmjs.com/package/headwind
406- [ github-actions-src ] : https://img.shields.io/github/actions/workflow/status/stacksjs/headwind /ci.yml?style=flat-square&branch=main
407- [ github-actions-href ] : https://github.com/stacksjs/headwind /actions?query=workflow%3Aci
404+ [ npm-version-src ] : https://img.shields.io/npm/v/crosswind ?style=flat-square
405+ [ npm-version-href ] : https://npmjs.com/package/crosswind
406+ [ github-actions-src ] : https://img.shields.io/github/actions/workflow/status/stacksjs/crosswind /ci.yml?style=flat-square&branch=main
407+ [ github-actions-href ] : https://github.com/stacksjs/crosswind /actions?query=workflow%3Aci
408408
409- <!-- [codecov-src]: https://img.shields.io/codecov/c/gh/stacksjs/headwind /main?style=flat-square
410- [codecov-href]: https://codecov.io/gh/stacksjs/headwind -->
409+ <!-- [codecov-src]: https://img.shields.io/codecov/c/gh/stacksjs/crosswind /main?style=flat-square
410+ [codecov-href]: https://codecov.io/gh/stacksjs/crosswind -->
0 commit comments