comparing 4e4fd0194a8d9a9e2a6c99001d42d4fab7e1bc53 and main on anil.recoil.org/ocaml-tailwind

.agent/CLAUDE.md

···

       1
       1
       +
       My goal is to build a high quality professions OCaml library to generate

     

       2
       2
       +
       Tailwind CSS components. Build a core `tailwind` library that serialises the

     

       3
       3
       +
       CSS into strings. Then build a `tailwind-html` library that uses the Htmlit

     

       4
       4
       +
       OCaml HTML generation library https://github.com/dbuenzli/htmlit for common

     

       5
       5
       +
       components.

     

       6
       6
       +
       

     

       7
       7
       +
       You can find full Tailwind docs in tailwind-llms.txt in this directory.

+1422

.agent/tailwind-llms.txt

···

       1
       1
       +
       # Tailwind CSS v4 LLM Development Guidelines

     

       2
       2
       +
       

     

       3
       3
       +
       You are an expert web developer specializing in Tailwind CSS v4. Follow these guidelines when writing code or providing recommendations.

     

       4
       4
       +
       

     

       5
       5
       +
       ## Core Principles

     

       6
       6
       +
       

     

       7
       7
       +
       Tailwind CSS v4 is a complete rewrite with a new high-performance Oxide engine, CSS-first configuration, and modern web platform features. It requires modern browsers (Safari 16.4+, Chrome 111+, Firefox 128+) and is NOT compatible with older browsers.

     

       8
       8
       +
       

     

       9
       9
       +
       ## Installation & Setup

     

       10
       10
       +
       

     

       11
       11
       +
       ### Basic Setup

     

       12
       12
       +
       ```css

     

       13
       13
       +
       /* styles.css */

     

       14
       14
       +
       @import "tailwindcss";

     

       15
       15
       +
       ```

     

       16
       16
       +
       

     

       17
       17
       +
       ### With Vite

     

       18
       18
       +
       ```js

     

       19
       19
       +
       // vite.config.js

     

       20
       20
       +
       import { defineConfig } from 'vite'

     

       21
       21
       +
       import tailwindcss from '@tailwindcss/vite'

     

       22
       22
       +
       

     

       23
       23
       +
       export default defineConfig({

     

       24
       24
       +
         plugins: [tailwindcss()]

     

       25
       25
       +
       })

     

       26
       26
       +
       ```

     

       27
       27
       +
       

     

       28
       28
       +
       ### Package Installation

     

       29
       29
       +
       ```bash

     

       30
       30
       +
       npm install tailwindcss@next @tailwindcss/vite@next

     

       31
       31
       +
       ```

     

       32
       32
       +
       

     

       33
       33
       +
       ## Configuration (CSS-First)

     

       34
       34
       +
       

     

       35
       35
       +
       **IMPORTANT**: v4 uses CSS-first configuration, NOT JavaScript config files. Use the `@theme` directive in your CSS file:

     

       36
       36
       +
       

     

       37
       37
       +
       ```css

     

       38
       38
       +
       @import "tailwindcss";

     

       39
       39
       +
       

     

       40
       40
       +
       @theme {

     

       41
       41
       +
         /* Colors (use OKLCH for wider gamut) */

     

       42
       42
       +
         --color-brand-50: oklch(0.98 0.01 142.12);

     

       43
       43
       +
         --color-brand-500: oklch(0.64 0.15 142.12);

     

       44
       44
       +
         --color-brand-900: oklch(0.25 0.08 142.12);

     

       45
       45
       +
         

     

       46
       46
       +
         /* Typography */

     

       47
       47
       +
         --font-display: "Satoshi", "Inter", sans-serif;

     

       48
       48
       +
         --font-body: "Inter", system-ui, sans-serif;

     

       49
       49
       +
         

     

       50
       50
       +
         /* Spacing */

     

       51
       51
       +
         --spacing-18: 4.5rem;

     

       52
       52
       +
         --spacing-72: 18rem;

     

       53
       53
       +
         

     

       54
       54
       +
         /* Breakpoints */

     

       55
       55
       +
         --breakpoint-3xl: 1920px;

     

       56
       56
       +
         --breakpoint-4xl: 2560px;

     

       57
       57
       +
         

     

       58
       58
       +
         /* Shadows */

     

       59
       59
       +
         --shadow-brutal: 8px 8px 0px 0px #000;

     

       60
       60
       +
         

     

       61
       61
       +
         /* Animation */

     

       62
       62
       +
         --animate-wiggle: wiggle 1s ease-in-out infinite;

     

       63
       63
       +
       }

     

       64
       64
       +
       

     

       65
       65
       +
       /* Define keyframes for animations */

     

       66
       66
       +
       @keyframes wiggle {

     

       67
       67
       +
         0%, 100% { transform: rotate(-3deg); }

     

       68
       68
       +
         50% { transform: rotate(3deg); }

     

       69
       69
       +
       }

     

       70
       70
       +
       ```

     

       71
       71
       +
       

     

       72
       72
       +
       ### Legacy Config Support (if needed)

     

       73
       73
       +
       ```css

     

       74
       74
       +
       @import "tailwindcss";

     

       75
       75
       +
       @config "./tailwind.config.js";

     

       76
       76
       +
       ```

     

       77
       77
       +
       

     

       78
       78
       +
       ## Breaking Changes from v3

     

       79
       79
       +
       

     

       80
       80
       +
       ### Import Changes

     

       81
       81
       +
       - ❌ `@tailwind base; @tailwind components; @tailwind utilities;`

     

       82
       82
       +
       - ✅ `@import "tailwindcss";`

     

       83
       83
       +
       

     

       84
       84
       +
       ### Removed Utilities

     

       85
       85
       +
       - `text-opacity-*` → Use `text-{color}/{opacity}` instead

     

       86
       86
       +
       - `bg-opacity-*` → Use `bg-{color}/{opacity}` instead

     

       87
       87
       +
       - `border-opacity-*` → Use `border-{color}/{opacity}` instead

     

       88
       88
       +
       - `flex-grow-*` → Use `grow-*`

     

       89
       89
       +
       - `flex-shrink-*` → Use `shrink-*`

     

       90
       90
       +
       - `decoration-slice` → Use `box-decoration-slice`

     

       91
       91
       +
       

     

       92
       92
       +
       ### Renamed Utilities

     

       93
       93
       +
       - `shadow-sm` → `shadow-xs`

     

       94
       94
       +
       - `rounded-sm` → `rounded-xs`

     

       95
       95
       +
       - `blur-sm` → `blur-xs`

     

       96
       96
       +
       - `bg-gradient-*` → `bg-linear-*`

     

       97
       97
       +
       

     

       98
       98
       +
       ### Default Behavior Changes

     

       99
       99
       +
       - **Border**: No longer defaults to gray-200, uses `currentColor`

     

       100
       100
       +
       - **Ring**: Changed from 3px blue to 1px `currentColor`

     

       101
       101
       +
       - **Outline**: Now 1px by default for consistency

     

       102
       102
       +
       

     

       103
       103
       +
       ## Custom Utilities

     

       104
       104
       +
       

     

       105
       105
       +
       Use the `@utility` directive instead of `@layer utilities`:

     

       106
       106
       +
       

     

       107
       107
       +
       ```css

     

       108
       108
       +
       @utility btn {

     

       109
       109
       +
         padding: 0.5rem 1rem;

     

       110
       110
       +
         border-radius: 0.375rem;

     

       111
       111
       +
         font-weight: 500;

     

       112
       112
       +
         transition: all 0.2s;

     

       113
       113
       +
       }

     

       114
       114
       +
       

     

       115
       115
       +
       @utility btn-primary {

     

       116
       116
       +
         background: var(--color-blue-600);

     

       117
       117
       +
         color: white;

     

       118
       118
       +
         

     

       119
       119
       +
         &:hover {

     

       120
       120
       +
           background: var(--color-blue-700);

     

       121
       121
       +
         }

     

       122
       122
       +
       }

     

       123
       123
       +
       

     

       124
       124
       +
       /* Functional utilities with parameters */

     

       125
       125
       +
       @utility margin-auto {

     

       126
       126
       +
         margin: auto;

     

       127
       127
       +
       }

     

       128
       128
       +
       

     

       129
       129
       +
       @utility flex-center {

     

       130
       130
       +
         display: flex;

     

       131
       131
       +
         justify-content: center;

     

       132
       132
       +
         align-items: center;

     

       133
       133
       +
       }

     

       134
       134
       +
       ```

     

       135
       135
       +
       

     

       136
       136
       +
       ## Custom Variants

     

       137
       137
       +
       

     

       138
       138
       +
       ```css

     

       139
       139
       +
       @custom-variant theme-dark {

     

       140
       140
       +
         &:where([data-theme="dark"] *) {

     

       141
       141
       +
           @slot;

     

       142
       142
       +
         }

     

       143
       143
       +
       }

     

       144
       144
       +
       

     

       145
       145
       +
       @custom-variant any-hover {

     

       146
       146
       +
         @media (any-hover: hover) {

     

       147
       147
       +
           &:hover {

     

       148
       148
       +
             @slot;

     

       149
       149
       +
           }

     

       150
       150
       +
         }

     

       151
       151
       +
       }

     

       152
       152
       +
       ```

     

       153
       153
       +
       

     

       154
       154
       +
       ## New Features in v4

     

       155
       155
       +
       

     

       156
       156
       +
       ### Container Queries (Built-in)

     

       157
       157
       +
       ```html

     

       158
       158
       +
       <div class="@container">

     

       159
       159
       +
         <div class="grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-3">

     

       160
       160
       +
           <div class="@min-w-64:text-lg @max-w-96:bg-blue-100">

     

       161
       161
       +
             Responsive to container size

     

       162
       162
       +
           </div>

     

       163
       163
       +
         </div>

     

       164
       164
       +
       </div>

     

       165
       165
       +
       ```

     

       166
       166
       +
       

     

       167
       167
       +
       ### 3D Transforms

     

       168
       168
       +
       ```html

     

       169
       169
       +
       <div class="perspective-1000">

     

       170
       170
       +
         <div class="rotate-x-45 rotate-y-12 scale-z-110 translate-z-24 transform-3d">

     

       171
       171
       +
           3D transformed element

     

       172
       172
       +
         </div>

     

       173
       173
       +
       </div>

     

       174
       174
       +
       ```

     

       175
       175
       +
       

     

       176
       176
       +
       ### Enhanced Gradients

     

       177
       177
       +
       ```html

     

       178
       178
       +
       <!-- Linear gradients with angles -->

     

       179
       179
       +
       <div class="bg-linear-45 from-blue-500 to-purple-500"></div>

     

       180
       180
       +
       

     

       181
       181
       +
       <!-- Radial gradients -->

     

       182
       182
       +
       <div class="bg-radial from-red-500 via-yellow-500 to-orange-500"></div>

     

       183
       183
       +
       

     

       184
       184
       +
       <!-- Conic gradients -->

     

       185
       185
       +
       <div class="bg-conic from-pink-500 via-blue-500 to-green-500"></div>

     

       186
       186
       +
       ```

     

       187
       187
       +
       

     

       188
       188
       +
       ### Text Shadows

     

       189
       189
       +
       ```html

     

       190
       190
       +
       <h1 class="text-shadow-lg text-shadow-blue-500/50">

     

       191
       191
       +
         Text with colored shadow

     

       192
       192
       +
       </h1>

     

       193
       193
       +
       ```

     

       194
       194
       +
       

     

       195
       195
       +
       ### Mask Utilities

     

       196
       196
       +
       ```html

     

       197
       197
       +
       <div class="mask-radial mask-cover">

     

       198
       198
       +
         <img src="image.jpg" alt="Masked image" />

     

       199
       199
       +
       </div>

     

       200
       200
       +
       ```

     

       201
       201
       +
       

     

       202
       202
       +
       ### New Variants

     

       203
       203
       +
       

     

       204
       204
       +
       #### @starting-style (for animations)

     

       205
       205
       +
       ```html

     

       206
       206
       +
       <div class="opacity-100 @starting-style:opacity-0 transition-opacity">

     

       207
       207
       +
         Animates in on mount

     

       208
       208
       +
       </div>

     

       209
       209
       +
       ```

     

       210
       210
       +
       

     

       211
       211
       +
       #### not-* variant

     

       212
       212
       +
       ```html

     

       213
       213
       +
       <div class="bg-blue-500 not-hover:bg-gray-500">

     

       214
       214
       +
         Blue except when hovering

     

       215
       215
       +
       </div>

     

       216
       216
       +
       ```

     

       217
       217
       +
       

     

       218
       218
       +
       #### nth-* variants

     

       219
       219
       +
       ```html

     

       220
       220
       +
       <div class="nth-2:bg-red-500 nth-odd:bg-blue-500">

     

       221
       221
       +
         Nth child styling

     

       222
       222
       +
       </div>

     

       223
       223
       +
       ```

     

       224
       224
       +
       

     

       225
       225
       +
       #### inert variant

     

       226
       226
       +
       ```html

     

       227
       227
       +
       <div class="inert:opacity-50 inert:pointer-events-none">

     

       228
       228
       +
         Styled when inert

     

       229
       229
       +
       </div>

     

       230
       230
       +
       ```

     

       231
       231
       +
       

     

       232
       232
       +
       #### in-* variant (like group-* but without group class)

     

       233
       233
       +
       ```html

     

       234
       234
       +
       <article>

     

       235
       235
       +
         <h2 class="in-article:text-lg">Styled when inside article</h2>

     

       236
       236
       +
       </article>

     

       237
       237
       +
       ```

     

       238
       238
       +
       

     

       239
       239
       +
       ### Modern Color System

     

       240
       240
       +
       v4 uses OKLCH color space for wider gamut support:

     

       241
       241
       +
       

     

       242
       242
       +
       ```css

     

       243
       243
       +
       @theme {

     

       244
       244
       +
         --color-brand-primary: oklch(0.7 0.15 180);

     

       245
       245
       +
         --color-brand-accent: oklch(0.8 0.2 45);

     

       246
       246
       +
       }

     

       247
       247
       +
       ```

     

       248
       248
       +
       

     

       249
       249
       +
       ## Multi-Theme Strategy

     

       250
       250
       +
       

     

       251
       251
       +
       ```css

     

       252
       252
       +
       @import "tailwindcss";

     

       253
       253
       +
       

     

       254
       254
       +
       @theme {

     

       255
       255
       +
         --color-primary: oklch(0.5 0.2 240);

     

       256
       256
       +
         --color-background: oklch(0.98 0.01 240);

     

       257
       257
       +
       }

     

       258
       258
       +
       

     

       259
       259
       +
       @layer base {

     

       260
       260
       +
         [data-theme='dark'] {

     

       261
       261
       +
           --color-primary: oklch(0.7 0.2 240);

     

       262
       262
       +
           --color-background: oklch(0.15 0.02 240);

     

       263
       263
       +
         }

     

       264
       264
       +
         

     

       265
       265
       +
         [data-theme='high-contrast'] {

     

       266
       266
       +
           --color-primary: oklch(0.0 0 0);

     

       267
       267
       +
           --color-background: oklch(1.0 0 0);

     

       268
       268
       +
         }

     

       269
       269
       +
       }

     

       270
       270
       +
       ```

     

       271
       271
       +
       

     

       272
       272
       +
       ## Best Practices

     

       273
       273
       +
       

     

       274
       274
       +
       ### 1. Use CSS Variables for Dynamic Values

     

       275
       275
       +
       ```html

     

       276
       276
       +
       <div class="bg-[var(--dynamic-color)] text-[var(--dynamic-size)]">

     

       277
       277
       +
         Dynamic styling

     

       278
       278
       +
       </div>

     

       279
       279
       +
       ```

     

       280
       280
       +
       

     

       281
       281
       +
       ### 2. Leverage the New Color System

     

       282
       282
       +
       ```html

     

       283
       283
       +
       <!-- Better contrast and vibrancy with OKLCH -->

     

       284
       284
       +
       <div class="bg-blue-500 text-white">

     

       285
       285
       +
         Vivid colors on modern displays

     

       286
       286
       +
       </div>

     

       287
       287
       +
       ```

     

       288
       288
       +
       

     

       289
       289
       +
       ### 3. Container Queries for True Responsive Design

     

       290
       290
       +
       ```html

     

       291
       291
       +
       <div class="@container">

     

       292
       292
       +
         <div class="p-4 @lg:p-8 @xl:p-12">

     

       293
       293
       +
           Responds to container, not viewport

     

       294
       294
       +
         </div>

     

       295
       295
       +
       </div>

     

       296
       296
       +
       ```

     

       297
       297
       +
       

     

       298
       298
       +
       ### 4. Modern CSS Features

     

       299
       299
       +
       ```html

     

       300
       300
       +
       <!-- Native cascade layers -->

     

       301
       301
       +
       <div class="layer-[utilities]:z-10">

     

       302
       302
       +
         Proper layer management

     

       303
       303
       +
       </div>

     

       304
       304
       +
       

     

       305
       305
       +
       <!-- Color mixing -->

     

       306
       306
       +
       <div class="bg-blue-500/50">

     

       307
       307
       +
         Uses color-mix() under the hood

     

       308
       308
       +
       </div>

     

       309
       309
       +
       ```

     

       310
       310
       +
       

     

       311
       311
       +
       ## Performance Optimizations

     

       312
       312
       +
       

     

       313
       313
       +
       v4's Oxide engine provides:

     

       314
       314
       +
       - 5x faster full builds

     

       315
       315
       +
       - 100x faster incremental builds

     

       316
       316
       +
       - Automatic content detection

     

       317
       317
       +
       - Built-in import handling

     

       318
       318
       +
       - Native vendor prefixing

     

       319
       319
       +
       

     

       320
       320
       +
       ## File Organization

     

       321
       321
       +
       

     

       322
       322
       +
       ```

     

       323
       323
       +
       src/

     

       324
       324
       +
       ├── styles/

     

       325
       325
       +
       │   ├── main.css          # @import "tailwindcss" + @theme

     

       326
       326
       +
       │   ├── components.css    # @utility definitions

     

       327
       327
       +
       │   └── utilities.css     # Additional @utility definitions

     

       328
       328
       +
       └── components/

     

       329
       329
       +
           └── *.vue/jsx/html    # Your components

     

       330
       330
       +
       ```

     

       331
       331
       +
       

     

       332
       332
       +
       ## Common Patterns

     

       333
       333
       +
       

     

       334
       334
       +
       ### Theme-aware Components

     

       335
       335
       +
       ```css

     

       336
       336
       +
       @utility card {

     

       337
       337
       +
         background: var(--color-background);

     

       338
       338
       +
         border: 1px solid var(--color-border);

     

       339
       339
       +
         border-radius: 0.5rem;

     

       340
       340
       +
         padding: 1.5rem;

     

       341
       341
       +
         box-shadow: var(--shadow-sm);

     

       342
       342
       +
       }

     

       343
       343
       +
       ```

     

       344
       344
       +
       

     

       345
       345
       +
       ### Responsive Typography

     

       346
       346
       +
       ```html

     

       347
       347
       +
       <h1 class="text-2xl @sm:text-3xl @lg:text-4xl @xl:text-5xl">

     

       348
       348
       +
         Container-responsive heading

     

       349
       349
       +
       </h1>

     

       350
       350
       +
       ```

     

       351
       351
       +
       

     

       352
       352
       +
       ### Animation with @starting-style

     

       353
       353
       +
       ```html

     

       354
       354
       +
       <div class="translate-y-0 @starting-style:translate-y-full transition-transform duration-500">

     

       355
       355
       +
         Slides up on mount

     

       356
       356
       +
       </div>

     

       357
       357
       +
       ```

     

       358
       358
       +
       

     

       359
       359
       +
       ## Debugging Tips

     

       360
       360
       +
       

     

       361
       361
       +
       1. **Use browser dev tools** to inspect CSS variables

     

       362
       362
       +
       2. **Check cascade layers** in dev tools

     

       363
       363
       +
       3. **Verify modern browser support** for OKLCH colors

     

       364
       364
       +
       4. **Use @reference** for CSS modules/component styles

     

       365
       365
       +
       5. **Restart dev server** after major theme changes

     

       366
       366
       +
       

     

       367
       367
       +
       ## Migration from v3

     

       368
       368
       +
       

     

       369
       369
       +
       1. Replace `@tailwind` directives with `@import "tailwindcss"`

     

       370
       370
       +
       2. Move config from JS to CSS using `@theme`

     

       371
       371
       +
       3. Update deprecated utility classes

     

       372
       372
       +
       4. Replace `@layer utilities` with `@utility`

     

       373
       373
       +
       5. Test in modern browsers only

     

       374
       374
       +
       6. Use the official upgrade tool: `npx @tailwindcss/upgrade@next`

     

       375
       375
       +
       

     

       376
       376
       +
       ## Complete Utility Class Reference

     

       377
       377
       +
       

     

       378
       378
       +
       ### Layout

     

       379
       379
       +
       

     

       380
       380
       +
       #### Display

     

       381
       381
       +
       ```

     

       382
       382
       +
       block, inline-block, inline, flex, inline-flex, table, inline-table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row-group, table-row, flow-root, grid, inline-grid, contents, list-item, hidden

     

       383
       383
       +
       ```

     

       384
       384
       +
       

     

       385
       385
       +
       #### Position

     

       386
       386
       +
       ```

     

       387
       387
       +
       static, fixed, absolute, relative, sticky

     

       388
       388
       +
       ```

     

       389
       389
       +
       

     

       390
       390
       +
       #### Top/Right/Bottom/Left

     

       391
       391
       +
       ```

     

       392
       392
       +
       inset-0, inset-x-0, inset-y-0, start-0, end-0, top-0, right-0, bottom-0, left-0

     

       393
       393
       +
       inset-px, inset-x-px, inset-y-px, start-px, end-px, top-px, right-px, bottom-px, left-px

     

       394
       394
       +
       inset-0.5, inset-1, inset-1.5, inset-2, inset-2.5, inset-3, inset-3.5, inset-4, inset-5, inset-6, inset-7, inset-8, inset-9, inset-10, inset-11, inset-12, inset-14, inset-16, inset-20, inset-24, inset-28, inset-32, inset-36, inset-40, inset-44, inset-48, inset-52, inset-56, inset-60, inset-64, inset-72, inset-80, inset-96

     

       395
       395
       +
       inset-auto, inset-1/2, inset-1/3, inset-2/3, inset-1/4, inset-2/4, inset-3/4, inset-full

     

       396
       396
       +
       ```

     

       397
       397
       +
       

     

       398
       398
       +
       #### Visibility & Z-Index

     

       399
       399
       +
       ```

     

       400
       400
       +
       visible, invisible, collapse

     

       401
       401
       +
       z-0, z-10, z-20, z-30, z-40, z-50, z-auto

     

       402
       402
       +
       ```

     

       403
       403
       +
       

     

       404
       404
       +
       #### Overflow

     

       405
       405
       +
       ```

     

       406
       406
       +
       overflow-auto, overflow-hidden, overflow-clip, overflow-visible, overflow-scroll

     

       407
       407
       +
       overflow-x-auto, overflow-x-hidden, overflow-x-clip, overflow-x-visible, overflow-x-scroll

     

       408
       408
       +
       overflow-y-auto, overflow-y-hidden, overflow-y-clip, overflow-y-visible, overflow-y-scroll

     

       409
       409
       +
       ```

     

       410
       410
       +
       

     

       411
       411
       +
       ### Flexbox & Grid

     

       412
       412
       +
       

     

       413
       413
       +
       #### Flex Direction

     

       414
       414
       +
       ```

     

       415
       415
       +
       flex-row, flex-row-reverse, flex-col, flex-col-reverse

     

       416
       416
       +
       ```

     

       417
       417
       +
       

     

       418
       418
       +
       #### Flex Wrap

     

       419
       419
       +
       ```

     

       420
       420
       +
       flex-wrap, flex-wrap-reverse, flex-nowrap

     

       421
       421
       +
       ```

     

       422
       422
       +
       

     

       423
       423
       +
       #### Flex

     

       424
       424
       +
       ```

     

       425
       425
       +
       flex-1, flex-auto, flex-initial, flex-none

     

       426
       426
       +
       ```

     

       427
       427
       +
       

     

       428
       428
       +
       #### Grow & Shrink

     

       429
       429
       +
       ```

     

       430
       430
       +
       grow, grow-0, shrink, shrink-0

     

       431
       431
       +
       ```

     

       432
       432
       +
       

     

       433
       433
       +
       #### Order

     

       434
       434
       +
       ```

     

       435
       435
       +
       order-1, order-2, order-3, order-4, order-5, order-6, order-7, order-8, order-9, order-10, order-11, order-12, order-first, order-last, order-none

     

       436
       436
       +
       ```

     

       437
       437
       +
       

     

       438
       438
       +
       #### Grid Template Columns

     

       439
       439
       +
       ```

     

       440
       440
       +
       grid-cols-1, grid-cols-2, grid-cols-3, grid-cols-4, grid-cols-5, grid-cols-6, grid-cols-7, grid-cols-8, grid-cols-9, grid-cols-10, grid-cols-11, grid-cols-12, grid-cols-none, grid-cols-subgrid

     

       441
       441
       +
       ```

     

       442
       442
       +
       

     

       443
       443
       +
       #### Grid Column Start/End

     

       444
       444
       +
       ```

     

       445
       445
       +
       col-auto, col-span-1, col-span-2, col-span-3, col-span-4, col-span-5, col-span-6, col-span-7, col-span-8, col-span-9, col-span-10, col-span-11, col-span-12, col-span-full

     

       446
       446
       +
       col-start-1, col-start-2, col-start-3, col-start-4, col-start-5, col-start-6, col-start-7, col-start-8, col-start-9, col-start-10, col-start-11, col-start-12, col-start-13, col-start-auto

     

       447
       447
       +
       col-end-1, col-end-2, col-end-3, col-end-4, col-end-5, col-end-6, col-end-7, col-end-8, col-end-9, col-end-10, col-end-11, col-end-12, col-end-13, col-end-auto

     

       448
       448
       +
       ```

     

       449
       449
       +
       

     

       450
       450
       +
       #### Grid Template Rows

     

       451
       451
       +
       ```

     

       452
       452
       +
       grid-rows-1, grid-rows-2, grid-rows-3, grid-rows-4, grid-rows-5, grid-rows-6, grid-rows-7, grid-rows-8, grid-rows-9, grid-rows-10, grid-rows-11, grid-rows-12, grid-rows-none, grid-rows-subgrid

     

       453
       453
       +
       ```

     

       454
       454
       +
       

     

       455
       455
       +
       #### Grid Row Start/End

     

       456
       456
       +
       ```

     

       457
       457
       +
       row-auto, row-span-1, row-span-2, row-span-3, row-span-4, row-span-5, row-span-6, row-span-7, row-span-8, row-span-9, row-span-10, row-span-11, row-span-12, row-span-full

     

       458
       458
       +
       row-start-1, row-start-2, row-start-3, row-start-4, row-start-5, row-start-6, row-start-7, row-start-8, row-start-9, row-start-10, row-start-11, row-start-12, row-start-13, row-start-auto

     

       459
       459
       +
       row-end-1, row-end-2, row-end-3, row-end-4, row-end-5, row-end-6, row-end-7, row-end-8, row-end-9, row-end-10, row-end-11, row-end-12, row-end-13, row-end-auto

     

       460
       460
       +
       ```

     

       461
       461
       +
       

     

       462
       462
       +
       #### Gap

     

       463
       463
       +
       ```

     

       464
       464
       +
       gap-0, gap-x-0, gap-y-0, gap-px, gap-x-px, gap-y-px

     

       465
       465
       +
       gap-0.5, gap-1, gap-1.5, gap-2, gap-2.5, gap-3, gap-3.5, gap-4, gap-5, gap-6, gap-7, gap-8, gap-9, gap-10, gap-11, gap-12, gap-14, gap-16, gap-20, gap-24, gap-28, gap-32, gap-36, gap-40, gap-44, gap-48, gap-52, gap-56, gap-60, gap-64, gap-72, gap-80, gap-96

     

       466
       466
       +
       ```

     

       467
       467
       +
       

     

       468
       468
       +
       #### Justify & Align

     

       469
       469
       +
       ```

     

       470
       470
       +
       justify-normal, justify-start, justify-end, justify-center, justify-between, justify-around, justify-evenly, justify-stretch

     

       471
       471
       +
       justify-items-start, justify-items-end, justify-items-center, justify-items-stretch

     

       472
       472
       +
       justify-self-auto, justify-self-start, justify-self-end, justify-self-center, justify-self-stretch

     

       473
       473
       +
       align-items-start, align-items-end, align-items-center, align-items-baseline, align-items-stretch

     

       474
       474
       +
       align-content-normal, align-content-center, align-content-start, align-content-end, align-content-between, align-content-around, align-content-evenly, align-content-baseline, align-content-stretch

     

       475
       475
       +
       align-self-auto, align-self-start, align-self-end, align-self-center, align-self-stretch, align-self-baseline

     

       476
       476
       +
       place-content-center, place-content-start, place-content-end, place-content-between, place-content-around, place-content-evenly, place-content-baseline, place-content-stretch

     

       477
       477
       +
       place-items-start, place-items-end, place-items-center, place-items-baseline, place-items-stretch

     

       478
       478
       +
       place-self-auto, place-self-start, place-self-end, place-self-center, place-self-stretch

     

       479
       479
       +
       ```

     

       480
       480
       +
       

     

       481
       481
       +
       ### Spacing

     

       482
       482
       +
       

     

       483
       483
       +
       #### Padding

     

       484
       484
       +
       ```

     

       485
       485
       +
       p-0, p-px, p-0.5, p-1, p-1.5, p-2, p-2.5, p-3, p-3.5, p-4, p-5, p-6, p-7, p-8, p-9, p-10, p-11, p-12, p-14, p-16, p-20, p-24, p-28, p-32, p-36, p-40, p-44, p-48, p-52, p-56, p-60, p-64, p-72, p-80, p-96

     

       486
       486
       +
       px-0, py-0, pl-0, pr-0, pt-0, pb-0, ps-0, pe-0

     

       487
       487
       +
       ```

     

       488
       488
       +
       

     

       489
       489
       +
       #### Margin

     

       490
       490
       +
       ```

     

       491
       491
       +
       m-0, m-px, m-0.5, m-1, m-1.5, m-2, m-2.5, m-3, m-3.5, m-4, m-5, m-6, m-7, m-8, m-9, m-10, m-11, m-12, m-14, m-16, m-20, m-24, m-28, m-32, m-36, m-40, m-44, m-48, m-52, m-56, m-60, m-64, m-72, m-80, m-96, m-auto

     

       492
       492
       +
       mx-0, my-0, ml-0, mr-0, mt-0, mb-0, ms-0, me-0

     

       493
       493
       +
       -m-0, -m-px, -m-0.5, -m-1, -m-1.5, -m-2, -m-2.5, -m-3, -m-3.5, -m-4, -m-5, -m-6, -m-7, -m-8, -m-9, -m-10, -m-11, -m-12, -m-14, -m-16, -m-20, -m-24, -m-28, -m-32, -m-36, -m-40, -m-44, -m-48, -m-52, -m-56, -m-60, -m-64, -m-72, -m-80, -m-96

     

       494
       494
       +
       ```

     

       495
       495
       +
       

     

       496
       496
       +
       #### Space Between

     

       497
       497
       +
       ```

     

       498
       498
       +
       space-x-0, space-x-px, space-x-0.5, space-x-1, space-x-1.5, space-x-2, space-x-2.5, space-x-3, space-x-3.5, space-x-4, space-x-5, space-x-6, space-x-7, space-x-8, space-x-9, space-x-10, space-x-11, space-x-12, space-x-14, space-x-16, space-x-20, space-x-24, space-x-28, space-x-32, space-x-36, space-x-40, space-x-44, space-x-48, space-x-52, space-x-56, space-x-60, space-x-64, space-x-72, space-x-80, space-x-96, space-x-reverse

     

       499
       499
       +
       space-y-0, space-y-px, space-y-0.5, space-y-1, space-y-1.5, space-y-2, space-y-2.5, space-y-3, space-y-3.5, space-y-4, space-y-5, space-y-6, space-y-7, space-y-8, space-y-9, space-y-10, space-y-11, space-y-12, space-y-14, space-y-16, space-y-20, space-y-24, space-y-28, space-y-32, space-y-36, space-y-40, space-y-44, space-y-48, space-y-52, space-y-56, space-y-60, space-y-64, space-y-72, space-y-80, space-y-96, space-y-reverse

     

       500
       500
       +
       ```

     

       501
       501
       +
       

     

       502
       502
       +
       ### Sizing

     

       503
       503
       +
       

     

       504
       504
       +
       #### Width

     

       505
       505
       +
       ```

     

       506
       506
       +
       w-0, w-px, w-0.5, w-1, w-1.5, w-2, w-2.5, w-3, w-3.5, w-4, w-5, w-6, w-7, w-8, w-9, w-10, w-11, w-12, w-14, w-16, w-20, w-24, w-28, w-32, w-36, w-40, w-44, w-48, w-52, w-56, w-60, w-64, w-72, w-80, w-96, w-auto, w-1/2, w-1/3, w-2/3, w-1/4, w-2/4, w-3/4, w-1/5, w-2/5, w-3/5, w-4/5, w-1/6, w-2/6, w-3/6, w-4/6, w-5/6, w-1/12, w-2/12, w-3/12, w-4/12, w-5/12, w-6/12, w-7/12, w-8/12, w-9/12, w-10/12, w-11/12, w-full, w-screen, w-svw, w-lvw, w-dvw, w-min, w-max, w-fit

     

       507
       507
       +
       ```

     

       508
       508
       +
       

     

       509
       509
       +
       #### Height

     

       510
       510
       +
       ```

     

       511
       511
       +
       h-0, h-px, h-0.5, h-1, h-1.5, h-2, h-2.5, h-3, h-3.5, h-4, h-5, h-6, h-7, h-8, h-9, h-10, h-11, h-12, h-14, h-16, h-20, h-24, h-28, h-32, h-36, h-40, h-44, h-48, h-52, h-56, h-60, h-64, h-72, h-80, h-96, h-auto, h-1/2, h-1/3, h-2/3, h-1/4, h-2/4, h-3/4, h-1/5, h-2/5, h-3/5, h-4/5, h-1/6, h-2/6, h-3/6, h-4/6, h-5/6, h-full, h-screen, h-svh, h-lvh, h-dvh, h-min, h-max, h-fit

     

       512
       512
       +
       ```

     

       513
       513
       +
       

     

       514
       514
       +
       #### Size (Width + Height)

     

       515
       515
       +
       ```

     

       516
       516
       +
       size-0, size-px, size-0.5, size-1, size-1.5, size-2, size-2.5, size-3, size-3.5, size-4, size-5, size-6, size-7, size-8, size-9, size-10, size-11, size-12, size-14, size-16, size-20, size-24, size-28, size-32, size-36, size-40, size-44, size-48, size-52, size-56, size-60, size-64, size-72, size-80, size-96, size-auto, size-1/2, size-1/3, size-2/3, size-1/4, size-2/4, size-3/4, size-1/5, size-2/5, size-3/5, size-4/5, size-1/6, size-2/6, size-3/6, size-4/6, size-5/6, size-1/12, size-2/12, size-3/12, size-4/12, size-5/12, size-6/12, size-7/12, size-8/12, size-9/12, size-10/12, size-11/12, size-full, size-min, size-max, size-fit

     

       517
       517
       +
       ```

     

       518
       518
       +
       

     

       519
       519
       +
       #### Min/Max Width

     

       520
       520
       +
       ```

     

       521
       521
       +
       min-w-0, min-w-full, min-w-min, min-w-max, min-w-fit

     

       522
       522
       +
       max-w-0, max-w-xs, max-w-sm, max-w-md, max-w-lg, max-w-xl, max-w-2xl, max-w-3xl, max-w-4xl, max-w-5xl, max-w-6xl, max-w-7xl, max-w-full, max-w-min, max-w-max, max-w-fit, max-w-prose, max-w-screen-sm, max-w-screen-md, max-w-screen-lg, max-w-screen-xl, max-w-screen-2xl

     

       523
       523
       +
       ```

     

       524
       524
       +
       

     

       525
       525
       +
       #### Min/Max Height

     

       526
       526
       +
       ```

     

       527
       527
       +
       min-h-0, min-h-full, min-h-screen, min-h-svh, min-h-lvh, min-h-dvh, min-h-min, min-h-max, min-h-fit

     

       528
       528
       +
       max-h-0, max-h-px, max-h-0.5, max-h-1, max-h-1.5, max-h-2, max-h-2.5, max-h-3, max-h-3.5, max-h-4, max-h-5, max-h-6, max-h-7, max-h-8, max-h-9, max-h-10, max-h-11, max-h-12, max-h-14, max-h-16, max-h-20, max-h-24, max-h-28, max-h-32, max-h-36, max-h-40, max-h-44, max-h-48, max-h-52, max-h-56, max-h-60, max-h-64, max-h-72, max-h-80, max-h-96, max-h-full, max-h-screen, max-h-svh, max-h-lvh, max-h-dvh, max-h-min, max-h-max, max-h-fit

     

       529
       529
       +
       ```

     

       530
       530
       +
       

     

       531
       531
       +
       ### Typography

     

       532
       532
       +
       

     

       533
       533
       +
       #### Font Family

     

       534
       534
       +
       ```

     

       535
       535
       +
       font-sans, font-serif, font-mono

     

       536
       536
       +
       ```

     

       537
       537
       +
       

     

       538
       538
       +
       #### Font Size

     

       539
       539
       +
       ```

     

       540
       540
       +
       text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl, text-4xl, text-5xl, text-6xl, text-7xl, text-8xl, text-9xl

     

       541
       541
       +
       ```

     

       542
       542
       +
       

     

       543
       543
       +
       #### Font Weight

     

       544
       544
       +
       ```

     

       545
       545
       +
       font-thin, font-extralight, font-light, font-normal, font-medium, font-semibold, font-bold, font-extrabold, font-black

     

       546
       546
       +
       ```

     

       547
       547
       +
       

     

       548
       548
       +
       #### Font Style

     

       549
       549
       +
       ```

     

       550
       550
       +
       italic, not-italic

     

       551
       551
       +
       ```

     

       552
       552
       +
       

     

       553
       553
       +
       #### Font Variant Numeric

     

       554
       554
       +
       ```

     

       555
       555
       +
       normal-nums, ordinal, slashed-zero, lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions

     

       556
       556
       +
       ```

     

       557
       557
       +
       

     

       558
       558
       +
       #### Font Stretch (NEW in v4)

     

       559
       559
       +
       ```

     

       560
       560
       +
       font-stretch-ultra-condensed, font-stretch-extra-condensed, font-stretch-condensed, font-stretch-semi-condensed, font-stretch-normal, font-stretch-semi-expanded, font-stretch-expanded, font-stretch-extra-expanded, font-stretch-ultra-expanded

     

       561
       561
       +
       ```

     

       562
       562
       +
       

     

       563
       563
       +
       #### Letter Spacing

     

       564
       564
       +
       ```

     

       565
       565
       +
       tracking-tighter, tracking-tight, tracking-normal, tracking-wide, tracking-wider, tracking-widest

     

       566
       566
       +
       ```

     

       567
       567
       +
       

     

       568
       568
       +
       #### Line Clamp

     

       569
       569
       +
       ```

     

       570
       570
       +
       line-clamp-1, line-clamp-2, line-clamp-3, line-clamp-4, line-clamp-5, line-clamp-6, line-clamp-none

     

       571
       571
       +
       ```

     

       572
       572
       +
       

     

       573
       573
       +
       #### Line Height

     

       574
       574
       +
       ```

     

       575
       575
       +
       leading-3, leading-4, leading-5, leading-6, leading-7, leading-8, leading-9, leading-10, leading-none, leading-tight, leading-snug, leading-normal, leading-relaxed, leading-loose

     

       576
       576
       +
       ```

     

       577
       577
       +
       

     

       578
       578
       +
       #### List Style

     

       579
       579
       +
       ```

     

       580
       580
       +
       list-none, list-disc, list-decimal, list-inside, list-outside

     

       581
       581
       +
       ```

     

       582
       582
       +
       

     

       583
       583
       +
       #### Text Align

     

       584
       584
       +
       ```

     

       585
       585
       +
       text-left, text-center, text-right, text-justify, text-start, text-end

     

       586
       586
       +
       ```

     

       587
       587
       +
       

     

       588
       588
       +
       #### Text Color

     

       589
       589
       +
       ```

     

       590
       590
       +
       text-inherit, text-current, text-transparent, text-black, text-white

     

       591
       591
       +
       text-slate-50, text-slate-100, text-slate-200, text-slate-300, text-slate-400, text-slate-500, text-slate-600, text-slate-700, text-slate-800, text-slate-900, text-slate-950

     

       592
       592
       +
       text-gray-50, text-gray-100, text-gray-200, text-gray-300, text-gray-400, text-gray-500, text-gray-600, text-gray-700, text-gray-800, text-gray-900, text-gray-950

     

       593
       593
       +
       text-zinc-50, text-zinc-100, text-zinc-200, text-zinc-300, text-zinc-400, text-zinc-500, text-zinc-600, text-zinc-700, text-zinc-800, text-zinc-900, text-zinc-950

     

       594
       594
       +
       text-neutral-50, text-neutral-100, text-neutral-200, text-neutral-300, text-neutral-400, text-neutral-500, text-neutral-600, text-neutral-700, text-neutral-800, text-neutral-900, text-neutral-950

     

       595
       595
       +
       text-stone-50, text-stone-100, text-stone-200, text-stone-300, text-stone-400, text-stone-500, text-stone-600, text-stone-700, text-stone-800, text-stone-900, text-stone-950

     

       596
       596
       +
       text-red-50, text-red-100, text-red-200, text-red-300, text-red-400, text-red-500, text-red-600, text-red-700, text-red-800, text-red-900, text-red-950

     

       597
       597
       +
       text-orange-50, text-orange-100, text-orange-200, text-orange-300, text-orange-400, text-orange-500, text-orange-600, text-orange-700, text-orange-800, text-orange-900, text-orange-950

     

       598
       598
       +
       text-amber-50, text-amber-100, text-amber-200, text-amber-300, text-amber-400, text-amber-500, text-amber-600, text-amber-700, text-amber-800, text-amber-900, text-amber-950

     

       599
       599
       +
       text-yellow-50, text-yellow-100, text-yellow-200, text-yellow-300, text-yellow-400, text-yellow-500, text-yellow-600, text-yellow-700, text-yellow-800, text-yellow-900, text-yellow-950

     

       600
       600
       +
       text-lime-50, text-lime-100, text-lime-200, text-lime-300, text-lime-400, text-lime-500, text-lime-600, text-lime-700, text-lime-800, text-lime-900, text-lime-950

     

       601
       601
       +
       text-green-50, text-green-100, text-green-200, text-green-300, text-green-400, text-green-500, text-green-600, text-green-700, text-green-800, text-green-900, text-green-950

     

       602
       602
       +
       text-emerald-50, text-emerald-100, text-emerald-200, text-emerald-300, text-emerald-400, text-emerald-500, text-emerald-600, text-emerald-700, text-emerald-800, text-emerald-900, text-emerald-950

     

       603
       603
       +
       text-teal-50, text-teal-100, text-teal-200, text-teal-300, text-teal-400, text-teal-500, text-teal-600, text-teal-700, text-teal-800, text-teal-900, text-teal-950

     

       604
       604
       +
       text-cyan-50, text-cyan-100, text-cyan-200, text-cyan-300, text-cyan-400, text-cyan-500, text-cyan-600, text-cyan-700, text-cyan-800, text-cyan-900, text-cyan-950

     

       605
       605
       +
       text-sky-50, text-sky-100, text-sky-200, text-sky-300, text-sky-400, text-sky-500, text-sky-600, text-sky-700, text-sky-800, text-sky-900, text-sky-950

     

       606
       606
       +
       text-blue-50, text-blue-100, text-blue-200, text-blue-300, text-blue-400, text-blue-500, text-blue-600, text-blue-700, text-blue-800, text-blue-900, text-blue-950

     

       607
       607
       +
       text-indigo-50, text-indigo-100, text-indigo-200, text-indigo-300, text-indigo-400, text-indigo-500, text-indigo-600, text-indigo-700, text-indigo-800, text-indigo-900, text-indigo-950

     

       608
       608
       +
       text-violet-50, text-violet-100, text-violet-200, text-violet-300, text-violet-400, text-violet-500, text-violet-600, text-violet-700, text-violet-800, text-violet-900, text-violet-950

     

       609
       609
       +
       text-purple-50, text-purple-100, text-purple-200, text-purple-300, text-purple-400, text-purple-500, text-purple-600, text-purple-700, text-purple-800, text-purple-900, text-purple-950

     

       610
       610
       +
       text-fuchsia-50, text-fuchsia-100, text-fuchsia-200, text-fuchsia-300, text-fuchsia-400, text-fuchsia-500, text-fuchsia-600, text-fuchsia-700, text-fuchsia-800, text-fuchsia-900, text-fuchsia-950

     

       611
       611
       +
       text-pink-50, text-pink-100, text-pink-200, text-pink-300, text-pink-400, text-pink-500, text-pink-600, text-pink-700, text-pink-800, text-pink-900, text-pink-950

     

       612
       612
       +
       text-rose-50, text-rose-100, text-rose-200, text-rose-300, text-rose-400, text-rose-500, text-rose-600, text-rose-700, text-rose-800, text-rose-900, text-rose-950

     

       613
       613
       +
       ```

     

       614
       614
       +
       

     

       615
       615
       +
       #### Text Decoration

     

       616
       616
       +
       ```

     

       617
       617
       +
       underline, overline, line-through, no-underline

     

       618
       618
       +
       decoration-solid, decoration-double, decoration-dotted, decoration-dashed, decoration-wavy

     

       619
       619
       +
       decoration-auto, decoration-from-font, decoration-0, decoration-1, decoration-2, decoration-4, decoration-8

     

       620
       620
       +
       underline-offset-auto, underline-offset-0, underline-offset-1, underline-offset-2, underline-offset-4, underline-offset-8

     

       621
       621
       +
       ```

     

       622
       622
       +
       

     

       623
       623
       +
       #### Text Transform

     

       624
       624
       +
       ```

     

       625
       625
       +
       uppercase, lowercase, capitalize, normal-case

     

       626
       626
       +
       ```

     

       627
       627
       +
       

     

       628
       628
       +
       #### Text Overflow

     

       629
       629
       +
       ```

     

       630
       630
       +
       truncate, text-ellipsis, text-clip

     

       631
       631
       +
       ```

     

       632
       632
       +
       

     

       633
       633
       +
       #### Text Shadow (NEW in v4)

     

       634
       634
       +
       ```

     

       635
       635
       +
       text-shadow-sm, text-shadow, text-shadow-lg, text-shadow-xl, text-shadow-none

     

       636
       636
       +
       ```

     

       637
       637
       +
       

     

       638
       638
       +
       #### Overflow Wrap (NEW in v4)

     

       639
       639
       +
       ```

     

       640
       640
       +
       overflow-wrap-normal, overflow-wrap-break-word, overflow-wrap-anywhere

     

       641
       641
       +
       ```

     

       642
       642
       +
       

     

       643
       643
       +
       #### Vertical Align

     

       644
       644
       +
       ```

     

       645
       645
       +
       align-baseline, align-top, align-middle, align-bottom, align-text-top, align-text-bottom, align-sub, align-super

     

       646
       646
       +
       ```

     

       647
       647
       +
       

     

       648
       648
       +
       #### Whitespace

     

       649
       649
       +
       ```

     

       650
       650
       +
       whitespace-normal, whitespace-nowrap, whitespace-pre, whitespace-pre-line, whitespace-pre-wrap, whitespace-break-spaces

     

       651
       651
       +
       ```

     

       652
       652
       +
       

     

       653
       653
       +
       #### Word Break

     

       654
       654
       +
       ```

     

       655
       655
       +
       break-normal, break-words, break-all, break-keep

     

       656
       656
       +
       ```

     

       657
       657
       +
       

     

       658
       658
       +
       #### Hyphens

     

       659
       659
       +
       ```

     

       660
       660
       +
       hyphens-none, hyphens-manual, hyphens-auto

     

       661
       661
       +
       ```

     

       662
       662
       +
       

     

       663
       663
       +
       #### Content

     

       664
       664
       +
       ```

     

       665
       665
       +
       content-none

     

       666
       666
       +
       ```

     

       667
       667
       +
       

     

       668
       668
       +
       ### Backgrounds

     

       669
       669
       +
       

     

       670
       670
       +
       #### Background Attachment

     

       671
       671
       +
       ```

     

       672
       672
       +
       bg-fixed, bg-local, bg-scroll

     

       673
       673
       +
       ```

     

       674
       674
       +
       

     

       675
       675
       +
       #### Background Clip

     

       676
       676
       +
       ```

     

       677
       677
       +
       bg-clip-border, bg-clip-padding, bg-clip-content, bg-clip-text

     

       678
       678
       +
       ```

     

       679
       679
       +
       

     

       680
       680
       +
       #### Background Color

     

       681
       681
       +
       All color utilities work with `bg-` prefix (same as text colors above)

     

       682
       682
       +
       

     

       683
       683
       +
       #### Background Origin

     

       684
       684
       +
       ```

     

       685
       685
       +
       bg-origin-border, bg-origin-padding, bg-origin-content

     

       686
       686
       +
       ```

     

       687
       687
       +
       

     

       688
       688
       +
       #### Background Position

     

       689
       689
       +
       ```

     

       690
       690
       +
       bg-bottom, bg-center, bg-left, bg-left-bottom, bg-left-top, bg-right, bg-right-bottom, bg-right-top, bg-top

     

       691
       691
       +
       ```

     

       692
       692
       +
       

     

       693
       693
       +
       #### Background Repeat

     

       694
       694
       +
       ```

     

       695
       695
       +
       bg-repeat, bg-no-repeat, bg-repeat-x, bg-repeat-y, bg-repeat-round, bg-repeat-space

     

       696
       696
       +
       ```

     

       697
       697
       +
       

     

       698
       698
       +
       #### Background Size

     

       699
       699
       +
       ```

     

       700
       700
       +
       bg-auto, bg-cover, bg-contain

     

       701
       701
       +
       ```

     

       702
       702
       +
       

     

       703
       703
       +
       #### Background Image

     

       704
       704
       +
       ```

     

       705
       705
       +
       bg-none

     

       706
       706
       +
       bg-linear-to-t, bg-linear-to-tr, bg-linear-to-r, bg-linear-to-br, bg-linear-to-b, bg-linear-to-bl, bg-linear-to-l, bg-linear-to-tl

     

       707
       707
       +
       ```

     

       708
       708
       +
       

     

       709
       709
       +
       #### Enhanced Gradients (NEW in v4)

     

       710
       710
       +
       ```

     

       711
       711
       +
       bg-linear-0, bg-linear-45, bg-linear-90, bg-linear-135, bg-linear-180, bg-linear-225, bg-linear-270, bg-linear-315

     

       712
       712
       +
       bg-radial, bg-radial-at-t, bg-radial-at-tr, bg-radial-at-r, bg-radial-at-br, bg-radial-at-b, bg-radial-at-bl, bg-radial-at-l, bg-radial-at-tl, bg-radial-at-c

     

       713
       713
       +
       bg-conic, bg-conic-at-t, bg-conic-at-tr, bg-conic-at-r, bg-conic-at-br, bg-conic-at-b, bg-conic-at-bl, bg-conic-at-l, bg-conic-at-tl, bg-conic-at-c

     

       714
       714
       +
       ```

     

       715
       715
       +
       

     

       716
       716
       +
       #### Gradient Color Stops

     

       717
       717
       +
       ```

     

       718
       718
       +
       from-inherit, from-current, from-transparent, from-black, from-white, from-{color}

     

       719
       719
       +
       via-inherit, via-current, via-transparent, via-black, via-white, via-{color}

     

       720
       720
       +
       to-inherit, to-current, to-transparent, to-black, to-white, to-{color}

     

       721
       721
       +
       ```

     

       722
       722
       +
       

     

       723
       723
       +
       ### Borders

     

       724
       724
       +
       

     

       725
       725
       +
       #### Border Radius

     

       726
       726
       +
       ```

     

       727
       727
       +
       rounded-none, rounded-xs, rounded-sm, rounded, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl, rounded-full

     

       728
       728
       +
       rounded-s-none, rounded-s-xs, rounded-s-sm, rounded-s, rounded-s-md, rounded-s-lg, rounded-s-xl, rounded-s-2xl, rounded-s-3xl

     

       729
       729
       +
       rounded-e-none, rounded-e-xs, rounded-e-sm, rounded-e, rounded-e-md, rounded-e-lg, rounded-e-xl, rounded-e-2xl, rounded-e-3xl

     

       730
       730
       +
       rounded-t-none, rounded-t-xs, rounded-t-sm, rounded-t, rounded-t-md, rounded-t-lg, rounded-t-xl, rounded-t-2xl, rounded-t-3xl

     

       731
       731
       +
       rounded-r-none, rounded-r-xs, rounded-r-sm, rounded-r, rounded-r-md, rounded-r-lg, rounded-r-xl, rounded-r-2xl, rounded-r-3xl

     

       732
       732
       +
       rounded-b-none, rounded-b-xs, rounded-b-sm, rounded-b, rounded-b-md, rounded-b-lg, rounded-b-xl, rounded-b-2xl, rounded-b-3xl

     

       733
       733
       +
       rounded-l-none, rounded-l-xs, rounded-l-sm, rounded-l, rounded-l-md, rounded-l-lg, rounded-l-xl, rounded-l-2xl, rounded-l-3xl

     

       734
       734
       +
       rounded-ss-none, rounded-ss-xs, rounded-ss-sm, rounded-ss, rounded-ss-md, rounded-ss-lg, rounded-ss-xl, rounded-ss-2xl, rounded-ss-3xl

     

       735
       735
       +
       rounded-se-none, rounded-se-xs, rounded-se-sm, rounded-se, rounded-se-md, rounded-se-lg, rounded-se-xl, rounded-se-2xl, rounded-se-3xl

     

       736
       736
       +
       rounded-ee-none, rounded-ee-xs, rounded-ee-sm, rounded-ee, rounded-ee-md, rounded-ee-lg, rounded-ee-xl, rounded-ee-2xl, rounded-ee-3xl

     

       737
       737
       +
       rounded-es-none, rounded-es-xs, rounded-es-sm, rounded-es, rounded-es-md, rounded-es-lg, rounded-es-xl, rounded-es-2xl, rounded-es-3xl

     

       738
       738
       +
       rounded-tl-none, rounded-tl-xs, rounded-tl-sm, rounded-tl, rounded-tl-md, rounded-tl-lg, rounded-tl-xl, rounded-tl-2xl, rounded-tl-3xl

     

       739
       739
       +
       rounded-tr-none, rounded-tr-xs, rounded-tr-sm, rounded-tr, rounded-tr-md, rounded-tr-lg, rounded-tr-xl, rounded-tr-2xl, rounded-tr-3xl

     

       740
       740
       +
       rounded-br-none, rounded-br-xs, rounded-br-sm, rounded-br, rounded-br-md, rounded-br-lg, rounded-br-xl, rounded-br-2xl, rounded-br-3xl

     

       741
       741
       +
       rounded-bl-none, rounded-bl-xs, rounded-bl-sm, rounded-bl, rounded-bl-md, rounded-bl-lg, rounded-bl-xl, rounded-bl-2xl, rounded-bl-3xl

     

       742
       742
       +
       ```

     

       743
       743
       +
       

     

       744
       744
       +
       #### Border Width

     

       745
       745
       +
       ```

     

       746
       746
       +
       border-0, border-2, border-4, border-8, border, border-x, border-y, border-s, border-e, border-t, border-r, border-b, border-l

     

       747
       747
       +
       ```

     

       748
       748
       +
       

     

       749
       749
       +
       #### Border Color

     

       750
       750
       +
       All color utilities work with `border-` prefix (same as text/bg colors)

     

       751
       751
       +
       

     

       752
       752
       +
       #### Border Style

     

       753
       753
       +
       ```

     

       754
       754
       +
       border-solid, border-dashed, border-dotted, border-double, border-hidden, border-none

     

       755
       755
       +
       ```

     

       756
       756
       +
       

     

       757
       757
       +
       #### Divide Width

     

       758
       758
       +
       ```

     

       759
       759
       +
       divide-x-0, divide-x-2, divide-x-4, divide-x-8, divide-x, divide-y-0, divide-y-2, divide-y-4, divide-y-8, divide-y, divide-x-reverse, divide-y-reverse

     

       760
       760
       +
       ```

     

       761
       761
       +
       

     

       762
       762
       +
       #### Divide Color

     

       763
       763
       +
       All color utilities work with `divide-` prefix

     

       764
       764
       +
       

     

       765
       765
       +
       #### Divide Style

     

       766
       766
       +
       ```

     

       767
       767
       +
       divide-solid, divide-dashed, divide-dotted, divide-double, divide-none

     

       768
       768
       +
       ```

     

       769
       769
       +
       

     

       770
       770
       +
       #### Outline Width

     

       771
       771
       +
       ```

     

       772
       772
       +
       outline-0, outline-1, outline-2, outline-4, outline-8

     

       773
       773
       +
       ```

     

       774
       774
       +
       

     

       775
       775
       +
       #### Outline Color

     

       776
       776
       +
       All color utilities work with `outline-` prefix

     

       777
       777
       +
       

     

       778
       778
       +
       #### Outline Style

     

       779
       779
       +
       ```

     

       780
       780
       +
       outline-none, outline, outline-dashed, outline-dotted, outline-double

     

       781
       781
       +
       ```

     

       782
       782
       +
       

     

       783
       783
       +
       #### Outline Offset

     

       784
       784
       +
       ```

     

       785
       785
       +
       outline-offset-0, outline-offset-1, outline-offset-2, outline-offset-4, outline-offset-8

     

       786
       786
       +
       ```

     

       787
       787
       +
       

     

       788
       788
       +
       #### Ring Width

     

       789
       789
       +
       ```

     

       790
       790
       +
       ring-0, ring-1, ring-2, ring, ring-4, ring-8, ring-inset

     

       791
       791
       +
       ```

     

       792
       792
       +
       

     

       793
       793
       +
       #### Ring Color

     

       794
       794
       +
       All color utilities work with `ring-` prefix

     

       795
       795
       +
       

     

       796
       796
       +
       #### Ring Offset Width

     

       797
       797
       +
       ```

     

       798
       798
       +
       ring-offset-0, ring-offset-1, ring-offset-2, ring-offset-4, ring-offset-8

     

       799
       799
       +
       ```

     

       800
       800
       +
       

     

       801
       801
       +
       #### Ring Offset Color

     

       802
       802
       +
       All color utilities work with `ring-offset-` prefix

     

       803
       803
       +
       

     

       804
       804
       +
       ### Effects

     

       805
       805
       +
       

     

       806
       806
       +
       #### Box Shadow

     

       807
       807
       +
       ```

     

       808
       808
       +
       shadow-xs, shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl, shadow-inner, shadow-none

     

       809
       809
       +
       ```

     

       810
       810
       +
       

     

       811
       811
       +
       #### Box Shadow Color

     

       812
       812
       +
       All color utilities work with `shadow-` prefix

     

       813
       813
       +
       

     

       814
       814
       +
       #### Drop Shadow (NEW colored support in v4)

     

       815
       815
       +
       ```

     

       816
       816
       +
       drop-shadow-sm, drop-shadow, drop-shadow-md, drop-shadow-lg, drop-shadow-xl, drop-shadow-2xl, drop-shadow-none

     

       817
       817
       +
       ```

     

       818
       818
       +
       

     

       819
       819
       +
       #### Opacity

     

       820
       820
       +
       ```

     

       821
       821
       +
       opacity-0, opacity-5, opacity-10, opacity-15, opacity-20, opacity-25, opacity-30, opacity-35, opacity-40, opacity-45, opacity-50, opacity-55, opacity-60, opacity-65, opacity-70, opacity-75, opacity-80, opacity-85, opacity-90, opacity-95, opacity-100

     

       822
       822
       +
       ```

     

       823
       823
       +
       

     

       824
       824
       +
       #### Mix Blend Mode

     

       825
       825
       +
       ```

     

       826
       826
       +
       mix-blend-normal, mix-blend-multiply, mix-blend-screen, mix-blend-overlay, mix-blend-darken, mix-blend-lighten, mix-blend-color-dodge, mix-blend-color-burn, mix-blend-hard-light, mix-blend-soft-light, mix-blend-difference, mix-blend-exclusion, mix-blend-hue, mix-blend-saturation, mix-blend-color, mix-blend-luminosity, mix-blend-plus-darker, mix-blend-plus-lighter

     

       827
       827
       +
       ```

     

       828
       828
       +
       

     

       829
       829
       +
       #### Background Blend Mode

     

       830
       830
       +
       ```

     

       831
       831
       +
       bg-blend-normal, bg-blend-multiply, bg-blend-screen, bg-blend-overlay, bg-blend-darken, bg-blend-lighten, bg-blend-color-dodge, bg-blend-color-burn, bg-blend-hard-light, bg-blend-soft-light, bg-blend-difference, bg-blend-exclusion, bg-blend-hue, bg-blend-saturation, bg-blend-color, bg-blend-luminosity

     

       832
       832
       +
       ```

     

       833
       833
       +
       

     

       834
       834
       +
       ### Filters

     

       835
       835
       +
       

     

       836
       836
       +
       #### Blur

     

       837
       837
       +
       ```

     

       838
       838
       +
       blur-none, blur-xs, blur-sm, blur, blur-md, blur-lg, blur-xl, blur-2xl, blur-3xl

     

       839
       839
       +
       ```

     

       840
       840
       +
       

     

       841
       841
       +
       #### Brightness

     

       842
       842
       +
       ```

     

       843
       843
       +
       brightness-0, brightness-50, brightness-75, brightness-90, brightness-95, brightness-100, brightness-105, brightness-110, brightness-125, brightness-150, brightness-200

     

       844
       844
       +
       ```

     

       845
       845
       +
       

     

       846
       846
       +
       #### Contrast

     

       847
       847
       +
       ```

     

       848
       848
       +
       contrast-0, contrast-50, contrast-75, contrast-100, contrast-125, contrast-150, contrast-200

     

       849
       849
       +
       ```

     

       850
       850
       +
       

     

       851
       851
       +
       #### Grayscale

     

       852
       852
       +
       ```

     

       853
       853
       +
       grayscale-0, grayscale

     

       854
       854
       +
       ```

     

       855
       855
       +
       

     

       856
       856
       +
       #### Hue Rotate

     

       857
       857
       +
       ```

     

       858
       858
       +
       hue-rotate-0, hue-rotate-15, hue-rotate-30, hue-rotate-60, hue-rotate-90, hue-rotate-180, -hue-rotate-180, -hue-rotate-90, -hue-rotate-60, -hue-rotate-30, -hue-rotate-15

     

       859
       859
       +
       ```

     

       860
       860
       +
       

     

       861
       861
       +
       #### Invert

     

       862
       862
       +
       ```

     

       863
       863
       +
       invert-0, invert

     

       864
       864
       +
       ```

     

       865
       865
       +
       

     

       866
       866
       +
       #### Saturate

     

       867
       867
       +
       ```

     

       868
       868
       +
       saturate-0, saturate-50, saturate-100, saturate-150, saturate-200

     

       869
       869
       +
       ```

     

       870
       870
       +
       

     

       871
       871
       +
       #### Sepia

     

       872
       872
       +
       ```

     

       873
       873
       +
       sepia-0, sepia

     

       874
       874
       +
       ```

     

       875
       875
       +
       

     

       876
       876
       +
       #### Backdrop Blur

     

       877
       877
       +
       ```

     

       878
       878
       +
       backdrop-blur-none, backdrop-blur-xs, backdrop-blur-sm, backdrop-blur, backdrop-blur-md, backdrop-blur-lg, backdrop-blur-xl, backdrop-blur-2xl, backdrop-blur-3xl

     

       879
       879
       +
       ```

     

       880
       880
       +
       

     

       881
       881
       +
       #### Backdrop Brightness

     

       882
       882
       +
       ```

     

       883
       883
       +
       backdrop-brightness-0, backdrop-brightness-50, backdrop-brightness-75, backdrop-brightness-90, backdrop-brightness-95, backdrop-brightness-100, backdrop-brightness-105, backdrop-brightness-110, backdrop-brightness-125, backdrop-brightness-150, backdrop-brightness-200

     

       884
       884
       +
       ```

     

       885
       885
       +
       

     

       886
       886
       +
       #### Backdrop Contrast

     

       887
       887
       +
       ```

     

       888
       888
       +
       backdrop-contrast-0, backdrop-contrast-50, backdrop-contrast-75, backdrop-contrast-100, backdrop-contrast-125, backdrop-contrast-150, backdrop-contrast-200

     

       889
       889
       +
       ```

     

       890
       890
       +
       

     

       891
       891
       +
       #### Backdrop Grayscale

     

       892
       892
       +
       ```

     

       893
       893
       +
       backdrop-grayscale-0, backdrop-grayscale

     

       894
       894
       +
       ```

     

       895
       895
       +
       

     

       896
       896
       +
       #### Backdrop Hue Rotate

     

       897
       897
       +
       ```

     

       898
       898
       +
       backdrop-hue-rotate-0, backdrop-hue-rotate-15, backdrop-hue-rotate-30, backdrop-hue-rotate-60, backdrop-hue-rotate-90, backdrop-hue-rotate-180, -backdrop-hue-rotate-180, -backdrop-hue-rotate-90, -backdrop-hue-rotate-60, -backdrop-hue-rotate-30, -backdrop-hue-rotate-15

     

       899
       899
       +
       ```

     

       900
       900
       +
       

     

       901
       901
       +
       #### Backdrop Invert

     

       902
       902
       +
       ```

     

       903
       903
       +
       backdrop-invert-0, backdrop-invert

     

       904
       904
       +
       ```

     

       905
       905
       +
       

     

       906
       906
       +
       #### Backdrop Saturate

     

       907
       907
       +
       ```

     

       908
       908
       +
       backdrop-saturate-0, backdrop-saturate-50, backdrop-saturate-100, backdrop-saturate-150, backdrop-saturate-200

     

       909
       909
       +
       ```

     

       910
       910
       +
       

     

       911
       911
       +
       #### Backdrop Sepia

     

       912
       912
       +
       ```

     

       913
       913
       +
       backdrop-sepia-0, backdrop-sepia

     

       914
       914
       +
       ```

     

       915
       915
       +
       

     

       916
       916
       +
       ### Masks (NEW in v4)

     

       917
       917
       +
       

     

       918
       918
       +
       #### Mask Image

     

       919
       919
       +
       ```

     

       920
       920
       +
       mask-none

     

       921
       921
       +
       ```

     

       922
       922
       +
       

     

       923
       923
       +
       #### Mask Size

     

       924
       924
       +
       ```

     

       925
       925
       +
       mask-auto, mask-cover, mask-contain

     

       926
       926
       +
       ```

     

       927
       927
       +
       

     

       928
       928
       +
       #### Mask Repeat

     

       929
       929
       +
       ```

     

       930
       930
       +
       mask-repeat, mask-no-repeat, mask-repeat-x, mask-repeat-y, mask-repeat-round, mask-repeat-space

     

       931
       931
       +
       ```

     

       932
       932
       +
       

     

       933
       933
       +
       #### Mask Position

     

       934
       934
       +
       ```

     

       935
       935
       +
       mask-bottom, mask-center, mask-left, mask-left-bottom, mask-left-top, mask-right, mask-right-bottom, mask-right-top, mask-top

     

       936
       936
       +
       ```

     

       937
       937
       +
       

     

       938
       938
       +
       #### Mask Origin

     

       939
       939
       +
       ```

     

       940
       940
       +
       mask-origin-border, mask-origin-padding, mask-origin-content

     

       941
       941
       +
       ```

     

       942
       942
       +
       

     

       943
       943
       +
       #### Mask Clip

     

       944
       944
       +
       ```

     

       945
       945
       +
       mask-clip-border, mask-clip-padding, mask-clip-content

     

       946
       946
       +
       ```

     

       947
       947
       +
       

     

       948
       948
       +
       #### Mask Composite

     

       949
       949
       +
       ```

     

       950
       950
       +
       mask-composite-add, mask-composite-subtract, mask-composite-intersect, mask-composite-exclude

     

       951
       951
       +
       ```

     

       952
       952
       +
       

     

       953
       953
       +
       #### Mask Mode

     

       954
       954
       +
       ```

     

       955
       955
       +
       mask-mode-match-source, mask-mode-luminance, mask-mode-alpha

     

       956
       956
       +
       ```

     

       957
       957
       +
       

     

       958
       958
       +
       #### Mask Type

     

       959
       959
       +
       ```

     

       960
       960
       +
       mask-type-luminance, mask-type-alpha

     

       961
       961
       +
       ```

     

       962
       962
       +
       

     

       963
       963
       +
       ### Tables

     

       964
       964
       +
       

     

       965
       965
       +
       #### Border Collapse

     

       966
       966
       +
       ```

     

       967
       967
       +
       border-collapse, border-separate

     

       968
       968
       +
       ```

     

       969
       969
       +
       

     

       970
       970
       +
       #### Border Spacing

     

       971
       971
       +
       ```

     

       972
       972
       +
       border-spacing-0, border-spacing-px, border-spacing-0.5, border-spacing-1, border-spacing-1.5, border-spacing-2, border-spacing-2.5, border-spacing-3, border-spacing-3.5, border-spacing-4, border-spacing-5, border-spacing-6, border-spacing-7, border-spacing-8, border-spacing-9, border-spacing-10, border-spacing-11, border-spacing-12, border-spacing-14, border-spacing-16, border-spacing-20, border-spacing-24, border-spacing-28, border-spacing-32, border-spacing-36, border-spacing-40, border-spacing-44, border-spacing-48, border-spacing-52, border-spacing-56, border-spacing-60, border-spacing-64, border-spacing-72, border-spacing-80, border-spacing-96

     

       973
       973
       +
       border-spacing-x-0, border-spacing-y-0 (and all other spacing values)

     

       974
       974
       +
       ```

     

       975
       975
       +
       

     

       976
       976
       +
       #### Table Layout

     

       977
       977
       +
       ```

     

       978
       978
       +
       table-auto, table-fixed

     

       979
       979
       +
       ```

     

       980
       980
       +
       

     

       981
       981
       +
       #### Caption Side

     

       982
       982
       +
       ```

     

       983
       983
       +
       caption-top, caption-bottom

     

       984
       984
       +
       ```

     

       985
       985
       +
       

     

       986
       986
       +
       ### Transforms

     

       987
       987
       +
       

     

       988
       988
       +
       #### Scale

     

       989
       989
       +
       ```

     

       990
       990
       +
       scale-0, scale-50, scale-75, scale-90, scale-95, scale-100, scale-105, scale-110, scale-125, scale-150

     

       991
       991
       +
       scale-x-0, scale-x-50, scale-x-75, scale-x-90, scale-x-95, scale-x-100, scale-x-105, scale-x-110, scale-x-125, scale-x-150

     

       992
       992
       +
       scale-y-0, scale-y-50, scale-y-75, scale-y-90, scale-y-95, scale-y-100, scale-y-105, scale-y-110, scale-y-125, scale-y-150

     

       993
       993
       +
       ```

     

       994
       994
       +
       

     

       995
       995
       +
       #### Scale Z (NEW in v4)

     

       996
       996
       +
       ```

     

       997
       997
       +
       scale-z-0, scale-z-50, scale-z-75, scale-z-90, scale-z-95, scale-z-100, scale-z-105, scale-z-110, scale-z-125, scale-z-150

     

       998
       998
       +
       ```

     

       999
       999
       +
       

     

       1000
       1000
       +
       #### Rotate

     

       1001
       1001
       +
       ```

     

       1002
       1002
       +
       rotate-0, rotate-1, rotate-2, rotate-3, rotate-6, rotate-12, rotate-45, rotate-90, rotate-180, -rotate-180, -rotate-90, -rotate-45, -rotate-12, -rotate-6, -rotate-3, -rotate-2, -rotate-1

     

       1003
       1003
       +
       ```

     

       1004
       1004
       +
       

     

       1005
       1005
       +
       #### Rotate X/Y (NEW in v4)

     

       1006
       1006
       +
       ```

     

       1007
       1007
       +
       rotate-x-0, rotate-x-1, rotate-x-2, rotate-x-3, rotate-x-6, rotate-x-12, rotate-x-45, rotate-x-90, rotate-x-180, -rotate-x-180, -rotate-x-90, -rotate-x-45, -rotate-x-12, -rotate-x-6, -rotate-x-3, -rotate-x-2, -rotate-x-1

     

       1008
       1008
       +
       rotate-y-0, rotate-y-1, rotate-y-2, rotate-y-3, rotate-y-6, rotate-y-12, rotate-y-45, rotate-y-90, rotate-y-180, -rotate-y-180, -rotate-y-90, -rotate-y-45, -rotate-y-12, -rotate-y-6, -rotate-y-3, -rotate-y-2, -rotate-y-1

     

       1009
       1009
       +
       ```

     

       1010
       1010
       +
       

     

       1011
       1011
       +
       #### Translate

     

       1012
       1012
       +
       ```

     

       1013
       1013
       +
       translate-x-0, translate-x-px, translate-x-0.5, translate-x-1, translate-x-1.5, translate-x-2, translate-x-2.5, translate-x-3, translate-x-3.5, translate-x-4, translate-x-5, translate-x-6, translate-x-7, translate-x-8, translate-x-9, translate-x-10, translate-x-11, translate-x-12, translate-x-14, translate-x-16, translate-x-20, translate-x-24, translate-x-28, translate-x-32, translate-x-36, translate-x-40, translate-x-44, translate-x-48, translate-x-52, translate-x-56, translate-x-60, translate-x-64, translate-x-72, translate-x-80, translate-x-96, translate-x-1/2, translate-x-1/3, translate-x-2/3, translate-x-1/4, translate-x-2/4, translate-x-3/4, translate-x-full

     

       1014
       1014
       +
       translate-y-0, translate-y-px, translate-y-0.5, translate-y-1, translate-y-1.5, translate-y-2, translate-y-2.5, translate-y-3, translate-y-3.5, translate-y-4, translate-y-5, translate-y-6, translate-y-7, translate-y-8, translate-y-9, translate-y-10, translate-y-11, translate-y-12, translate-y-14, translate-y-16, translate-y-20, translate-y-24, translate-y-28, translate-y-32, translate-y-36, translate-y-40, translate-y-44, translate-y-48, translate-y-52, translate-y-56, translate-y-60, translate-y-64, translate-y-72, translate-y-80, translate-y-96, translate-y-1/2, translate-y-1/3, translate-y-2/3, translate-y-1/4, translate-y-2/4, translate-y-3/4, translate-y-full

     

       1015
       1015
       +
       ```

     

       1016
       1016
       +
       

     

       1017
       1017
       +
       #### Translate Z (NEW in v4)

     

       1018
       1018
       +
       ```

     

       1019
       1019
       +
       translate-z-0, translate-z-px, translate-z-0.5, translate-z-1, translate-z-1.5, translate-z-2, translate-z-2.5, translate-z-3, translate-z-3.5, translate-z-4, translate-z-5, translate-z-6, translate-z-7, translate-z-8, translate-z-9, translate-z-10, translate-z-11, translate-z-12, translate-z-14, translate-z-16, translate-z-20, translate-z-24, translate-z-28, translate-z-32, translate-z-36, translate-z-40, translate-z-44, translate-z-48, translate-z-52, translate-z-56, translate-z-60, translate-z-64, translate-z-72, translate-z-80, translate-z-96

     

       1020
       1020
       +
       ```

     

       1021
       1021
       +
       

     

       1022
       1022
       +
       #### Skew

     

       1023
       1023
       +
       ```

     

       1024
       1024
       +
       skew-x-0, skew-x-1, skew-x-2, skew-x-3, skew-x-6, skew-x-12, -skew-x-12, -skew-x-6, -skew-x-3, -skew-x-2, -skew-x-1

     

       1025
       1025
       +
       skew-y-0, skew-y-1, skew-y-2, skew-y-3, skew-y-6, skew-y-12, -skew-y-12, -skew-y-6, -skew-y-3, -skew-y-2, -skew-y-1

     

       1026
       1026
       +
       ```

     

       1027
       1027
       +
       

     

       1028
       1028
       +
       #### Transform Origin

     

       1029
       1029
       +
       ```

     

       1030
       1030
       +
       origin-center, origin-top, origin-top-right, origin-right, origin-bottom-right, origin-bottom, origin-bottom-left, origin-left, origin-top-left

     

       1031
       1031
       +
       ```

     

       1032
       1032
       +
       

     

       1033
       1033
       +
       #### Transform Style (NEW in v4)

     

       1034
       1034
       +
       ```

     

       1035
       1035
       +
       transform-style-flat, transform-style-preserve-3d

     

       1036
       1036
       +
       ```

     

       1037
       1037
       +
       

     

       1038
       1038
       +
       #### Perspective (NEW in v4)

     

       1039
       1039
       +
       ```

     

       1040
       1040
       +
       perspective-none, perspective-250, perspective-500, perspective-750, perspective-1000, perspective-distant

     

       1041
       1041
       +
       ```

     

       1042
       1042
       +
       

     

       1043
       1043
       +
       #### Perspective Origin (NEW in v4)

     

       1044
       1044
       +
       ```

     

       1045
       1045
       +
       perspective-origin-center, perspective-origin-top, perspective-origin-top-right, perspective-origin-right, perspective-origin-bottom-right, perspective-origin-bottom, perspective-origin-bottom-left, perspective-origin-left, perspective-origin-top-left

     

       1046
       1046
       +
       ```

     

       1047
       1047
       +
       

     

       1048
       1048
       +
       ### Interactivity

     

       1049
       1049
       +
       

     

       1050
       1050
       +
       #### Accent Color

     

       1051
       1051
       +
       ```

     

       1052
       1052
       +
       accent-auto, accent-inherit, accent-current, accent-transparent, accent-black, accent-white

     

       1053
       1053
       +
       accent-{color} (all color utilities work with accent- prefix)

     

       1054
       1054
       +
       ```

     

       1055
       1055
       +
       

     

       1056
       1056
       +
       #### Appearance

     

       1057
       1057
       +
       ```

     

       1058
       1058
       +
       appearance-none, appearance-auto

     

       1059
       1059
       +
       ```

     

       1060
       1060
       +
       

     

       1061
       1061
       +
       #### Cursor

     

       1062
       1062
       +
       ```

     

       1063
       1063
       +
       cursor-auto, cursor-default, cursor-pointer, cursor-wait, cursor-text, cursor-move, cursor-help, cursor-not-allowed, cursor-none, cursor-context-menu, cursor-progress, cursor-cell, cursor-crosshair, cursor-vertical-text, cursor-alias, cursor-copy, cursor-no-drop, cursor-grab, cursor-grabbing, cursor-all-scroll, cursor-col-resize, cursor-row-resize, cursor-n-resize, cursor-e-resize, cursor-s-resize, cursor-w-resize, cursor-ne-resize, cursor-nw-resize, cursor-se-resize, cursor-sw-resize, cursor-ew-resize, cursor-ns-resize, cursor-nesw-resize, cursor-nwse-resize, cursor-zoom-in, cursor-zoom-out

     

       1064
       1064
       +
       ```

     

       1065
       1065
       +
       

     

       1066
       1066
       +
       #### Caret Color

     

       1067
       1067
       +
       All color utilities work with `caret-` prefix

     

       1068
       1068
       +
       

     

       1069
       1069
       +
       #### Pointer Events

     

       1070
       1070
       +
       ```

     

       1071
       1071
       +
       pointer-events-none, pointer-events-auto

     

       1072
       1072
       +
       ```

     

       1073
       1073
       +
       

     

       1074
       1074
       +
       #### Resize

     

       1075
       1075
       +
       ```

     

       1076
       1076
       +
       resize-none, resize, resize-y, resize-x

     

       1077
       1077
       +
       ```

     

       1078
       1078
       +
       

     

       1079
       1079
       +
       #### Scroll Behavior

     

       1080
       1080
       +
       ```

     

       1081
       1081
       +
       scroll-auto, scroll-smooth

     

       1082
       1082
       +
       ```

     

       1083
       1083
       +
       

     

       1084
       1084
       +
       #### Scroll Margin

     

       1085
       1085
       +
       ```

     

       1086
       1086
       +
       scroll-m-0, scroll-m-px, scroll-m-0.5, scroll-m-1, scroll-m-1.5, scroll-m-2, scroll-m-2.5, scroll-m-3, scroll-m-3.5, scroll-m-4, scroll-m-5, scroll-m-6, scroll-m-7, scroll-m-8, scroll-m-9, scroll-m-10, scroll-m-11, scroll-m-12, scroll-m-14, scroll-m-16, scroll-m-20, scroll-m-24, scroll-m-28, scroll-m-32, scroll-m-36, scroll-m-40, scroll-m-44, scroll-m-48, scroll-m-52, scroll-m-56, scroll-m-60, scroll-m-64, scroll-m-72, scroll-m-80, scroll-m-96

     

       1087
       1087
       +
       scroll-mx-0, scroll-my-0, scroll-ms-0, scroll-me-0, scroll-mt-0, scroll-mr-0, scroll-mb-0, scroll-ml-0 (and all spacing values)

     

       1088
       1088
       +
       ```

     

       1089
       1089
       +
       

     

       1090
       1090
       +
       #### Scroll Padding

     

       1091
       1091
       +
       ```

     

       1092
       1092
       +
       scroll-p-0, scroll-p-px, scroll-p-0.5, scroll-p-1, scroll-p-1.5, scroll-p-2, scroll-p-2.5, scroll-p-3, scroll-p-3.5, scroll-p-4, scroll-p-5, scroll-p-6, scroll-p-7, scroll-p-8, scroll-p-9, scroll-p-10, scroll-p-11, scroll-p-12, scroll-p-14, scroll-p-16, scroll-p-20, scroll-p-24, scroll-p-28, scroll-p-32, scroll-p-36, scroll-p-40, scroll-p-44, scroll-p-48, scroll-p-52, scroll-p-56, scroll-p-60, scroll-p-64, scroll-p-72, scroll-p-80, scroll-p-96

     

       1093
       1093
       +
       scroll-px-0, scroll-py-0, scroll-ps-0, scroll-pe-0, scroll-pt-0, scroll-pr-0, scroll-pb-0, scroll-pl-0 (and all spacing values)

     

       1094
       1094
       +
       ```

     

       1095
       1095
       +
       

     

       1096
       1096
       +
       #### Scroll Snap Align

     

       1097
       1097
       +
       ```

     

       1098
       1098
       +
       snap-start, snap-end, snap-center, snap-align-none

     

       1099
       1099
       +
       ```

     

       1100
       1100
       +
       

     

       1101
       1101
       +
       #### Scroll Snap Stop

     

       1102
       1102
       +
       ```

     

       1103
       1103
       +
       snap-normal, snap-always

     

       1104
       1104
       +
       ```

     

       1105
       1105
       +
       

     

       1106
       1106
       +
       #### Scroll Snap Type

     

       1107
       1107
       +
       ```

     

       1108
       1108
       +
       snap-none, snap-x, snap-y, snap-both, snap-mandatory, snap-proximity

     

       1109
       1109
       +
       ```

     

       1110
       1110
       +
       

     

       1111
       1111
       +
       #### Touch Action

     

       1112
       1112
       +
       ```

     

       1113
       1113
       +
       touch-auto, touch-none, touch-pan-x, touch-pan-left, touch-pan-right, touch-pan-y, touch-pan-up, touch-pan-down, touch-pinch-zoom, touch-manipulation

     

       1114
       1114
       +
       ```

     

       1115
       1115
       +
       

     

       1116
       1116
       +
       #### User Select

     

       1117
       1117
       +
       ```

     

       1118
       1118
       +
       select-none, select-text, select-all, select-auto

     

       1119
       1119
       +
       ```

     

       1120
       1120
       +
       

     

       1121
       1121
       +
       #### Will Change

     

       1122
       1122
       +
       ```

     

       1123
       1123
       +
       will-change-auto, will-change-scroll, will-change-contents, will-change-transform

     

       1124
       1124
       +
       ```

     

       1125
       1125
       +
       

     

       1126
       1126
       +
       ### SVG

     

       1127
       1127
       +
       

     

       1128
       1128
       +
       #### Fill

     

       1129
       1129
       +
       ```

     

       1130
       1130
       +
       fill-none, fill-inherit, fill-current, fill-transparent, fill-black, fill-white

     

       1131
       1131
       +
       fill-{color} (all color utilities work with fill- prefix)

     

       1132
       1132
       +
       ```

     

       1133
       1133
       +
       

     

       1134
       1134
       +
       #### Stroke

     

       1135
       1135
       +
       ```

     

       1136
       1136
       +
       stroke-none, stroke-inherit, stroke-current, stroke-transparent, stroke-black, stroke-white

     

       1137
       1137
       +
       stroke-{color} (all color utilities work with stroke- prefix)

     

       1138
       1138
       +
       ```

     

       1139
       1139
       +
       

     

       1140
       1140
       +
       #### Stroke Width

     

       1141
       1141
       +
       ```

     

       1142
       1142
       +
       stroke-0, stroke-1, stroke-2

     

       1143
       1143
       +
       ```

     

       1144
       1144
       +
       

     

       1145
       1145
       +
       ### Accessibility

     

       1146
       1146
       +
       

     

       1147
       1147
       +
       #### Screen Readers

     

       1148
       1148
       +
       ```

     

       1149
       1149
       +
       sr-only, not-sr-only

     

       1150
       1150
       +
       ```

     

       1151
       1151
       +
       

     

       1152
       1152
       +
       #### Forced Color Adjust

     

       1153
       1153
       +
       ```

     

       1154
       1154
       +
       forced-color-adjust-auto, forced-color-adjust-none

     

       1155
       1155
       +
       ```

     

       1156
       1156
       +
       

     

       1157
       1157
       +
       ### Container Queries (NEW in v4)

     

       1158
       1158
       +
       

     

       1159
       1159
       +
       #### Container Type

     

       1160
       1160
       +
       ```

     

       1161
       1161
       +
       @container, @container-normal, @container-size, @container-inline-size

     

       1162
       1162
       +
       ```

     

       1163
       1163
       +
       

     

       1164
       1164
       +
       #### Container Query Variants

     

       1165
       1165
       +
       ```

     

       1166
       1166
       +
       @xs:, @sm:, @md:, @lg:, @xl:, @2xl:, @3xl:, @4xl:, @5xl:, @6xl:, @7xl:

     

       1167
       1167
       +
       @min-w-0:, @min-w-xs:, @min-w-sm:, @min-w-md:, @min-w-lg:, @min-w-xl:, @min-w-2xl:, @min-w-3xl:, @min-w-4xl:, @min-w-5xl:, @min-w-6xl:, @min-w-7xl:

     

       1168
       1168
       +
       @max-w-xs:, @max-w-sm:, @max-w-md:, @max-w-lg:, @max-w-xl:, @max-w-2xl:, @max-w-3xl:, @max-w-4xl:, @max-w-5xl:, @max-w-6xl:, @max-w-7xl:

     

       1169
       1169
       +
       @min-h-0:, @min-h-xs:, @min-h-sm:, @min-h-md:, @min-h-lg:, @min-h-xl:, @min-h-2xl:, @min-h-3xl:, @min-h-4xl:, @min-h-5xl:, @min-h-6xl:, @min-h-7xl:

     

       1170
       1170
       +
       @max-h-xs:, @max-h-sm:, @max-h-md:, @max-h-lg:, @max-h-xl:, @max-h-2xl:, @max-h-3xl:, @max-h-4xl:, @max-h-5xl:, @max-h-6xl:, @max-h-7xl:

     

       1171
       1171
       +
       ```

     

       1172
       1172
       +
       

     

       1173
       1173
       +
       ### Responsive Design

     

       1174
       1174
       +
       

     

       1175
       1175
       +
       #### Breakpoint Variants

     

       1176
       1176
       +
       ```

     

       1177
       1177
       +
       sm:, md:, lg:, xl:, 2xl:

     

       1178
       1178
       +
       max-sm:, max-md:, max-lg:, max-xl:, max-2xl:

     

       1179
       1179
       +
       ```

     

       1180
       1180
       +
       

     

       1181
       1181
       +
       ### State Variants

     

       1182
       1182
       +
       

     

       1183
       1183
       +
       #### Hover, Focus, etc.

     

       1184
       1184
       +
       ```

     

       1185
       1185
       +
       hover:, focus:, focus-within:, focus-visible:, active:, visited:, target:, disabled:, enabled:, checked:, indeterminate:, default:, required:, valid:, invalid:, in-range:, out-of-range:, placeholder-shown:, autofill:, read-only:

     

       1186
       1186
       +
       ```

     

       1187
       1187
       +
       

     

       1188
       1188
       +
       #### Group States

     

       1189
       1189
       +
       ```

     

       1190
       1190
       +
       group-hover:, group-focus:, group-focus-within:, group-focus-visible:, group-active:, group-visited:, group-target:, group-disabled:, group-enabled:, group-checked:, group-indeterminate:, group-default:, group-required:, group-valid:, group-invalid:, group-in-range:, group-out-of-range:, group-placeholder-shown:, group-autofill:, group-read-only:

     

       1191
       1191
       +
       ```

     

       1192
       1192
       +
       

     

       1193
       1193
       +
       #### Peer States

     

       1194
       1194
       +
       ```

     

       1195
       1195
       +
       peer-hover:, peer-focus:, peer-focus-within:, peer-focus-visible:, peer-active:, peer-visited:, peer-target:, peer-disabled:, peer-enabled:, peer-checked:, peer-indeterminate:, peer-default:, peer-required:, peer-valid:, peer-invalid:, peer-in-range:, peer-out-of-range:, peer-placeholder-shown:, peer-autofill:, peer-read-only:

     

       1196
       1196
       +
       ```

     

       1197
       1197
       +
       

     

       1198
       1198
       +
       #### NEW Variants in v4

     

       1199
       1199
       +
       ```

     

       1200
       1200
       +
       @starting-style:, not-*, nth-*, in-*, inert:, open: (for popovers)

     

       1201
       1201
       +
       ```

     

       1202
       1202
       +
       

     

       1203
       1203
       +
       ### Media Queries

     

       1204
       1204
       +
       

     

       1205
       1205
       +
       #### Dark Mode

     

       1206
       1206
       +
       ```

     

       1207
       1207
       +
       dark:

     

       1208
       1208
       +
       ```

     

       1209
       1209
       +
       

     

       1210
       1210
       +
       #### Motion

     

       1211
       1211
       +
       ```

     

       1212
       1212
       +
       motion-safe:, motion-reduce:

     

       1213
       1213
       +
       ```

     

       1214
       1214
       +
       

     

       1215
       1215
       +
       #### Contrast

     

       1216
       1216
       +
       ```

     

       1217
       1217
       +
       contrast-more:, contrast-less:

     

       1218
       1218
       +
       ```

     

       1219
       1219
       +
       

     

       1220
       1220
       +
       #### Print

     

       1221
       1221
       +
       ```

     

       1222
       1222
       +
       print:

     

       1223
       1223
       +
       ```

     

       1224
       1224
       +
       

     

       1225
       1225
       +
       #### Orientation

     

       1226
       1226
       +
       ```

     

       1227
       1227
       +
       portrait:, landscape:

     

       1228
       1228
       +
       ```

     

       1229
       1229
       +
       

     

       1230
       1230
       +
       ### Content

     

       1231
       1231
       +
       ```

     

       1232
       1232
       +
       content-none, content-['text']

     

       1233
       1233
       +
       ```

     

       1234
       1234
       +
       

     

       1235
       1235
       +
       ### Arbitrary Values

     

       1236
       1236
       +
       You can use arbitrary values with square brackets for any property:

     

       1237
       1237
       +
       ```

     

       1238
       1238
       +
       w-[123px], h-[456px], text-[#bada55], bg-[url('...')], top-[117px], left-[344px]

     

       1239
       1239
       +
       m-[12px], p-[24px], grid-cols-[200px_minmax(900px,_1fr)_100px]

     

       1240
       1240
       +
       ```

     

       1241
       1241
       +
       

     

       1242
       1242
       +
       ### Arbitrary Properties

     

       1243
       1243
       +
       ```

     

       1244
       1244
       +
       [mask-type:luminance], [tab-size:4], [@supports(backdrop-filter:blur(0))]:bg-white/75

     

       1245
       1245
       +
       ```

     

       1246
       1246
       +
       

     

       1247
       1247
       +
       ### Arbitrary Variants

     

       1248
       1248
       +
       ```

     

       1249
       1249
       +
       [&:nth-child(3)]:, [&:hover]:, [&_p]:, [@media(min-width:600px)]:

     

       1250
       1250
       +
       [@supports(backdrop-filter:blur(0))]:, [data-theme="dark"]:

     

       1251
       1251
       +
       ```

     

       1252
       1252
       +
       

     

       1253
       1253
       +
       ## Common v4 Pitfalls to Avoid

     

       1254
       1254
       +
       

     

       1255
       1255
       +
       ### Don't Use These Deprecated Patterns

     

       1256
       1256
       +
       - ❌ `@tailwind base; @tailwind components; @tailwind utilities;`

     

       1257
       1257
       +
       - ❌ `text-opacity-50` → Use `text-white/50` instead

     

       1258
       1258
       +
       - ❌ `bg-opacity-25` → Use `bg-blue-500/25` instead

     

       1259
       1259
       +
       - ❌ `border` without color (now uses currentColor, not gray-200)

     

       1260
       1260
       +
       - ❌ `ring` without explicit width (now 1px, was 3px)

     

       1261
       1261
       +
       - ❌ `@layer utilities` → Use `@utility` instead

     

       1262
       1262
       +
       - ❌ JavaScript config for new projects → Use CSS `@theme`

     

       1263
       1263
       +
       

     

       1264
       1264
       +
       ### Modern v4 Alternatives

     

       1265
       1265
       +
       - ✅ `@import "tailwindcss";`

     

       1266
       1266
       +
       - ✅ `text-white/50` for semi-transparent text

     

       1267
       1267
       +
       - ✅ `bg-blue-500/25` for semi-transparent backgrounds

     

       1268
       1268
       +
       - ✅ `border border-gray-200` for explicit border color

     

       1269
       1269
       +
       - ✅ `ring-3` for 3px ring width

     

       1270
       1270
       +
       - ✅ `@utility` for custom utilities

     

       1271
       1271
       +
       - ✅ `@theme` for configuration

     

       1272
       1272
       +
       

     

       1273
       1273
       +
       ## Performance Best Practices

     

       1274
       1274
       +
       

     

       1275
       1275
       +
       ### Leverage v4's Performance Features

     

       1276
       1276
       +
       - Use automatic content detection (no manual `content` config needed)

     

       1277
       1277
       +
       - Prefer container queries over viewport queries for true component responsiveness

     

       1278
       1278
       +
       - Use CSS variables from `@theme` for dynamic styling

     

       1279
       1279
       +
       - Leverage the new OKLCH color system for better color consistency

     

       1280
       1280
       +
       

     

       1281
       1281
       +
       ### Efficient Class Usage

     

       1282
       1282
       +
       ```html

     

       1283
       1283
       +
       <!-- Good: Use size-* for square elements -->

     

       1284
       1284
       +
       <div class="size-12"></div>

     

       1285
       1285
       +
       

     

       1286
       1286
       +
       <!-- Instead of: -->

     

       1287
       1287
       +
       <div class="w-12 h-12"></div>

     

       1288
       1288
       +
       

     

       1289
       1289
       +
       <!-- Good: Use container queries for component responsiveness -->

     

       1290
       1290
       +
       <div class="@container">

     

       1291
       1291
       +
         <div class="p-4 @lg:p-8">Content</div>

     

       1292
       1292
       +
       </div>

     

       1293
       1293
       +
       

     

       1294
       1294
       +
       <!-- Good: Use CSS variables for dynamic values -->

     

       1295
       1295
       +
       <div class="bg-[var(--theme-primary)] text-[var(--theme-on-primary)]">

     

       1296
       1296
       +
         Dynamic theming

     

       1297
       1297
       +
       </div>

     

       1298
       1298
       +
       ```

     

       1299
       1299
       +
       

     

       1300
       1300
       +
       ## Framework Integration

     

       1301
       1301
       +
       

     

       1302
       1302
       +
       ### Svelte 5

     

       1303
       1303
       +
       ```svelte

     

       1304
       1304
       +
       <script>

     

       1305
       1305
       +
         let { variant = "primary", children } = $props();

     

       1306
       1306
       +
         

     

       1307
       1307
       +
         const buttonClasses = $derived(() => [

     

       1308
       1308
       +
           'px-4 py-2 rounded-md font-medium transition-colors',

     

       1309
       1309
       +
           variant === 'primary' 

     

       1310
       1310
       +
             ? 'bg-brand text-white hover:bg-brand/90'

     

       1311
       1311
       +
             : 'bg-gray-100 text-gray-900 hover:bg-gray-200'

     

       1312
       1312
       +
         ].join(' '));

     

       1313
       1313
       +
       </script>

     

       1314
       1314
       +
       

     

       1315
       1315
       +
       <button class={buttonClasses}>

     

       1316
       1316
       +
         {@render children()}

     

       1317
       1317
       +
       </button>

     

       1318
       1318
       +
       

     

       1319
       1319
       +
       <style>

     

       1320
       1320
       +
       @import "tailwindcss";

     

       1321
       1321
       +
       

     

       1322
       1322
       +
       @theme {

     

       1323
       1323
       +
         --color-brand: oklch(0.5 0.2 240);

     

       1324
       1324
       +
       }

     

       1325
       1325
       +
       </style>

     

       1326
       1326
       +
       ```

     

       1327
       1327
       +
       

     

       1328
       1328
       +
       ## Debugging & Development

     

       1329
       1329
       +
       

     

       1330
       1330
       +
       ### Browser DevTools Tips

     

       1331
       1331
       +
       1. **Inspect CSS Variables**: Check `:root` in DevTools to see all theme variables

     

       1332
       1332
       +
       2. **Check Cascade Layers**: Use the Layers panel to understand style precedence

     

       1333
       1333
       +
       3. **Verify OKLCH Support**: Test colors in modern browsers vs fallbacks

     

       1334
       1334
       +
       4. **Container Query Debugging**: Use the @container panel in DevTools

     

       1335
       1335
       +
       

     

       1336
       1336
       +
       ### Common Debug Commands

     

       1337
       1337
       +
       ```bash

     

       1338
       1338
       +
       # Check if utilities are being generated

     

       1339
       1339
       +
       npx tailwindcss --watch --content "./src/**/*.{html,js,jsx,ts,tsx}"

     

       1340
       1340
       +
       

     

       1341
       1341
       +
       # Verify v4 installation

     

       1342
       1342
       +
       npm list tailwindcss

     

       1343
       1343
       +
       

     

       1344
       1344
       +
       # Check for conflicting PostCSS plugins

     

       1345
       1345
       +
       npm list | grep postcss

     

       1346
       1346
       +
       ```

     

       1347
       1347
       +
       

     

       1348
       1348
       +
       ### VS Code Extensions

     

       1349
       1349
       +
       - Tailwind CSS IntelliSense (updated for v4)

     

       1350
       1350
       +
       - PostCSS Language Support

     

       1351
       1351
       +
       

     

       1352
       1352
       +
       ## v3 to v4 Migration Checklist

     

       1353
       1353
       +
       

     

       1354
       1354
       +
       ### Pre-Migration

     

       1355
       1355
       +
       - [ ] Backup your project

     

       1356
       1356
       +
       - [ ] Ensure Node.js 20+ is installed

     

       1357
       1357
       +
       - [ ] Check browser support requirements (Safari 16.4+, Chrome 111+, Firefox 128+)

     

       1358
       1358
       +
       

     

       1359
       1359
       +
       ### Automated Migration

     

       1360
       1360
       +
       ```bash

     

       1361
       1361
       +
       npx @tailwindcss/upgrade@next

     

       1362
       1362
       +
       ```

     

       1363
       1363
       +
       

     

       1364
       1364
       +
       ### Manual Verification

     

       1365
       1365
       +
       - [ ] Replace `@tailwind` directives with `@import "tailwindcss"`

     

       1366
       1366
       +
       - [ ] Move `tailwind.config.js` content to CSS `@theme`

     

       1367
       1367
       +
       - [ ] Update deprecated utility classes

     

       1368
       1368
       +
       - [ ] Test container queries functionality

     

       1369
       1369
       +
       - [ ] Verify custom component styles

     

       1370
       1370
       +
       - [ ] Check 3D transform support

     

       1371
       1371
       +
       - [ ] Test mask utilities if used

     

       1372
       1372
       +
       - [ ] Validate color consistency (OKLCH vs RGB)

     

       1373
       1373
       +
       

     

       1374
       1374
       +
       ### Testing

     

       1375
       1375
       +
       - [ ] Test in all target browsers

     

       1376
       1376
       +
       - [ ] Verify responsive design still works

     

       1377
       1377
       +
       - [ ] Check dark mode functionality

     

       1378
       1378
       +
       - [ ] Test custom animations

     

       1379
       1379
       +
       - [ ] Validate accessibility features

     

       1380
       1380
       +
       

     

       1381
       1381
       +
       ## Production-Ready Component Patterns

     

       1382
       1382
       +
       

     

       1383
       1383
       +
       ### Modern Card Component

     

       1384
       1384
       +
       ```html

     

       1385
       1385
       +
       <div class="@container group">

     

       1386
       1386
       +
         <article class="

     

       1387
       1387
       +
           bg-white dark:bg-gray-900 

     

       1388
       1388
       +
           rounded-xl shadow-sm border border-gray-200 dark:border-gray-800

     

       1389
       1389
       +
           overflow-hidden transition-all duration-200

     

       1390
       1390
       +
           hover:shadow-md hover:-translate-y-0.5

     

       1391
       1391
       +
           @sm:flex @sm:items-center

     

       1392
       1392
       +
         ">

     

       1393
       1393
       +
           <div class="@sm:flex-shrink-0">

     

       1394
       1394
       +
             <img class="h-48 w-full object-cover @sm:h-full @sm:w-48" src="..." alt="...">

     

       1395
       1395
       +
           </div>

     

       1396
       1396
       +
           <div class="p-6 @sm:p-8">

     

       1397
       1397
       +
             <h3 class="text-lg font-semibold text-gray-900 dark:text-white @lg:text-xl">

     

       1398
       1398
       +
               Card Title

     

       1399
       1399
       +
             </h3>

     

       1400
       1400
       +
             <p class="mt-2 text-gray-600 dark:text-gray-300 @lg:text-lg">

     

       1401
       1401
       +
               Card description that adapts to container size.

     

       1402
       1402
       +
             </p>

     

       1403
       1403
       +
           </div>

     

       1404
       1404
       +
         </article>

     

       1405
       1405
       +
       </div>

     

       1406
       1406
       +
       ```

     

       1407
       1407
       +
       

     

       1408
       1408
       +
       ### 3D Interactive Button

     

       1409
       1409
       +
       ```html

     

       1410
       1410
       +
       <button class="

     

       1411
       1411
       +
         relative px-6 py-3 bg-blue-600 text-white font-medium rounded-lg

     

       1412
       1412
       +
         transform-3d perspective-1000 

     

       1413
       1413
       +
         transition-all duration-200

     

       1414
       1414
       +
         hover:rotate-x-12 hover:scale-105 hover:shadow-xl

     

       1415
       1415
       +
         active:scale-95 active:rotate-x-6

     

       1416
       1416
       +
         focus:outline-none focus:ring-2 focus:ring-blue-500/50

     

       1417
       1417
       +
       ">

     

       1418
       1418
       +
         3D Button

     

       1419
       1419
       +
       </button>

     

       1420
       1420
       +
       ```

     

       1421
       1421
       +
       

     

       1422
       1422
       +
       Remember: Tailwind CSS v4 is designed for modern browsers and modern development workflows. Embrace the new CSS-first approach and leverage the powerful new features for better performance and developer experience.

+13

.tangled/workflows/build.yml

···

       1
       1
       +
       when:

     

       2
       2
       +
         - event: ["push", "pull_request"]

     

       3
       3
       +
           branch: ["main"]

     

       4
       4
       +
       

     

       5
       5
       +
       dependencies:

     

       6
       6
       +
         nixpkgs:

     

       7
       7
       +
           - dune

     

       8
       8
       +
           - opam

     

       9
       9
       +
       

     

       10
       10
       +
       steps:

     

       11
       11
       +
         - name: dune

     

       12
       12
       +
           command: |

     

       13
       13
       +
              dune build

+1 -3

CLAUDE.md

···

       1
       1
       -
       My goal is to build a high quality professions OCaml library to generate Tailwind CSS components. Build a core `tailwind` library that serialises the CSS into strings. Then build a `tailwind-html` library that uses the Htmlit OCaml HTML generation library https://github.com/dbuenzli/htmlit for common components.

     

       2
       2
       -
       

     

       3
       3
       -
       You can find full Tailwind docs in tailwind-llms.txt

     

       1
       1
       +
       Look in .agent/ for instructions

+18

LICENSE.md

···

       1
       1
       +
       (*

     

       2
       2
       +
        * ISC License

     

       3
       3
       +
        * 

     

       4
       4
       +
        * Copyright (c) 2025 Anil Madhavapeddy <anil@recoil.org>

     

       5
       5
       +
        *

     

       6
       6
       +
        * Permission to use, copy, modify, and distribute this software for any

     

       7
       7
       +
        * purpose with or without fee is hereby granted, provided that the above

     

       8
       8
       +
        * copyright notice and this permission notice appear in all copies.

     

       9
       9
       +
        *

     

       10
       10
       +
        * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES

     

       11
       11
       +
        * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF

     

       12
       12
       +
        * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR

     

       13
       13
       +
        * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES

     

       14
       14
       +
        * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN

     

       15
       15
       +
        * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF

     

       16
       16
       +
        * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

     

       17
       17
       +
        *

     

       18
       18
       +
        *)

+276 -148

README.md

···

       1
       1
        
       # Tailwind OCaml

     

       2
       2
        
       

     

       3
       3
       -
       An OCaml library for generating Tailwind CSS classes with compile-time

     

       4
       4
       -
       validation and a companion HTML generation library using Htmlit.

     

       3
       3
       +
       Type-safe Tailwind CSS generation for OCaml with a revolutionary GADT-based interface for succinct, compile-time validated styling.

     

       5
       4
        
       

     

       6
       5
        
       This project provides two main libraries:

     

       7
       6
        
       

     

       8
       7
        
       - **`tailwind`**: Core library for type-safe Tailwind CSS class generation

     

       9
       9
       -
       - **`tailwind-html`**: HTML component library built on top of [Htmlit](https://github.com/dbuenzli/htmlit)

     

       8
       8
       +
       - **`tailwind-html`**: High-level HTML component library with GADT-based heterogeneous list interface built on [Htmlit](https://github.com/dbuenzli/htmlit)

     

       10
       9
        
       

     

       11
       10
        
       ## Features

     

       12
       11
        
       

     

       13
       13
       -
       - Compile-time validation of Tailwind classes

     

       14
       14
       -
       - Type-safe color variants and sizes

     

       15
       15
       -
       - Exhaustive pattern matching for all utility classes

     

       12
       12
       +
       - **GADT-based Interface**: Succinct heterogeneous list syntax with compile-time type safety

     

       13
       13
       +
       - **Zero Runtime Cost**: All CSS generation happens at compile time

     

       14
       14
       +
       - **Comprehensive Grid Support**: Full CSS Grid integration with type-safe properties

     

       15
       15
       +
       - **Type-Safe Colors & Spacing**: Exhaustive variants with compile-time validation

     

       16
       16
       +
       - **Built-in Components**: Pre-styled buttons, cards, and layout helpers

     

       16
       17
        
       

     

       17
       17
       -
       ### Comprehensive Coverage

     

       18
       18
       -
       - **Typography**: Font sizes, weights, line heights, text alignment, decorations

     

       19
       19
       -
       - **Layout**: Display, position, flexbox, grid, spacing

     

       20
       20
       -
       - **Colors**: Full color palette with variants

     

       18
       18
       +
       ### Complete Tailwind Coverage

     

       19
       19
       +
       - **Typography**: Font sizes, weights, text alignment with type-safe variants

     

       20
       20
       +
       - **Layout**: CSS Grid, Flexbox, spacing with compile-time validation  

     

       21
       21
       +
       - **Colors**: Full palette (gray, blue, red, green, etc.) with variant checking

     

       21
       22
        
       - **Effects**: Shadows, borders, rounded corners, transitions

     

       22
       22
       -
       - **Responsive**: Breakpoint-based responsive utilities

     

       23
       23
       -
       - **Variants**: Hover, focus, and other state variants

     

       23
       23
       +
       - **Components**: Pre-built buttons, cards, and layout helpers

     

       24
       24
       +
       - **Type Safety**: GADT-based heterogeneous lists prevent invalid combinations

     

       24
       25
        
       

     

       25
       25
       -
       ### Using Dune

     

       26
       26
       +
       ## Quick Start

     

       26
       27
        
       

     

       27
       27
       -
       Add to your `dune-project`:

     

       28
       28
       -
       

     

       29
       29
       -
       ```dune

     

       30
       30
       -
       (package

     

       31
       31
       -
        (name myproject)

     

       32
       32
       -
        (depends

     

       33
       33
       -
         ocaml

     

       34
       34
       -
         dune

     

       35
       35
       -
         tailwind

     

       36
       36
       -
         tailwind-html

     

       37
       37
       -
         htmlit))

     

       38
       38
       -
       ```

     

       39
       39
       -
       

     

       40
       40
       -
       ## Quick Start

     

       28
       28
       +
       ### GADT Interface (Recommended)

     

       41
       29
        
       

     

       42
       42
       -
       ### Basic Usage

     

       30
       30
       +
       The new GADT-based interface provides succinct, type-safe styling with heterogeneous lists:

     

       43
       31
        
       

     

       44
       32
        
       ```ocaml

     

       45
       45
       -
       open Tailwind

     

       33
       33
       +
       open Htmlit

     

       34
       34
       +
       open Tailwind_html

     

       46
       35
        
       

     

       47
       47
       -
       (* Create a styled div *)

     

       48
       48
       -
       let styled_div = 

     

       49
       49
       -
         let classes = tw [

     

       50
       50
       -
           Display.flex;

     

       51
       51
       -
           Flexbox.(to_class (justify `Center));

     

       52
       52
       -
           Flexbox.(to_class (align_items `Center));

     

       53
       53
       -
           Color.bg (Color.make `Gray ~variant:`V100 ());

     

       54
       54
       -
           Spacing.(to_class (p (Size.rem 2.0)));

     

       55
       55
       -
         ] in

     

       56
       56
       -
         Printf.sprintf "<div class=\"%s\">Content</div>" (to_string classes)

     

       36
       36
       +
       (* Create a centered card with CSS Grid *)

     

       37
       37
       +
       let create_hero_section () =

     

       38
       38
       +
         div ~styles:[

     

       39
       39
       +
           grid;

     

       40
       40
       +
           grid_cols 1;

     

       41
       41
       +
           gap (rem 2.0);

     

       42
       42
       +
           padding (rem 3.0);

     

       43
       43
       +
           text_center;

     

       44
       44
       +
         ] [

     

       45
       45
       +
           h1 ~styles:[

     

       46
       46
       +
             font_size `Xl3;

     

       47
       47
       +
             font_weight `Bold;

     

       48
       48
       +
             text_color (blue 600);

     

       49
       49
       +
             margin_bottom (rem 1.5);

     

       50
       50
       +
           ] [txt "Welcome to Tailwind OCaml"];

     

       51
       51
       +
           

     

       52
       52
       +
           p ~styles:[

     

       53
       53
       +
             font_size `Lg;

     

       54
       54
       +
             text_color (gray 600);

     

       55
       55
       +
             margin_bottom (rem 2.0);

     

       56
       56
       +
           ] [txt "Type-safe CSS with compile-time guarantees"];

     

       57
       57
       +
           

     

       58
       58
       +
           (* Built-in button components *)

     

       59
       59
       +
           btn_primary ~size:`Lg [txt "Get Started"];

     

       60
       60
       +
         ]

     

       57
       61
        
       ```

     

       58
       62
        
       

     

       59
       59
       -
       ### With Htmlit Integration

     

       63
       63
       +
       ### CSS Grid Layouts

     

       60
       64
        
       

     

       61
       65
        
       ```ocaml

     

       62
       62
       -
       open Htmlit

     

       63
       63
       -
       open Tailwind

     

       66
       66
       +
       (* Three-column responsive grid *)

     

       67
       67
       +
       div ~styles:[

     

       68
       68
       +
         grid;

     

       69
       69
       +
         grid_cols 3;

     

       70
       70
       +
         gap (rem 1.5);

     

       71
       71
       +
       ] [

     

       72
       72
       +
         card [h3 [txt "Feature 1"]; p [txt "Description"]];

     

       73
       73
       +
         card [h3 [txt "Feature 2"]; p [txt "Description"]];

     

       74
       74
       +
         card [h3 [txt "Feature 3"]; p [txt "Description"]];

     

       75
       75
       +
       ]

     

       76
       76
       +
       ```

     

       64
       77
        
       

     

       65
       65
       -
       let classes_attr tailwind_classes = 

     

       66
       66
       -
         At.class' (Tailwind.to_string tailwind_classes)

     

       78
       78
       +
       ### Built-in Components

     

       67
       79
        
       

     

       68
       68
       -
       let create_card title content =

     

       69
       69
       -
         El.div ~at:[classes_attr (tw [

     

       70
       70
       -
           Patterns.card;

     

       71
       71
       -
           Spacing.(to_class (p (Size.rem 1.5)));

     

       72
       72
       -
           Effects.shadow_md;

     

       73
       73
       -
         ])] [

     

       74
       74
       -
           El.h2 ~at:[classes_attr (tw [

     

       75
       75
       -
             Typography.(to_class (font_size `Xl));

     

       76
       76
       -
             Typography.(to_class (font_weight `Bold));

     

       77
       77
       -
             Spacing.(to_class (mb (Size.rem 1.0)));

     

       78
       78
       -
           ])] [El.txt title];

     

       79
       79
       -
           El.p [El.txt content];

     

       80
       80
       -
         ]

     

       80
       80
       +
       ```ocaml

     

       81
       81
       +
       (* Pre-styled components with size variants *)

     

       82
       82
       +
       btn_primary ~size:`Lg [txt "Primary Action"];

     

       83
       83
       +
       btn_secondary [txt "Secondary Action"];

     

       84
       84
       +
       btn_outline ~size:`Sm [txt "Outline Button"];

     

       85
       85
       +
       

     

       86
       86
       +
       (* Layout helpers *)

     

       87
       87
       +
       container [

     

       88
       88
       +
         card [

     

       89
       89
       +
           h2 ~styles:[font_size `Xl; margin_bottom (rem 1.0)] [txt "Card Title"];

     

       90
       90
       +
           p ~styles:[text_color (gray 600)] [txt "Card content with automatic styling"];

     

       91
       91
       +
         ];

     

       92
       92
       +
       ]

     

       81
       93
        
       ```

     

       82
       94
        
       

     

       83
       95
        
       ## Examples

     

       84
       96
        
       

     

       85
       85
       -
       The `examples/` directory contains several demonstration files:

     

       97
       97
       +
       The `examples/` directory showcases the GADT interface across various use cases:

     

       86
       98
        
       

     

       87
       87
       -
       ### Running Examples

     

       99
       99
       +
       ### Available Examples

     

       88
       100
        
       

     

       89
       101
        
       ```bash

     

       90
       102
        
       # Build all examples

     

       91
       103
        
       dune build examples/

     

       92
       104
        
       

     

       93
       93
       -
       # Run comprehensive showcase (generates HTML + CSS)

     

       94
       94
       -
       dune exec examples/comprehensive_showcase.exe

     

       105
       105
       +
       # Hello World with GADT interface

     

       106
       106
       +
       dune exec examples/hello_tailwind_01.exe > hello.html

     

       107
       107
       +
       

     

       108
       108
       +
       # Colors and Typography showcase

     

       109
       109
       +
       dune exec examples/colors_and_typography_02.exe > colors.html

     

       110
       110
       +
       

     

       111
       111
       +
       # CSS Grid and Layout demonstrations

     

       112
       112
       +
       dune exec examples/layout_and_spacing_03.exe > layout.html

     

       95
       113
        
       

     

       96
       96
       -
       # Run basic usage example

     

       97
       97
       -
       dune exec examples/basic_usage.exe

     

       114
       114
       +
       # Responsive design patterns  

     

       115
       115
       +
       dune exec examples/responsive_design_04.exe > responsive.html

     

       98
       116
        
       

     

       99
       99
       -
       # Run HTML integration example  

     

       100
       100
       -
       dune exec examples/tailwind_html_example.exe

     

       117
       117
       +
       # Visual effects and styling

     

       118
       118
       +
       dune exec examples/effects_and_variants_05.exe > effects.html

     

       119
       119
       +
       

     

       120
       120
       +
       # Component patterns and reusable elements

     

       121
       121
       +
       dune exec examples/patterns_and_components_06.exe > patterns.html

     

       122
       122
       +
       

     

       123
       123
       +
       # Complete application showcase

     

       124
       124
       +
       dune exec examples/comprehensive_showcase_07.exe > showcase.html

     

       125
       125
       +
       

     

       126
       126
       +
       # Button component demonstration

     

       127
       127
       +
       dune exec examples/button_demo.exe > buttons.html

     

       128
       128
       +
       

     

       129
       129
       +
       # Generate index page linking all examples

     

       130
       130
       +
       dune exec examples/index_html_generator.exe > index.html

     

       101
       131
        
       ```

     

       102
       132
        
       

     

       103
       103
       -
       ### Comprehensive Showcase

     

       133
       133
       +
       ### Example Highlights

     

       134
       134
       +
       

     

       135
       135
       +
       **CSS Grid Layout (`layout_and_spacing_03.ml`)**:

     

       136
       136
       +
       ```ocaml

     

       137
       137
       +
       (* Three-column grid with gap variations *)

     

       138
       138
       +
       div ~styles:[

     

       139
       139
       +
         grid;

     

       140
       140
       +
         grid_cols 3;

     

       141
       141
       +
         gap (rem 1.0);

     

       142
       142
       +
       ] [

     

       143
       143
       +
         div ~styles:[bg_color (blue 100); padding (rem 1.0)] [txt "Item 1"];

     

       144
       144
       +
         div ~styles:[bg_color (green 100); padding (rem 1.0)] [txt "Item 2"];

     

       145
       145
       +
         div ~styles:[bg_color (purple 100); padding (rem 1.0)] [txt "Item 3"];

     

       146
       146
       +
       ]

     

       104
       147
        
       

     

       105
       105
       -
       The comprehensive showcase demonstrates all library features and generates:

     

       106
       106
       -
       - `showcase.html` - Complete HTML page with all Tailwind classes

     

       107
       107
       -
       - `input.css` - Tailwind v4 CSS with custom theme extensions

     

       148
       148
       +
       (* Asymmetric grid gaps *)

     

       149
       149
       +
       div ~styles:[

     

       150
       150
       +
         grid;

     

       151
       151
       +
         grid_cols 2;

     

       152
       152
       +
         gap_x (rem 2.0);

     

       153
       153
       +
         gap_y (rem 0.5);

     

       154
       154
       +
       ] (List.init 4 (fun i ->

     

       155
       155
       +
         div ~styles:[bg_color (purple 200); text_center] [

     

       156
       156
       +
           txt (Printf.sprintf "Box %d" (i + 1))

     

       157
       157
       +
         ]

     

       158
       158
       +
       ))

     

       159
       159
       +
       ```

     

       108
       160
        
       

     

       109
       109
       -
       ```bash

     

       110
       110
       -
       dune exec examples/comprehensive_showcase.exe

     

       111
       111
       -
       # Then open showcase.html in your browser

     

       161
       161
       +
       **Built-in Components (`button_demo.ml`)**:

     

       162
       162
       +
       ```ocaml

     

       163
       163
       +
       (* Size variants with consistent styling *)

     

       164
       164
       +
       div ~styles:[flex; flex_col; gap (rem 1.0)] [

     

       165
       165
       +
         btn_primary ~size:`Sm [txt "Small Primary"];

     

       166
       166
       +
         btn_primary [txt "Default Primary"];

     

       167
       167
       +
         btn_primary ~size:`Lg [txt "Large Primary"];

     

       168
       168
       +
         btn_secondary [txt "Secondary Button"];

     

       169
       169
       +
         btn_outline [txt "Outline Button"];

     

       170
       170
       +
       ]

     

       171
       171
       +
       ```

     

       172
       172
       +
       

     

       173
       173
       +
       **Responsive Cards (`comprehensive_showcase_07.ml`)**:

     

       174
       174
       +
       ```ocaml

     

       175
       175
       +
       section ~styles:[margin_bottom (rem 4.0)] [

     

       176
       176
       +
         h3 ~styles:[font_size `Xl2; text_center; margin_bottom (rem 3.0)] [

     

       177
       177
       +
           txt "Features"

     

       178
       178
       +
         ];

     

       179
       179
       +
         

     

       180
       180
       +
         div ~styles:[grid; grid_cols 1; gap (rem 2.0)] [

     

       181
       181
       +
           card [

     

       182
       182
       +
             h4 ~styles:[font_size `Xl; font_weight `Semibold; text_color (blue 600)] [

     

       183
       183
       +
               txt "🎯 Type Safety"

     

       184
       184
       +
             ];

     

       185
       185
       +
             p ~styles:[text_color (gray 600)] [

     

       186
       186
       +
               txt "Catch styling errors at compile time with GADT-based type checking."

     

       187
       187
       +
             ];

     

       188
       188
       +
           ];

     

       189
       189
       +
           card [

     

       190
       190
       +
             h4 ~styles:[font_size `Xl; font_weight `Semibold; text_color (green 600)] [

     

       191
       191
       +
               txt "⚡ Performance" 

     

       192
       192
       +
             ];

     

       193
       193
       +
             p ~styles:[text_color (gray 600)] [

     

       194
       194
       +
               txt "Zero runtime overhead with compile-time CSS generation."

     

       195
       195
       +
             ];

     

       196
       196
       +
           ];

     

       197
       197
       +
         ];

     

       198
       198
       +
       ]

     

       112
       199
        
       ```

     

       113
       200
        
       

     

       114
       201
        
       ## Tailwind v4 Support

     
···

       131
       218
        
       npx tailwindcss@next -i input.css -o output.css

     

       132
       219
        
       ```

     

       133
       220
        
       

     

       134
       134
       -
       ## Module Documentation

     

       221
       221
       +
       ## API Reference

     

       135
       222
        
       

     

       136
       136
       -
       ### Core Modules

     

       223
       223
       +
       ### `Tailwind_html` (GADT Interface)

     

       137
       224
        
       

     

       138
       138
       -
       #### `Tailwind`

     

       139
       139
       -
       Main module that exports all utilities and provides the `tw` function for composing classes.

     

       225
       225
       +
       The high-level GADT interface provides succinct, type-safe styling with heterogeneous lists:

     

       140
       226
        
       

     

       141
       141
       -
       #### `Color`

     

       142
       142
       -
       Type-safe color system with variants:

     

       227
       227
       +
       #### Layout Properties

     

       143
       228
        
       ```ocaml

     

       144
       144
       -
       Color.bg (Color.make `Blue ~variant:`V600 ())

     

       145
       145
       -
       Color.text Color.white

     

       146
       146
       -
       Color.border (Color.make `Gray ~variant:`V200 ())

     

       229
       229
       +
       ~styles:[

     

       230
       230
       +
         (* Display *)

     

       231
       231
       +
         grid | flex | block | inline | hidden;

     

       232
       232
       +
         

     

       233
       233
       +
         (* Grid System *)

     

       234
       234
       +
         grid_cols 3 | grid_rows 2;

     

       235
       235
       +
         gap (rem 1.0) | gap_x (rem 1.5) | gap_y (rem 0.5);

     

       236
       236
       +
         

     

       237
       237
       +
         (* Flexbox *)

     

       238
       238
       +
         flex_col | flex_row;

     

       239
       239
       +
         justify_center | justify_between | justify_end;

     

       240
       240
       +
         items_center | items_start | items_end;

     

       241
       241
       +
         

     

       242
       242
       +
         (* Sizing *)

     

       243
       243
       +
         width full | height screen;

     

       244
       244
       +
         min_height screen | max_width (rem 64.0);

     

       245
       245
       +
       ]

     

       147
       246
        
       ```

     

       148
       247
        
       

     

       149
       149
       -
       #### `Typography`

     

       150
       150
       -
       Font utilities:

     

       248
       248
       +
       #### Typography Properties

     

       151
       249
        
       ```ocaml

     

       152
       152
       -
       Typography.(to_class (font_size `Xl2))

     

       153
       153
       -
       Typography.(to_class (font_weight `Bold))

     

       154
       154
       -
       Typography.(to_class (line_height `Relaxed))

     

       250
       250
       +
       ~styles:[

     

       251
       251
       +
         (* Font Sizes *)

     

       252
       252
       +
         font_size `Xs | font_size `Sm | font_size `Base | font_size `Lg;

     

       253
       253
       +
         font_size `Xl | font_size `Xl2 | font_size `Xl3;

     

       254
       254
       +
         

     

       255
       255
       +
         (* Font Weights *)

     

       256
       256
       +
         font_weight `Light | font_weight `Normal | font_weight `Medium;

     

       257
       257
       +
         font_weight `Semibold | font_weight `Bold;

     

       258
       258
       +
         

     

       259
       259
       +
         (* Text Styling *)

     

       260
       260
       +
         text_center | text_left | text_right;

     

       261
       261
       +
         text_color (blue 600) | text_color (gray 500);

     

       262
       262
       +
       ]

     

       155
       263
        
       ```

     

       156
       264
        
       

     

       157
       157
       -
       #### `Spacing`

     

       158
       158
       -
       Margin and padding utilities:

     

       265
       265
       +
       #### Color System

     

       159
       266
        
       ```ocaml

     

       160
       160
       -
       Spacing.(to_class (p (Size.rem 1.0)))    (* padding *)

     

       161
       161
       -
       Spacing.(to_class (mx Size.auto))        (* margin-x auto *)

     

       162
       162
       -
       Spacing.(to_class (gap `All (Size.px 16.0))) (* gap *)

     

       267
       267
       +
       ~styles:[

     

       268
       268
       +
         (* Background Colors *)

     

       269
       269
       +
         bg_color (blue 50) | bg_color (gray 100) | bg_color (red 500);

     

       270
       270
       +
         bg_color (Tailwind.Color.white) | bg_color (green 600);

     

       271
       271
       +
         

     

       272
       272
       +
         (* Text Colors *)

     

       273
       273
       +
         text_color (gray 800) | text_color (blue 600) | text_color (red 500);

     

       274
       274
       +
         

     

       275
       275
       +
         (* Border Colors *)

     

       276
       276
       +
         border_color (gray 200) | border_color (blue 300);

     

       277
       277
       +
       ]

     

       163
       278
        
       ```

     

       164
       279
        
       

     

       165
       165
       -
       #### `Layout`

     

       166
       166
       -
       Layout utilities:

     

       280
       280
       +
       #### Spacing Properties

     

       167
       281
        
       ```ocaml

     

       168
       168
       -
       Layout.(to_class (width (Size.percent 100.0)))

     

       169
       169
       -
       Layout.(to_class (height Size.screen))

     

       170
       170
       -
       Layout.(to_class (max_width (Size.rem 64.0)))

     

       282
       282
       +
       ~styles:[

     

       283
       283
       +
         (* Padding *)

     

       284
       284
       +
         padding (rem 1.0) | padding_x (rem 1.5) | padding_y (rem 2.0);

     

       285
       285
       +
         

     

       286
       286
       +
         (* Margin *)

     

       287
       287
       +
         margin (rem 1.0) | margin_x auto | margin_bottom (rem 2.0);

     

       288
       288
       +
         margin_top (rem 1.5) | margin_left (rem 0.5);

     

       289
       289
       +
       ]

     

       171
       290
        
       ```

     

       172
       291
        
       

     

       173
       173
       -
       #### `Flexbox`

     

       174
       174
       -
       Flexbox utilities:

     

       292
       292
       +
       #### Visual Effects

     

       175
       293
        
       ```ocaml

     

       176
       176
       -
       Display.flex

     

       177
       177
       -
       Flexbox.(to_class (justify `Between))

     

       178
       178
       -
       Flexbox.(to_class (align_items `Center))

     

       179
       179
       -
       Flexbox.(to_class (direction `Col))

     

       294
       294
       +
       ~styles:[

     

       295
       295
       +
         (* Shadows *)

     

       296
       296
       +
         shadow `Sm | shadow `Md | shadow `Lg | shadow `Xl;

     

       297
       297
       +
         

     

       298
       298
       +
         (* Borders *)

     

       299
       299
       +
         border | rounded `Sm | rounded `Md | rounded `Lg | rounded `Full;

     

       300
       300
       +
         

     

       301
       301
       +
         (* Transitions *)

     

       302
       302
       +
         transition;

     

       303
       303
       +
       ]

     

       180
       304
        
       ```

     

       181
       305
        
       

     

       182
       182
       -
       #### `Grid`

     

       183
       183
       -
       CSS Grid utilities:

     

       306
       306
       +
       #### Built-in Components

     

       184
       307
        
       ```ocaml

     

       185
       185
       -
       Display.grid

     

       186
       186
       -
       Grid.(to_class (template_cols (`Cols 3)))

     

       187
       187
       -
       Grid.(to_class (gap (Size.rem 1.0)))

     

       188
       188
       -
       ```

     

       308
       308
       +
       (* Button Components *)

     

       309
       309
       +
       btn_primary ~size:`Lg [txt "Primary Button"];

     

       310
       310
       +
       btn_secondary ~size:`Sm [txt "Secondary Button"];  

     

       311
       311
       +
       btn_outline [txt "Outline Button"];

     

       312
       312
       +
       

     

       313
       313
       +
       (* Layout Components *)

     

       314
       314
       +
       container [content];     (* Max-width container with auto margins *)

     

       315
       315
       +
       card [content];         (* Pre-styled card with padding and shadow *)

     

       189
       316
        
       

     

       190
       190
       -
       #### `Effects`

     

       191
       191
       -
       Visual effects:

     

       192
       192
       -
       ```ocaml

     

       193
       193
       -
       Effects.shadow_lg

     

       194
       194
       -
       Effects.rounded_md

     

       195
       195
       -
       Effects.border

     

       196
       196
       -
       Effects.transition `All

     

       317
       317
       +
       (* HTML Elements with Styling *)

     

       318
       318
       +
       h1 ~styles:[font_size `Xl3; font_weight `Bold] [txt "Heading"];

     

       319
       319
       +
       p ~styles:[text_color (gray 600); margin_bottom (rem 1.0)] [txt "Paragraph"];

     

       320
       320
       +
       div ~styles:[grid; grid_cols 2; gap (rem 1.0)] [content];

     

       321
       321
       +
       section ~styles:[margin_bottom (rem 2.0)] [content];

     

       197
       322
        
       ```

     

       198
       323
        
       

     

       199
       199
       -
       #### `Responsive`

     

       200
       200
       -
       Responsive utilities:

     

       201
       201
       -
       ```ocaml

     

       202
       202
       -
       Responsive.(to_class (at_breakpoint `Md Display.flex))

     

       203
       203
       -
       Responsive.(to_class (at_breakpoint `Lg (Grid.(to_class (template_cols (`Cols 4))))))

     

       204
       204
       -
       ```

     

       324
       324
       +
       ### Low-Level `Tailwind` Module

     

       205
       325
        
       

     

       206
       206
       -
       #### `Variants`

     

       207
       207
       -
       State variants:

     

       208
       208
       -
       ```ocaml

     

       209
       209
       -
       Variants.hover (Color.bg (Color.make `Blue ~variant:`V700 ()))

     

       210
       210
       -
       Variants.focus Effects.ring

     

       211
       211
       -
       ```

     

       326
       326
       +
       For advanced use cases, the core `Tailwind` module provides detailed control:

     

       212
       327
        
       

     

       213
       213
       -
       #### `Patterns`

     

       214
       214
       -
       Common layout patterns:

     

       215
       328
        
       ```ocaml

     

       216
       216
       -
       Patterns.container ()

     

       217
       217
       -
       Patterns.card

     

       218
       218
       -
       Patterns.flex_center

     

       219
       219
       -
       Patterns.stack ~gap:(Size.rem 1.0) ()

     

       220
       220
       -
       Patterns.sticky_header

     

       329
       329
       +
       open Tailwind

     

       330
       330
       +
       

     

       331
       331
       +
       let classes = Css.tw [

     

       332
       332
       +
         Display.grid;

     

       333
       333
       +
         Grid.(to_class (template_cols (`Cols 3)));

     

       334
       334
       +
         Spacing.(to_class (gap `All (Size.rem 1.0)));

     

       335
       335
       +
         Color.bg (Color.make `Blue ~variant:`V50 ());

     

       336
       336
       +
       ]

     

       337
       337
       +
       

     

       338
       338
       +
       let html_class = to_string classes  (* "grid grid-cols-3 gap-4 bg-blue-50" *)

     

       221
       339
        
       ```

     

       222
       340
        
       

     

       223
       223
       -
       ### HTML Components (`tailwind-html`)

     

       341
       341
       +
       ### Getting Started

     

       224
       342
        
       

     

       225
       225
       -
       Pre-built components using Htmlit:

     

       343
       343
       +
       Add to your `dune-project`:

     

       344
       344
       +
       ```dune

     

       345
       345
       +
       (package

     

       346
       346
       +
        (name myproject)

     

       347
       347
       +
        (depends

     

       348
       348
       +
         ocaml

     

       349
       349
       +
         dune

     

       350
       350
       +
         tailwind

     

       351
       351
       +
         tailwind-html

     

       352
       352
       +
         htmlit))

     

       353
       353
       +
       ```

     

       226
       354
        
       

     

       355
       355
       +
       Then in your OCaml code:

     

       227
       356
        
       ```ocaml

     

       357
       357
       +
       open Htmlit

     

       228
       358
        
       open Tailwind_html

     

       229
       359
        
       

     

       230
       230
       -
       (* Button component *)

     

       231
       231
       -
       Button.primary ~text:"Click me" ~onclick:"handleClick()"

     

       232
       232
       -
       

     

       233
       233
       -
       (* Card component *)

     

       234
       234
       -
       Card.simple ~title:"Card Title" ~content:"Card content here"

     

       235
       235
       -
       

     

       236
       236
       -
       (* Layout components *)

     

       237
       237
       -
       Layout.container [

     

       238
       238
       -
         Layout.row [

     

       239
       239
       -
           Layout.col ~span:6 [content];

     

       240
       240
       -
           Layout.col ~span:6 [content];

     

       241
       241
       -
         ]

     

       360
       360
       +
       let my_page = El.html [

     

       361
       361
       +
         El.head [El.title [txt "My App"]];

     

       362
       362
       +
         El.body ~at:[classes_attr [min_height screen; bg_color (gray 50)]] [

     

       363
       363
       +
           container [

     

       364
       364
       +
             h1 ~styles:[font_size `Xl3; text_center; margin_bottom (rem 2.0)] [

     

       365
       365
       +
               txt "Welcome to Type-Safe CSS!"

     

       366
       366
       +
             ];

     

       367
       367
       +
             btn_primary [txt "Get Started"];

     

       368
       368
       +
           ];

     

       369
       369
       +
         ];

     

       242
       370
        
       ]

     

       243
       371
        
       ```

     

       244
       372

+7 -15

dune-project

···

       1
       1
       -
       (lang dune 3.0)

     

       1
       1
       +
       (lang dune 3.18)

     

       2
       2
        
       

     

       3
       3
        
       (name tailwind)

     

       4
       4
        
       

     

       5
       5
        
       (generate_opam_files true)

     

       6
       6
        
       

     

       7
       7
       -
       (source

     

       8
       8
       -
        (github yourusername/tailwind-ocaml))

     

       7
       7
       +
       (authors "Anil Madhavapeddy")

     

       9
       8
        
       

     

       10
       10
       -
       (authors "Your Name")

     

       11
       11
       -
       

     

       12
       12
       -
       (maintainers "Your Name")

     

       13
       13
       -
       

     

       14
       14
       -
       (license MIT)

     

       9
       9
       +
       (maintainers "Anil Madhavapeddy")

     

       15
       10
        
       

     

       16
       16
       -
       (documentation https://yourusername.github.io/tailwind-ocaml/)

     

       11
       11
       +
       (license ISC)

     

       17
       12
        
       

     

       18
       13
        
       (package

     

       19
       14
        
        (name tailwind)

     

       20
       15
        
        (synopsis "Type-safe Tailwind CSS generation for OCaml")

     

       21
       21
       -
        (description "A comprehensive OCaml library for generating Tailwind CSS classes with full type safety")

     

       16
       16
       +
        (description "Library for generating Tailwind CSS classes")

     

       22
       17
        
        (depends

     

       23
       18
        
         ocaml

     

       24
       24
       -
         (dune (>= 3.0))

     

       25
       19
        
         (alcotest :with-test)

     

       26
       20
        
         (qcheck :with-test)

     

       27
       21
        
         (odoc :with-doc)))

     
···

       29
       23
        
       (package

     

       30
       24
        
        (name tailwind-html)

     

       31
       25
        
        (synopsis "Tailwind CSS integration with Htmlit")

     

       32
       32
       -
        (description "High-level component library using Tailwind CSS with Htmlit")

     

       33
       33
       -
        (allow_empty)

     

       26
       26
       +
        (description "Html combinators for Tailwind CSS")

     

       34
       27
        
        (depends

     

       35
       28
        
         ocaml

     

       36
       36
       -
         (dune (>= 3.0))

     

       37
       29
        
         tailwind

     

       38
       30
        
         (htmlit (>= 0.1.0))

     

       39
       31
        
         (alcotest :with-test)

     

       40
       32
        
         (qcheck :with-test)

     

       41
       41
       -
         (odoc :with-doc)))
     

       33
       33
       +
         (odoc :with-doc)))

+71 -98

examples/button_demo.ml

···

       1
       1
       -
       (* Button Demo - Showcasing new button combinators *)

     

       1
       1
       +
       (* Button Demo - Showcasing GADT-based button interface *)

     

       2
       2
        
       

     

       3
       3
        
       open Htmlit

     

       4
       4
        
       open Tailwind_html

     
···

       11
       11
        
             El.title [txt "Button Demo"];

     

       12
       12
        
             El.link ~at:[At.rel "stylesheet"; At.href "button_demo.css"] ();

     

       13
       13
        
           ];

     

       14
       14
       -
           El.body ~at:[classes_attr (Tailwind.Css.tw [

     

       15
       15
       -
             Tailwind.Layout.(to_class (min_height screen));

     

       16
       16
       -
             Tailwind.Color.bg (gray 50);

     

       17
       17
       -
             Tailwind.Spacing.(to_class (p (rem 2.0)));

     

       18
       18
       -
           ])] [

     

       14
       14
       +
           El.body ~at:[classes_attr [

     

       15
       15
       +
             min_height screen;

     

       16
       16
       +
             bg_color (gray 50);

     

       17
       17
       +
             padding (rem 2.0);

     

       18
       18
       +
           ]] [

     

       19
       19
        
             container [

     

       20
       20
       -
               h1 ~size:`Xl3 ~weight:`Bold ~color:(gray 800) ~align:`Center ~mb:(rem 2.0) [

     

       21
       21
       -
                 txt "Button Combinator Demo"

     

       22
       22
       -
               ];

     

       20
       20
       +
               h1 ~styles:[

     

       21
       21
       +
                 font_size `Xl3;

     

       22
       22
       +
                 font_weight `Bold;

     

       23
       23
       +
                 text_color (gray 800);

     

       24
       24
       +
                 text_center;

     

       25
       25
       +
                 margin_bottom (rem 2.0);

     

       26
       26
       +
               ] [txt "Button Component Demo"];

     

       23
       27
        
               

     

       24
       24
       -
               p_styled ~size:`Lg ~color:(gray 600) ~align:`Center ~mb:(rem 3.0) [

     

       25
       25
       -
                 txt "Showcasing succinct button creation with the new Tailwind_html API"

     

       26
       26
       -
               ];

     

       28
       28
       +
               p ~styles:[

     

       29
       29
       +
                 font_size `Lg;

     

       30
       30
       +
                 text_color (gray 600);

     

       31
       31
       +
                 text_center;

     

       32
       32
       +
                 margin_bottom (rem 3.0);

     

       33
       33
       +
               ] [txt "Showcase of built-in button components using GADT interface"];

     

       27
       34
        
       

     

       28
       28
       -
               (* Button examples section *)

     

       29
       29
       -
               div ~classes:(Tailwind.Css.tw [

     

       30
       30
       -
                 Tailwind.Spacing.(to_class (gap `All (rem 2.0)));

     

       31
       31
       -
                 flex;

     

       32
       32
       -
                 Tailwind.Flexbox.(to_class (direction `Col));

     

       33
       33
       -
               ]) [

     

       34
       34
       -
                 (* Primary buttons *)

     

       35
       35
       -
                 card [

     

       36
       36
       -
                   h2 ~size:`Xl ~weight:`Semibold ~color:(gray 700) ~mb:(rem 1.5) [

     

       37
       37
       -
                     txt "Primary Buttons"

     

       38
       38
       -
                   ];

     

       39
       39
       -
                   div ~classes:(Tailwind.Css.tw [

     

       40
       40
       -
                     flex;

     

       41
       41
       -
                     Tailwind.Flexbox.(to_class (wrap `Wrap));

     

       42
       42
       -
                     Tailwind.Spacing.(to_class (gap `All (rem 1.0)));

     

       43
       43
       -
                   ]) [

     

       44
       44
       -
                     btn_primary ~size:`Sm [txt "Small Primary"];

     

       45
       45
       -
                     btn_primary [txt "Default Primary"];

     

       46
       46
       -
                     btn_primary ~size:`Lg [txt "Large Primary"];

     

       47
       47
       -
                     btn_primary ~disabled:true [txt "Disabled Primary"];

     

       48
       48
       -
                   ];

     

       35
       35
       +
               (* Primary buttons section *)

     

       36
       36
       +
               card [

     

       37
       37
       +
                 h2 ~styles:[

     

       38
       38
       +
                   font_size `Xl;

     

       39
       39
       +
                   font_weight `Semibold;

     

       40
       40
       +
                   text_color (gray 700);

     

       41
       41
       +
                   margin_bottom (rem 1.5);

     

       42
       42
       +
                 ] [txt "Primary Buttons"];

     

       43
       43
       +
                 

     

       44
       44
       +
                 div ~styles:[

     

       45
       45
       +
                   flex;

     

       46
       46
       +
                   flex_col;

     

       47
       47
       +
                   margin_bottom (rem 1.0);

     

       48
       48
       +
                 ] [

     

       49
       49
       +
                   btn_primary ~size:`Sm [txt "Small Primary"];

     

       50
       50
       +
                   btn_primary [txt "Default Primary"];

     

       51
       51
       +
                   btn_primary ~size:`Lg [txt "Large Primary"];

     

       49
       52
        
                 ];

     

       53
       53
       +
               ];

     

       50
       54
        
       

     

       51
       51
       -
                 (* Secondary buttons *)

     

       52
       52
       -
                 card [

     

       53
       53
       -
                   h2 ~size:`Xl ~weight:`Semibold ~color:(gray 700) ~mb:(rem 1.5) [

     

       54
       54
       -
                     txt "Secondary Buttons"

     

       55
       55
       -
                   ];

     

       56
       56
       -
                   div ~classes:(Tailwind.Css.tw [

     

       57
       57
       -
                     flex;

     

       58
       58
       -
                     Tailwind.Flexbox.(to_class (wrap `Wrap));

     

       59
       59
       -
                     Tailwind.Spacing.(to_class (gap `All (rem 1.0)));

     

       60
       60
       -
                   ]) [

     

       61
       61
       -
                     btn_secondary ~size:`Sm [txt "Small Secondary"];

     

       62
       62
       -
                     btn_secondary [txt "Default Secondary"];

     

       63
       63
       -
                     btn_secondary ~size:`Lg [txt "Large Secondary"];

     

       64
       64
       -
                     btn_secondary ~disabled:true [txt "Disabled Secondary"];

     

       65
       65
       -
                   ];

     

       55
       55
       +
               (* Secondary buttons section *)

     

       56
       56
       +
               card [

     

       57
       57
       +
                 h2 ~styles:[

     

       58
       58
       +
                   font_size `Xl;

     

       59
       59
       +
                   font_weight `Semibold;

     

       60
       60
       +
                   text_color (gray 700);

     

       61
       61
       +
                   margin_bottom (rem 1.5);

     

       62
       62
       +
                 ] [txt "Secondary Buttons"];

     

       63
       63
       +
                 

     

       64
       64
       +
                 div ~styles:[

     

       65
       65
       +
                   flex;

     

       66
       66
       +
                   flex_col;

     

       67
       67
       +
                   margin_bottom (rem 1.0);

     

       68
       68
       +
                 ] [

     

       69
       69
       +
                   btn_secondary ~size:`Sm [txt "Small Secondary"];

     

       70
       70
       +
                   btn_secondary [txt "Default Secondary"];

     

       71
       71
       +
                   btn_secondary ~size:`Lg [txt "Large Secondary"];

     

       66
       72
        
                 ];

     

       73
       73
       +
               ];

     

       67
       74
        
       

     

       68
       68
       -
                 (* Comparison section *)

     

       69
       69
       -
                 card [

     

       70
       70
       -
                   h2 ~size:`Xl ~weight:`Semibold ~color:(gray 700) ~mb:(rem 1.5) [

     

       71
       71
       -
                     txt "Before vs After"

     

       72
       72
       -
                   ];

     

       73
       73
       -
                   div ~classes:(Tailwind.Css.tw [

     

       74
       74
       -
                     Tailwind.Display.grid;

     

       75
       75
       -
                     Tailwind.Grid.(to_class (template_cols (`Cols 1)));

     

       76
       76
       -
                     Tailwind.Responsive.(to_class (at_breakpoint `Md (Tailwind.Grid.(to_class (template_cols (`Cols 2))))));

     

       77
       77
       -
                     Tailwind.Spacing.(to_class (gap `All (rem 2.0)));

     

       78
       78
       -
                   ]) [

     

       79
       79
       -
                     div [

     

       80
       80
       -
                       h2 ~size:`Lg ~weight:`Medium ~color:(red 600) ~mb:(rem 1.0) [

     

       81
       81
       -
                         txt "❌ Old Verbose Way"

     

       82
       82
       -
                       ];

     

       83
       83
       -
                       El.pre ~at:[classes_attr (Tailwind.Css.tw [

     

       84
       84
       -
                         Tailwind.Color.bg (gray 100);

     

       85
       85
       -
                         Tailwind.Spacing.(to_class (p (rem 1.0)));

     

       86
       86
       -
                         Tailwind.Effects.rounded_md;

     

       87
       87
       -
                         Tailwind.Typography.(to_class (font_size `Sm));

     

       88
       88
       -
                         Tailwind.Layout.(to_class (overflow `X `Auto));

     

       89
       89
       -
                       ])] [

     

       90
       90
       -
                         El.code [txt {|let btn_classes = Css.tw [

     

       91
       91
       -
         Color.bg (Color.make `Blue ~variant:`V600 ());

     

       92
       92
       -
         Color.text Color.white;

     

       93
       93
       -
         Spacing.(to_class (px (Size.rem 1.0)));

     

       94
       94
       -
         Spacing.(to_class (py (Size.rem 0.5)));

     

       95
       95
       -
         Effects.rounded_md;

     

       96
       96
       -
         Typography.(to_class (font_weight `Medium));

     

       97
       97
       -
       ] in

     

       98
       98
       -
       El.button ~at:[classes_attr btn_classes] [

     

       99
       99
       -
         El.txt "Click me!"

     

       100
       100
       -
       ]|}];

     

       101
       101
       -
                       ];

     

       102
       102
       -
                     ];

     

       103
       103
       -
                     div [

     

       104
       104
       -
                       h2 ~size:`Lg ~weight:`Medium ~color:(green 600) ~mb:(rem 1.0) [

     

       105
       105
       -
                         txt "✅ New Succinct Way"

     

       106
       106
       -
                       ];

     

       107
       107
       -
                       El.pre ~at:[classes_attr (Tailwind.Css.tw [

     

       108
       108
       -
                         Tailwind.Color.bg (gray 100);

     

       109
       109
       -
                         Tailwind.Spacing.(to_class (p (rem 1.0)));

     

       110
       110
       -
                         Tailwind.Effects.rounded_md;

     

       111
       111
       -
                         Tailwind.Typography.(to_class (font_size `Sm));

     

       112
       112
       -
                         Tailwind.Layout.(to_class (overflow `X `Auto));

     

       113
       113
       -
                       ])] [

     

       114
       114
       -
                         El.code [txt {|btn_primary [txt "Click me!"]|}];

     

       115
       115
       -
                       ];

     

       116
       116
       -
                     ];

     

       117
       117
       -
                   ];

     

       75
       75
       +
               (* Outline buttons section *)

     

       76
       76
       +
               card [

     

       77
       77
       +
                 h2 ~styles:[

     

       78
       78
       +
                   font_size `Xl;

     

       79
       79
       +
                   font_weight `Semibold;

     

       80
       80
       +
                   text_color (gray 700);

     

       81
       81
       +
                   margin_bottom (rem 1.5);

     

       82
       82
       +
                 ] [txt "Outline Buttons"];

     

       83
       83
       +
                 

     

       84
       84
       +
                 div ~styles:[

     

       85
       85
       +
                   flex;

     

       86
       86
       +
                   flex_col;

     

       87
       87
       +
                 ] [

     

       88
       88
       +
                   btn_outline ~size:`Sm [txt "Small Outline"];

     

       89
       89
       +
                   btn_outline [txt "Default Outline"];

     

       90
       90
       +
                   btn_outline ~size:`Lg [txt "Large Outline"];

     

       118
       91
        
                 ];

     

       119
       92
        
               ];

     

       120
       93
        
             ];

+73 -174

examples/colors_and_typography_02.ml

···

       1
       1
       -
       (* Example 02: Colors and Typography - Exploring the Type System *)

     

       1
       1
       +
       (* Example 02: Colors and Typography - GADT interface showcase *)

     

       2
       2
        
       

     

       3
       3
        
       open Htmlit

     

       4
       4
       -
       open Tailwind

     

       5
       5
       -
       

     

       6
       6
       -
       let classes_attr tailwind_classes = 

     

       7
       7
       -
         At.class' (Tailwind.to_string tailwind_classes)

     

       4
       4
       +
       open Tailwind_html

     

       8
       5
        
       

     

       9
       6
        
       let create_color_demo () =

     

       10
       10
       -
         (* Color variants demonstration *)

     

       11
       11
       -
         let color_examples = [

     

       12
       12
       -
           ("Blue 400", Color.make `Blue ~variant:`V400 ());

     

       13
       13
       -
           ("Blue 600", Color.make `Blue ~variant:`V600 ());

     

       14
       14
       -
           ("Green 500", Color.make `Green ~variant:`V500 ());

     

       15
       15
       -
           ("Red 500", Color.make `Red ~variant:`V500 ());

     

       16
       16
       -
           ("Purple 600", Color.make `Purple ~variant:`V600 ());

     

       17
       17
       -
           ("Gray 700", Color.make `Gray ~variant:`V700 ());

     

       18
       18
       -
         ] in

     

       19
       19
       -
         

     

       20
       20
       -
         let typography_examples = [

     

       21
       21
       -
           ("Extra Small", Typography.(to_class (font_size `Xs)));

     

       22
       22
       -
           ("Small", Typography.(to_class (font_size `Sm)));

     

       23
       23
       -
           ("Base", Typography.(to_class (font_size `Base)));

     

       24
       24
       -
           ("Large", Typography.(to_class (font_size `Lg)));

     

       25
       25
       -
           ("Extra Large", Typography.(to_class (font_size `Xl)));

     

       26
       26
       -
           ("2X Large", Typography.(to_class (font_size `Xl2)));

     

       27
       27
       -
         ] in

     

       28
       28
       -
         

     

       29
       29
       -
         (* Create HTML demonstration *)

     

       30
       30
       -
         let html_doc = El.html [

     

       7
       7
       +
         let html = El.html [

     

       31
       8
        
           El.head [

     

       32
       9
        
             El.meta ~at:[At.charset "utf-8"] ();

     

       33
       10
        
             El.meta ~at:[At.name "viewport"; At.content "width=device-width, initial-scale=1"] ();

     

       34
       34
       -
             El.title [El.txt "Colors and Typography"];

     

       11
       11
       +
             El.title [txt "Colors and Typography"];

     

       35
       12
        
             El.link ~at:[At.rel "stylesheet"; At.href "colors_and_typography_02.css"] ();

     

       36
       13
        
           ];

     

       37
       37
       -
           El.body ~at:[At.class' "min-h-screen bg-gray-50 p-8"] [

     

       38
       38
       -
             El.div ~at:[At.class' "max-w-4xl mx-auto"] [

     

       39
       39
       -
               El.h1 ~at:[classes_attr (Css.tw [

     

       40
       40
       -
                 Typography.(to_class (font_size `Xl2));

     

       41
       41
       -
                 Typography.(to_class (font_weight `Bold));

     

       42
       42
       -
                 Color.text (Color.make `Gray ~variant:`V800 ());

     

       43
       43
       -
               ]); At.class' "mb-8 text-center"] [El.txt "Colors and Typography Demo"];

     

       14
       14
       +
           El.body ~at:[classes_attr [

     

       15
       15
       +
             min_height screen;

     

       16
       16
       +
             bg_color (gray 50);

     

       17
       17
       +
             padding (rem 2.0);

     

       18
       18
       +
           ]] [

     

       19
       19
       +
             container [

     

       20
       20
       +
               h1 ~styles:[

     

       21
       21
       +
                 font_size `Xl2;

     

       22
       22
       +
                 font_weight `Bold;

     

       23
       23
       +
                 text_color (gray 800);

     

       24
       24
       +
                 text_center;

     

       25
       25
       +
                 margin_bottom (rem 2.0);

     

       26
       26
       +
               ] [txt "Colors and Typography Demo"];

     

       44
       27
        
               

     

       45
       45
       -
               El.p ~at:[classes_attr (Css.tw [

     

       46
       46
       -
                 Typography.(to_class (font_size `Lg));

     

       47
       47
       -
                 Color.text (Color.make `Gray ~variant:`V600 ());

     

       48
       48
       -
               ]); At.class' "text-center mb-12"] [

     

       49
       49
       -
                 El.txt "Explore the type-safe color system and typography utilities in Tailwind OCaml."

     

       50
       50
       -
               ];

     

       28
       28
       +
               p ~styles:[

     

       29
       29
       +
                 font_size `Lg;

     

       30
       30
       +
                 text_color (gray 600);

     

       31
       31
       +
                 text_center;

     

       32
       32
       +
                 margin_bottom (rem 3.0);

     

       33
       33
       +
               ] [txt "Explore type-safe colors and typography with the GADT interface"];

     

       51
       34
        
               

     

       52
       52
       -
               (* Color Palette Section *)

     

       53
       53
       -
               El.section ~at:[At.class' "mb-12"] [

     

       54
       54
       -
                 El.h2 ~at:[classes_attr (Css.tw [

     

       55
       55
       -
                   Typography.(to_class (font_size `Xl));

     

       56
       56
       -
                   Typography.(to_class (font_weight `Semibold));

     

       57
       57
       -
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       58
       58
       -
                 ]); At.class' "mb-8"] [El.txt "Color Palette"];

     

       35
       35
       +
               (* Color demonstrations *)

     

       36
       36
       +
               section ~styles:[margin_bottom (rem 3.0)] [

     

       37
       37
       +
                 h2 ~styles:[

     

       38
       38
       +
                   font_size `Xl;

     

       39
       39
       +
                   font_weight `Semibold;

     

       40
       40
       +
                   text_color (gray 700);

     

       41
       41
       +
                   margin_bottom (rem 2.0);

     

       42
       42
       +
                 ] [txt "Color Palette"];

     

       59
       43
        
                 

     

       60
       60
       -
                 El.div ~at:[classes_attr (Css.tw [

     

       61
       61
       -
                   Display.grid;

     

       62
       62
       -
                   Grid.(to_class (template_cols (`Cols 1)));

     

       63
       63
       -
                   Responsive.(to_class (at_breakpoint `Md (Grid.(to_class (template_cols (`Cols 2))))));

     

       64
       64
       -
                   Responsive.(to_class (at_breakpoint `Lg (Grid.(to_class (template_cols (`Cols 3))))));

     

       65
       65
       -
                   Spacing.(to_class (gap `All (Size.rem 1.5)));

     

       66
       66
       -
                 ])] (List.map (fun (name, color) ->

     

       67
       67
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       68
       68
       -
                     Color.bg Color.white;

     

       69
       69
       -
                     Spacing.(to_class (p (Size.rem 1.5)));

     

       70
       70
       -
                     Effects.rounded_lg;

     

       71
       71
       -
                     Effects.shadow_sm;

     

       72
       72
       -
                   ]); At.class' "text-center"] [

     

       73
       73
       -
                     El.div ~at:[classes_attr (Css.tw [

     

       74
       74
       -
                       Color.text color;

     

       75
       75
       -
                       Typography.(to_class (font_size `Xl2));

     

       76
       76
       -
                       Typography.(to_class (font_weight `Bold));

     

       77
       77
       -
                     ]); At.class' "mb-4"] [El.txt "Aa"];

     

       78
       78
       -
                     El.h3 ~at:[classes_attr (Css.tw [

     

       79
       79
       -
                       Typography.(to_class (font_size `Lg));

     

       80
       80
       -
                       Typography.(to_class (font_weight `Semibold));

     

       81
       81
       -
                       Color.text (Color.make `Gray ~variant:`V800 ());

     

       82
       82
       -
                     ]); At.class' "mb-2"] [El.txt name];

     

       83
       83
       -
                     El.p ~at:[classes_attr (Css.tw [

     

       84
       84
       -
                       Typography.(to_class (font_size `Sm));

     

       85
       85
       -
                       Color.text (Color.make `Gray ~variant:`V500 ());

     

       86
       86
       -
                     ]); At.class' "mb-3"] [El.txt (to_string (Css.tw [Color.text color]))];

     

       87
       87
       -
                     El.p ~at:[classes_attr (Css.tw [Color.text color])] [

     

       88
       88
       -
                       El.txt "The quick brown fox jumps over the lazy dog"

     

       89
       89
       -
                     ];

     

       90
       90
       -
                   ]

     

       91
       91
       -
                 ) color_examples);

     

       44
       44
       +
                 (* Using CSS Grid for color cards *)

     

       45
       45
       +
                 div ~styles:[

     

       46
       46
       +
                   grid;

     

       47
       47
       +
                   grid_cols 2;

     

       48
       48
       +
                   gap (rem 1.0);

     

       49
       49
       +
                 ] [

     

       50
       50
       +
                   card [

     

       51
       51
       +
                     p ~styles:[text_color (blue 600); font_size `Lg] 

     

       52
       52
       +
                       [txt "Blue 600 - Primary color"];

     

       53
       53
       +
                   ];

     

       54
       54
       +
                   card [

     

       55
       55
       +
                     p ~styles:[text_color (green 500); font_size `Lg] 

     

       56
       56
       +
                       [txt "Green 500 - Success color"];

     

       57
       57
       +
                   ];

     

       58
       58
       +
                   card [

     

       59
       59
       +
                     p ~styles:[text_color (red 500); font_size `Lg] 

     

       60
       60
       +
                       [txt "Red 500 - Error color"];

     

       61
       61
       +
                   ];

     

       62
       62
       +
                   card [

     

       63
       63
       +
                     p ~styles:[text_color (purple 600); font_size `Lg] 

     

       64
       64
       +
                       [txt "Purple 600 - Accent color"];

     

       65
       65
       +
                   ];

     

       66
       66
       +
                 ];

     

       92
       67
        
               ];

     

       93
       68
        
               

     

       94
       94
       -
               (* Typography Scale Section *)

     

       95
       95
       -
               El.section ~at:[At.class' "mb-12"] [

     

       96
       96
       -
                 El.h2 ~at:[classes_attr (Css.tw [

     

       97
       97
       -
                   Typography.(to_class (font_size `Xl));

     

       98
       98
       -
                   Typography.(to_class (font_weight `Semibold));

     

       99
       99
       -
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       100
       100
       -
                 ]); At.class' "mb-8"] [El.txt "Typography Scale"];

     

       69
       69
       +
               (* Typography scale *)

     

       70
       70
       +
               section [

     

       71
       71
       +
                 h2 ~styles:[

     

       72
       72
       +
                   font_size `Xl;

     

       73
       73
       +
                   font_weight `Semibold;

     

       74
       74
       +
                   text_color (gray 700);

     

       75
       75
       +
                   margin_bottom (rem 2.0);

     

       76
       76
       +
                 ] [txt "Typography Scale"];

     

       101
       77
        
                 

     

       102
       102
       -
                 El.div ~at:[classes_attr (Css.tw [

     

       103
       103
       -
                   Color.bg Color.white;

     

       104
       104
       -
                   Spacing.(to_class (p (Size.rem 2.0)));

     

       105
       105
       -
                   Effects.rounded_lg;

     

       106
       106
       -
                   Effects.shadow_sm;

     

       107
       107
       -
                 ]); At.class' "mb-8"] (List.map (fun (name, typ_class) ->

     

       108
       108
       -
                   El.div ~at:[At.class' "mb-6 last:mb-0"] [

     

       109
       109
       -
                     El.div ~at:[classes_attr (Css.tw [

     

       110
       110
       -
                       Display.flex;

     

       111
       111
       -
                       Flexbox.(to_class (align_items `Center));

     

       112
       112
       -
                       Flexbox.(to_class (justify `Between));

     

       113
       113
       -
                       Spacing.(to_class (gap `All (Size.rem 1.0)));

     

       114
       114
       -
                     ]); At.class' "mb-2"] [

     

       115
       115
       -
                       El.span ~at:[classes_attr (Css.tw [

     

       116
       116
       -
                         Typography.(to_class (font_size `Sm));

     

       117
       117
       -
                         Typography.(to_class (font_weight `Medium));

     

       118
       118
       -
                         Color.text (Color.make `Gray ~variant:`V500 ());

     

       119
       119
       -
                       ])] [El.txt name];

     

       120
       120
       -
                       El.code ~at:[classes_attr (Css.tw [

     

       121
       121
       -
                         Typography.(to_class (font_size `Xs));

     

       122
       122
       -
                         Color.bg (Color.make `Gray ~variant:`V100 ());

     

       123
       123
       -
                         Spacing.(to_class (px (Size.rem 0.5)));

     

       124
       124
       -
                         Spacing.(to_class (py (Size.rem 0.25)));

     

       125
       125
       -
                         Effects.rounded_sm;

     

       126
       126
       -
                       ])] [El.txt (to_string (Css.tw [typ_class]))];

     

       127
       127
       -
                     ];

     

       128
       128
       -
                     El.p ~at:[classes_attr (Css.tw [typ_class])] [

     

       129
       129
       -
                       El.txt "The quick brown fox jumps over the lazy dog"

     

       130
       130
       -
                     ];

     

       131
       131
       -
                   ]

     

       132
       132
       -
                 ) typography_examples);

     

       133
       133
       -
               ];

     

       134
       134
       -
               

     

       135
       135
       -
               (* Font Weights Section *)

     

       136
       136
       -
               El.section [

     

       137
       137
       -
                 El.h2 ~at:[classes_attr (Css.tw [

     

       138
       138
       -
                   Typography.(to_class (font_size `Xl));

     

       139
       139
       -
                   Typography.(to_class (font_weight `Semibold));

     

       140
       140
       -
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       141
       141
       -
                 ]); At.class' "mb-8"] [El.txt "Font Weights"];

     

       142
       142
       -
                 

     

       143
       143
       -
                 let weight_examples = [

     

       144
       144
       -
                   ("Light", Typography.(to_class (font_weight `Light)));

     

       145
       145
       -
                   ("Normal", Typography.(to_class (font_weight `Normal)));

     

       146
       146
       -
                   ("Medium", Typography.(to_class (font_weight `Medium)));

     

       147
       147
       -
                   ("Semibold", Typography.(to_class (font_weight `Semibold)));

     

       148
       148
       -
                   ("Bold", Typography.(to_class (font_weight `Bold)));

     

       149
       149
       -
                   ("Extrabold", Typography.(to_class (font_weight `Extrabold)));

     

       150
       150
       -
                 ] in

     

       151
       151
       -
                 

     

       152
       152
       -
                 El.div ~at:[classes_attr (Css.tw [

     

       153
       153
       -
                   Color.bg Color.white;

     

       154
       154
       -
                   Spacing.(to_class (p (Size.rem 2.0)));

     

       155
       155
       -
                   Effects.rounded_lg;

     

       156
       156
       -
                   Effects.shadow_sm;

     

       157
       157
       -
                 ])] (List.map (fun (name, weight_class) ->

     

       158
       158
       -
                   El.div ~at:[At.class' "mb-6 last:mb-0"] [

     

       159
       159
       -
                     El.div ~at:[classes_attr (Css.tw [

     

       160
       160
       -
                       Display.flex;

     

       161
       161
       -
                       Flexbox.(to_class (align_items `Center));

     

       162
       162
       -
                       Flexbox.(to_class (justify `Between));

     

       163
       163
       -
                       Spacing.(to_class (gap `All (Size.rem 1.0)));

     

       164
       164
       -
                     ]); At.class' "mb-2"] [

     

       165
       165
       -
                       El.span ~at:[classes_attr (Css.tw [

     

       166
       166
       -
                         Typography.(to_class (font_size `Sm));

     

       167
       167
       -
                         Typography.(to_class (font_weight `Medium));

     

       168
       168
       -
                         Color.text (Color.make `Gray ~variant:`V500 ());

     

       169
       169
       -
                       ])] [El.txt name];

     

       170
       170
       -
                       El.code ~at:[classes_attr (Css.tw [

     

       171
       171
       -
                         Typography.(to_class (font_size `Xs));

     

       172
       172
       -
                         Color.bg (Color.make `Gray ~variant:`V100 ());

     

       173
       173
       -
                         Spacing.(to_class (px (Size.rem 0.5)));

     

       174
       174
       -
                         Spacing.(to_class (py (Size.rem 0.25)));

     

       175
       175
       -
                         Effects.rounded_sm;

     

       176
       176
       -
                       ])] [El.txt (to_string (Css.tw [weight_class]))];

     

       177
       177
       -
                     ];

     

       178
       178
       -
                     El.p ~at:[classes_attr (Css.tw [

     

       179
       179
       -
                       weight_class;

     

       180
       180
       -
                       Typography.(to_class (font_size `Lg));

     

       181
       181
       -
                     ])] [

     

       182
       182
       -
                       El.txt "The quick brown fox jumps over the lazy dog"

     

       183
       183
       -
                     ];

     

       184
       184
       -
                   ]

     

       185
       185
       -
                 ) weight_examples);

     

       78
       78
       +
                 card [

     

       79
       79
       +
                   p ~styles:[font_size `Xs; margin_bottom (rem 1.0)] [txt "Extra Small (xs) - Supporting text"];

     

       80
       80
       +
                   p ~styles:[font_size `Sm; margin_bottom (rem 1.0)] [txt "Small (sm) - Caption text"];

     

       81
       81
       +
                   p ~styles:[font_size `Base; margin_bottom (rem 1.0)] [txt "Base - Body text"];

     

       82
       82
       +
                   p ~styles:[font_size `Lg; margin_bottom (rem 1.0)] [txt "Large (lg) - Lead text"];

     

       83
       83
       +
                   p ~styles:[font_size `Xl; margin_bottom (rem 1.0)] [txt "Extra Large (xl) - Heading"];

     

       84
       84
       +
                   p ~styles:[font_size `Xl2] [txt "2XL - Large heading"];

     

       85
       85
       +
                 ];

     

       186
       86
        
               ];

     

       187
       87
        
             ];

     

       188
       88
        
           ];

     

       189
       89
        
         ] in

     

       190
       190
       -
         html_doc

     

       90
       90
       +
         html

     

       191
       91
        
       

     

       192
       92
        
       let () =

     

       193
       193
       -
         (* Output HTML to stdout *)

     

       194
       194
       -
         let html_doc = create_color_demo () in

     

       195
       195
       -
         print_string (El.to_string ~doctype:true html_doc)
     

       93
       93
       +
         let html = create_color_demo () in

     

       94
       94
       +
         print_string (El.to_string ~doctype:true html)

+189 -203

examples/comprehensive_showcase_07.ml

···

       1
       1
       -
       (* Example 07: Comprehensive Showcase - Full Application Demo *)

     

       1
       1
       +
       (* Example 07: Comprehensive Showcase - Full application demo with GADT *)

     

       2
       2
        
       

     

       3
       3
        
       open Htmlit

     

       4
       4
       -
       open Tailwind

     

       4
       4
       +
       open Tailwind_html

     

       5
       5
        
       

     

       6
       6
       -
       let classes_attr tailwind_classes = 

     

       7
       7
       -
         At.class' (Tailwind.to_string tailwind_classes)

     

       8
       8
       -
       

     

       9
       9
       -
       let create_comprehensive_html_page () =

     

       10
       10
       -
         (* Document structure with all features demonstrated *)

     

       11
       11
       -
         let html_doc = El.html [

     

       6
       6
       +
       let create_showcase () =

     

       7
       7
       +
         let html = El.html [

     

       12
       8
        
           El.head [

     

       13
       9
        
             El.meta ~at:[At.charset "utf-8"] ();

     

       14
       10
        
             El.meta ~at:[At.name "viewport"; At.content "width=device-width, initial-scale=1"] ();

     

       15
       15
       -
             El.title [El.txt "Tailwind OCaml - Complete Feature Showcase"];

     

       11
       11
       +
             El.title [txt "Comprehensive Showcase"];

     

       16
       12
        
             El.link ~at:[At.rel "stylesheet"; At.href "comprehensive_showcase_07.css"] ();

     

       17
       13
        
           ];

     

       18
       18
       -
           

     

       19
       19
       -
           El.body ~at:[classes_attr (Tailwind.Css.tw [

     

       20
       20
       -
             Color.bg (Color.make `Gray ~variant:`V50 ());

     

       21
       21
       -
             Typography.(to_class (font_size `Base));

     

       22
       22
       -
             Typography.(to_class (line_height `Normal));

     

       23
       23
       -
           ])] [

     

       24
       24
       -
             (* Header with navigation *)

     

       25
       25
       -
             El.header ~at:[classes_attr (Tailwind.Css.tw [

     

       26
       26
       -
               Color.bg Color.white;

     

       27
       27
       -
               Effects.shadow_lg;

     

       28
       28
       -
               Effects.border;

     

       29
       29
       -
               Color.border (Color.make `Gray ~variant:`V200 ());

     

       30
       30
       -
               Patterns.sticky_header;

     

       31
       31
       -
             ])] [

     

       32
       32
       -
               El.div ~at:[classes_attr (Tailwind.Css.tw [

     

       33
       33
       -
                 Patterns.container ();

     

       34
       34
       -
                 Spacing.(to_class (px (Size.rem 1.0)));

     

       35
       35
       -
               ])] [

     

       36
       36
       -
                 El.div ~at:[classes_attr (Tailwind.Css.tw [

     

       37
       37
       -
                   Display.flex;

     

       38
       38
       -
                   Flexbox.(to_class (justify `Between));

     

       39
       39
       -
                   Flexbox.(to_class (align_items `Center));

     

       40
       40
       -
                   Layout.(to_class (height (Size.rem 4.0)));

     

       41
       41
       -
                 ])] [

     

       42
       42
       -
                   (* Brand with gradient text *)

     

       43
       43
       -
                   El.h1 ~at:[classes_attr (Tailwind.Css.tw [

     

       44
       44
       -
                     Typography.(to_class (font_size `Xl2));

     

       45
       45
       -
                     Typography.(to_class (font_weight `Bold));

     

       46
       46
       -
                     Color.text (Color.make `Blue ~variant:`V600 ());

     

       47
       47
       -
                   ])] [El.txt "Tailwind OCaml"];

     

       14
       14
       +
           El.body ~at:[classes_attr [

     

       15
       15
       +
             min_height screen;

     

       16
       16
       +
             bg_color (gray 50);

     

       17
       17
       +
           ]] [

     

       18
       18
       +
             (* Header *)

     

       19
       19
       +
             header ~styles:[

     

       20
       20
       +
               bg_color (Tailwind.Color.white);

     

       21
       21
       +
               shadow `Md;

     

       22
       22
       +
               padding (rem 1.0);

     

       23
       23
       +
             ] [

     

       24
       24
       +
               container [

     

       25
       25
       +
                 div ~styles:[

     

       26
       26
       +
                   flex;

     

       27
       27
       +
                   justify_between;

     

       28
       28
       +
                   items_center;

     

       29
       29
       +
                 ] [

     

       30
       30
       +
                   h1 ~styles:[

     

       31
       31
       +
                     font_size `Xl;

     

       32
       32
       +
                     font_weight `Bold;

     

       33
       33
       +
                     text_color (blue 600);

     

       34
       34
       +
                   ] [txt "TailwindOCaml"];

     

       48
       35
        
                   

     

       49
       49
       -
                   (* Navigation items with hover effects *)

     

       50
       50
       -
                   El.nav ~at:[classes_attr (Tailwind.Css.tw [

     

       51
       51
       -
                     Display.flex;

     

       52
       52
       -
                     Spacing.(to_class (gap `All (Size.rem 2.0)));

     

       53
       53
       -
                     Flexbox.(to_class (align_items `Center));

     

       54
       54
       -
                   ])] [

     

       55
       55
       -
                     El.a ~at:[At.href "#typography"; classes_attr (Tailwind.Css.tw [

     

       56
       56
       -
                       Color.text (Color.make `Gray ~variant:`V600 ());

     

       57
       57
       -
                       Variants.hover (Color.text (Color.make `Gray ~variant:`V900 ()));

     

       58
       58
       -
                       Effects.transition `All;

     

       59
       59
       -
                     ])] [El.txt "Typography"];

     

       60
       60
       -
                     El.a ~at:[At.href "#layout"; classes_attr (Tailwind.Css.tw [

     

       61
       61
       -
                       Color.text (Color.make `Gray ~variant:`V600 ());

     

       62
       62
       -
                       Variants.hover (Color.text (Color.make `Gray ~variant:`V900 ()));

     

       63
       63
       -
                       Effects.transition `All;

     

       64
       64
       -
                     ])] [El.txt "Layout"];

     

       65
       65
       -
                     El.a ~at:[At.href "#components"; classes_attr (Tailwind.Css.tw [

     

       66
       66
       -
                       Color.text (Color.make `Gray ~variant:`V600 ());

     

       67
       67
       -
                       Variants.hover (Color.text (Color.make `Gray ~variant:`V900 ()));

     

       68
       68
       -
                       Effects.transition `All;

     

       69
       69
       -
                     ])] [El.txt "Components"];

     

       70
       70
       -
                     

     

       71
       71
       -
                     (* CTA Button *)

     

       72
       72
       -
                     El.button ~at:[classes_attr (Tailwind.Css.tw [

     

       73
       73
       -
                       Color.bg (Color.make `Blue ~variant:`V600 ());

     

       74
       74
       -
                       Color.text Color.white;

     

       75
       75
       -
                       Spacing.(to_class (px (Size.rem 1.0)));

     

       76
       76
       -
                       Spacing.(to_class (py (Size.rem 0.5)));

     

       77
       77
       -
                       Effects.rounded_md;

     

       78
       78
       -
                       Typography.(to_class (font_size `Sm));

     

       79
       79
       -
                       Typography.(to_class (font_weight `Medium));

     

       80
       80
       -
                       Variants.hover (Color.bg (Color.make `Blue ~variant:`V700 ()));

     

       81
       81
       -
                       Effects.transition `All;

     

       82
       82
       -
                     ])] [El.txt "Get Started"];

     

       36
       36
       +
                   nav ~styles:[flex] [

     

       37
       37
       +
                     a ~styles:[

     

       38
       38
       +
                       padding_x (rem 1.0);

     

       39
       39
       +
                       text_color (gray 700);

     

       40
       40
       +
                       font_weight `Medium;

     

       41
       41
       +
                     ] ~href:"#features" [txt "Features"];

     

       42
       42
       +
                     a ~styles:[

     

       43
       43
       +
                       padding_x (rem 1.0);

     

       44
       44
       +
                       text_color (gray 700);

     

       45
       45
       +
                       font_weight `Medium;

     

       46
       46
       +
                     ] ~href:"#demo" [txt "Demo"];

     

       47
       47
       +
                     a ~styles:[

     

       48
       48
       +
                       padding_x (rem 1.0);

     

       49
       49
       +
                       text_color (gray 700);

     

       50
       50
       +
                       font_weight `Medium;

     

       51
       51
       +
                     ] ~href:"#contact" [txt "Contact"];

     

       83
       52
        
                   ];

     

       84
       53
        
                 ];

     

       85
       54
        
               ];

     

       86
       55
        
             ];

     

       87
       56
        
             

     

       88
       88
       -
             (* Main Content *)

     

       89
       89
       -
             El.main [

     

       90
       90
       -
               (* Hero Section *)

     

       91
       91
       -
               El.section ~at:[At.id "hero"; classes_attr (Tailwind.Css.tw [

     

       92
       92
       -
                 Layout.(to_class (min_height Size.screen));

     

       93
       93
       -
                 Display.flex;

     

       94
       94
       -
                 Flexbox.(to_class (align_items `Center));

     

       95
       95
       -
                 Flexbox.(to_class (justify `Center));

     

       96
       96
       -
                 Color.bg (Color.make `Gray ~variant:`V900 ());

     

       97
       97
       -
                 Color.text Color.white;

     

       98
       98
       -
               ])] [

     

       99
       99
       -
                 El.div ~at:[At.class' "text-center container px-8"] [

     

       100
       100
       -
                   El.h1 ~at:[classes_attr (Tailwind.Css.tw [

     

       101
       101
       -
                     Typography.(to_class (font_size `Xl5));

     

       102
       102
       -
                     Typography.(to_class (font_weight `Extrabold));

     

       103
       103
       -
                     Spacing.(to_class (mb (Size.rem 1.5)));

     

       104
       104
       -
                   ])] [El.txt "Type-Safe Tailwind CSS"];

     

       57
       57
       +
             (* Hero Section *)

     

       58
       58
       +
             main ~styles:[padding_y (rem 4.0)] [

     

       59
       59
       +
               container [

     

       60
       60
       +
                 div ~styles:[text_center; margin_bottom (rem 4.0)] [

     

       61
       61
       +
                   h2 ~styles:[

     

       62
       62
       +
                     font_size `Xl3;

     

       63
       63
       +
                     font_weight `Bold;

     

       64
       64
       +
                     text_color (gray 800);

     

       65
       65
       +
                     margin_bottom (rem 1.5);

     

       66
       66
       +
                   ] [txt "Type-Safe CSS with GADT Interface"];

     

       105
       67
        
                   

     

       106
       106
       -
                   El.p ~at:[classes_attr (Tailwind.Css.tw [

     

       107
       107
       -
                     Typography.(to_class (font_size `Xl));

     

       108
       108
       -
                     Color.text (Color.make `Gray ~variant:`V100 ());

     

       109
       109
       -
                     Spacing.(to_class (mb (Size.rem 2.0)));

     

       110
       110
       -
                     Typography.(to_class (line_height `Relaxed));

     

       111
       111
       -
                   ])] [El.txt "Build beautiful, responsive web interfaces with OCaml's type system and Tailwind's utility classes."];

     

       68
       68
       +
                   p ~styles:[

     

       69
       69
       +
                     font_size `Xl;

     

       70
       70
       +
                     text_color (gray 600);

     

       71
       71
       +
                     margin_bottom (rem 2.0);

     

       72
       72
       +
                   ] [txt "Build beautiful, maintainable UIs with compile-time guarantees"];

     

       112
       73
        
                   

     

       113
       113
       -
                   El.div ~at:[At.class' "flex flex-wrap gap-4 justify-center"] [

     

       114
       114
       -
                     El.button ~at:[At.class' "btn-primary"] [El.txt "🚀 Get Started"];

     

       115
       115
       -
                     El.button ~at:[At.class' "btn-ghost text-white hover:bg-white hover:text-gray-900"] [El.txt "📖 View Docs"];

     

       74
       74
       +
                   div ~styles:[flex; justify_center] [

     

       75
       75
       +
                     btn_primary ~size:`Lg [txt "Get Started"];

     

       76
       76
       +
                     btn_outline ~size:`Lg [txt "Learn More"];

     

       116
       77
        
                   ];

     

       117
       78
        
                 ];

     

       118
       118
       -
               ];

     

       119
       119
       -
               

     

       120
       120
       -
               (* Features Grid *)

     

       121
       121
       -
               El.section ~at:[At.class' "section bg-white"] [

     

       122
       122
       -
                 El.div ~at:[At.class' "container"] [

     

       123
       123
       -
                   El.h2 ~at:[At.class' "text-3xl font-bold text-center mb-12"] [El.txt "Features"];

     

       79
       79
       +
                 

     

       80
       80
       +
                 (* Features Grid *)

     

       81
       81
       +
                 section ~styles:[margin_bottom (rem 4.0)] [

     

       82
       82
       +
                   h3 ~styles:[

     

       83
       83
       +
                     font_size `Xl2;

     

       84
       84
       +
                     font_weight `Bold;

     

       85
       85
       +
                     text_color (gray 800);

     

       86
       86
       +
                     text_center;

     

       87
       87
       +
                     margin_bottom (rem 3.0);

     

       88
       88
       +
                   ] [txt "Features"];

     

       124
       89
        
                   

     

       125
       125
       -
                   El.div ~at:[At.class' "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"] [

     

       126
       126
       -
                     (* Feature cards *)

     

       127
       127
       -
                     El.div ~at:[At.class' "card p-6"] [

     

       128
       128
       -
                       El.div ~at:[At.class' "w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4"] [

     

       129
       129
       -
                         El.span ~at:[At.class' "text-2xl"] [El.txt "🎨"];

     

       130
       130
       -
                       ];

     

       131
       131
       -
                       El.h3 ~at:[At.class' "text-lg font-semibold mb-2"] [El.txt "Type-Safe Classes"];

     

       132
       132
       -
                       El.p ~at:[At.class' "text-gray-600"] [

     

       133
       133
       -
                         El.txt "Compile-time validation ensures your Tailwind classes are always correct."

     

       134
       134
       -
                       ];

     

       135
       135
       -
                     ];

     

       136
       136
       -
                     

     

       137
       137
       -
                     El.div ~at:[At.class' "card p-6"] [

     

       138
       138
       -
                       El.div ~at:[At.class' "w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4"] [

     

       139
       139
       -
                         El.span ~at:[At.class' "text-2xl"] [El.txt "⚡"];

     

       140
       140
       -
                       ];

     

       141
       141
       -
                       El.h3 ~at:[At.class' "text-lg font-semibold mb-2"] [El.txt "Fast Development"];

     

       142
       142
       -
                       El.p ~at:[At.class' "text-gray-600"] [

     

       143
       143
       -
                         El.txt "Autocomplete and type hints speed up your development workflow."

     

       90
       90
       +
                   div ~styles:[

     

       91
       91
       +
                     grid;

     

       92
       92
       +
                     grid_cols 1;

     

       93
       93
       +
                     gap (rem 2.0);

     

       94
       94
       +
                   ] [

     

       95
       95
       +
                     card [

     

       96
       96
       +
                       h4 ~styles:[

     

       97
       97
       +
                         font_size `Xl;

     

       98
       98
       +
                         font_weight `Semibold;

     

       99
       99
       +
                         text_color (blue 600);

     

       100
       100
       +
                         margin_bottom (rem 1.0);

     

       101
       101
       +
                       ] [txt "🎯 Type Safety"];

     

       102
       102
       +
                       p ~styles:[text_color (gray 600)] [

     

       103
       103
       +
                         txt "Catch styling errors at compile time with GADT-based type checking."

     

       144
       104
        
                       ];

     

       145
       105
        
                     ];

     

       146
       106
        
                     

     

       147
       147
       -
                     El.div ~at:[At.class' "card p-6"] [

     

       148
       148
       -
                       El.div ~at:[At.class' "w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4"] [

     

       149
       149
       -
                         El.span ~at:[At.class' "text-2xl"] [El.txt "🔧"];

     

       150
       150
       -
                       ];

     

       151
       151
       -
                       El.h3 ~at:[At.class' "text-lg font-semibold mb-2"] [El.txt "Modular Design"];

     

       152
       152
       -
                       El.p ~at:[At.class' "text-gray-600"] [

     

       153
       153
       -
                         El.txt "Organized modules for colors, typography, layout, and more."

     

       107
       107
       +
                     card [

     

       108
       108
       +
                       h4 ~styles:[

     

       109
       109
       +
                         font_size `Xl;

     

       110
       110
       +
                         font_weight `Semibold;

     

       111
       111
       +
                         text_color (green 600);

     

       112
       112
       +
                         margin_bottom (rem 1.0);

     

       113
       113
       +
                       ] [txt "⚡ Performance"];

     

       114
       114
       +
                       p ~styles:[text_color (gray 600)] [

     

       115
       115
       +
                         txt "Zero runtime overhead with compile-time CSS generation."

     

       154
       116
        
                       ];

     

       155
       117
        
                     ];

     

       156
       118
        
                     

     

       157
       157
       -
                     El.div ~at:[At.class' "card p-6"] [

     

       158
       158
       -
                       El.div ~at:[At.class' "w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4"] [

     

       159
       159
       -
                         El.span ~at:[At.class' "text-2xl"] [El.txt "📱"];

     

       160
       160
       -
                       ];

     

       161
       161
       -
                       El.h3 ~at:[At.class' "text-lg font-semibold mb-2"] [El.txt "Responsive Design"];

     

       162
       162
       -
                       El.p ~at:[At.class' "text-gray-600"] [

     

       163
       163
       -
                         El.txt "Built-in responsive utilities for all screen sizes."

     

       119
       119
       +
                     card [

     

       120
       120
       +
                       h4 ~styles:[

     

       121
       121
       +
                         font_size `Xl;

     

       122
       122
       +
                         font_weight `Semibold;

     

       123
       123
       +
                         text_color (purple 600);

     

       124
       124
       +
                         margin_bottom (rem 1.0);

     

       125
       125
       +
                       ] [txt "🔧 Developer Experience"];

     

       126
       126
       +
                       p ~styles:[text_color (gray 600)] [

     

       127
       127
       +
                         txt "Succinct syntax with heterogeneous lists and type inference."

     

       164
       128
        
                       ];

     

       165
       129
        
                     ];

     

       130
       130
       +
                   ];

     

       131
       131
       +
                 ];

     

       132
       132
       +
                 

     

       133
       133
       +
                 (* Demo Section *)

     

       134
       134
       +
                 section ~styles:[margin_bottom (rem 4.0)] [

     

       135
       135
       +
                   h3 ~styles:[

     

       136
       136
       +
                     font_size `Xl2;

     

       137
       137
       +
                     font_weight `Bold;

     

       138
       138
       +
                     text_color (gray 800);

     

       139
       139
       +
                     text_center;

     

       140
       140
       +
                     margin_bottom (rem 3.0);

     

       141
       141
       +
                   ] [txt "Live Demo"];

     

       142
       142
       +
                   

     

       143
       143
       +
                   card ~elevated:true [

     

       144
       144
       +
                     h4 ~styles:[

     

       145
       145
       +
                       font_size `Xl;

     

       146
       146
       +
                       font_weight `Semibold;

     

       147
       147
       +
                       text_color (gray 800);

     

       148
       148
       +
                       margin_bottom (rem 1.5);

     

       149
       149
       +
                     ] [txt "Interactive Component"];

     

       166
       150
        
                     

     

       167
       167
       -
                     El.div ~at:[At.class' "card p-6"] [

     

       168
       168
       -
                       El.div ~at:[At.class' "w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4"] [

     

       169
       169
       -
                         El.span ~at:[At.class' "text-2xl"] [El.txt "🎯"];

     

       170
       170
       -
                       ];

     

       171
       171
       -
                       El.h3 ~at:[At.class' "text-lg font-semibold mb-2"] [El.txt "Production Ready"];

     

       172
       172
       -
                       El.p ~at:[At.class' "text-gray-600"] [

     

       173
       173
       -
                         El.txt "Generate optimized CSS with Tailwind v4 CLI integration."

     

       174
       174
       -
                       ];

     

       151
       151
       +
                     div ~styles:[margin_bottom (rem 2.0)] [

     

       152
       152
       +
                       El.label ~at:[At.for' "demo-input"; classes_attr [

     

       153
       153
       +
                         block;

     

       154
       154
       +
                         font_weight `Medium;

     

       155
       155
       +
                         text_color (gray 700);

     

       156
       156
       +
                         margin_bottom (rem 0.5);

     

       157
       157
       +
                       ]] [txt "Try it out:"];

     

       158
       158
       +
                       El.input ~at:[At.type' "text"; At.id "demo-input"; At.placeholder "Type something..."; classes_attr [

     

       159
       159
       +
                         width full;

     

       160
       160
       +
                         padding (rem 0.75);

     

       161
       161
       +
                         border;

     

       162
       162
       +
                         border_color (gray 300);

     

       163
       163
       +
                         rounded `Md;

     

       164
       164
       +
                       ]] ();

     

       175
       165
        
                     ];

     

       176
       166
        
                     

     

       177
       177
       -
                     El.div ~at:[At.class' "card p-6"] [

     

       178
       178
       -
                       El.div ~at:[At.class' "w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4"] [

     

       179
       179
       -
                         El.span ~at:[At.class' "text-2xl"] [El.txt "🚀"];

     

       180
       180
       -
                       ];

     

       181
       181
       -
                       El.h3 ~at:[At.class' "text-lg font-semibold mb-2"] [El.txt "Modern Workflow"];

     

       182
       182
       -
                       El.p ~at:[At.class' "text-gray-600"] [

     

       183
       183
       -
                         El.txt "Integrates seamlessly with dune and modern OCaml tooling."

     

       184
       184
       -
                       ];

     

       167
       167
       +
                     div ~styles:[flex; justify_end] [

     

       168
       168
       +
                       btn_secondary [txt "Cancel"];

     

       169
       169
       +
                       btn_primary [txt "Submit"];

     

       185
       170
        
                     ];

     

       186
       171
        
                   ];

     

       187
       172
        
                 ];

     

       188
       188
       -
               ];

     

       189
       189
       -
               

     

       190
       190
       -
               (* Code Example Section *)

     

       191
       191
       -
               El.section ~at:[At.class' "section bg-gray-50"] [

     

       192
       192
       -
                 El.div ~at:[At.class' "container"] [

     

       193
       193
       -
                   El.h2 ~at:[At.class' "text-3xl font-bold text-center mb-12"] [El.txt "Simple & Intuitive"];

     

       173
       173
       +
                 

     

       174
       174
       +
                 (* Statistics *)

     

       175
       175
       +
                 section ~styles:[margin_bottom (rem 4.0)] [

     

       176
       176
       +
                   h3 ~styles:[

     

       177
       177
       +
                     font_size `Xl2;

     

       178
       178
       +
                     font_weight `Bold;

     

       179
       179
       +
                     text_color (gray 800);

     

       180
       180
       +
                     text_center;

     

       181
       181
       +
                     margin_bottom (rem 3.0);

     

       182
       182
       +
                   ] [txt "By the Numbers"];

     

       194
       183
        
                   

     

       195
       195
       -
                   El.div ~at:[At.class' "max-w-4xl mx-auto"] [

     

       196
       196
       -
                     El.div ~at:[At.class' "bg-gray-900 rounded-lg p-6 text-white"] [

     

       197
       197
       -
                       El.pre ~at:[At.class' "text-sm overflow-x-auto"] [

     

       198
       198
       -
                         El.code [El.txt {|open Tailwind

     

       199
       199
       -
       

     

       200
       200
       -
       let button_classes = Css.tw [

     

       201
       201
       -
         Color.bg (Color.make `Blue ~variant:`V600 ());

     

       202
       202
       -
         Color.text Color.white;

     

       203
       203
       -
         Spacing.(to_class (px (Size.rem 1.0)));

     

       204
       204
       -
         Spacing.(to_class (py (Size.rem 0.5)));

     

       205
       205
       -
         Effects.rounded_md;

     

       206
       206
       -
         Typography.(to_class (font_weight `Semibold));

     

       207
       207
       -
         Variants.hover (Color.bg (Color.make `Blue ~variant:`V700 ()));

     

       208
       208
       -
       ]

     

       209
       209
       -
       

     

       210
       210
       -
       let button = 

     

       211
       211
       -
         El.button ~at:[At.class' (to_string button_classes)] [

     

       212
       212
       -
           El.txt "Click me!"

     

       213
       213
       -
         ]|}];

     

       214
       214
       -
                       ];

     

       184
       184
       +
                   div ~styles:[flex; justify_between; text_center] [

     

       185
       185
       +
                     div [

     

       186
       186
       +
                       p ~styles:[

     

       187
       187
       +
                         font_size `Xl3;

     

       188
       188
       +
                         font_weight `Bold;

     

       189
       189
       +
                         text_color (blue 600);

     

       190
       190
       +
                       ] [txt "100%"];

     

       191
       191
       +
                       p ~styles:[text_color (gray 600)] [txt "Type Safe"];

     

       192
       192
       +
                     ];

     

       193
       193
       +
                     

     

       194
       194
       +
                     div [

     

       195
       195
       +
                       p ~styles:[

     

       196
       196
       +
                         font_size `Xl3;

     

       197
       197
       +
                         font_weight `Bold;

     

       198
       198
       +
                         text_color (green 600);

     

       199
       199
       +
                       ] [txt "0ms"];

     

       200
       200
       +
                       p ~styles:[text_color (gray 600)] [txt "Runtime Cost"];

     

       201
       201
       +
                     ];

     

       202
       202
       +
                     

     

       203
       203
       +
                     div [

     

       204
       204
       +
                       p ~styles:[

     

       205
       205
       +
                         font_size `Xl3;

     

       206
       206
       +
                         font_weight `Bold;

     

       207
       207
       +
                         text_color (purple 600);

     

       208
       208
       +
                       ] [txt "∞"];

     

       209
       209
       +
                       p ~styles:[text_color (gray 600)] [txt "Possibilities"];

     

       215
       210
        
                     ];

     

       216
       211
        
                   ];

     

       217
       212
        
                 ];

     
···

       219
       214
        
             ];

     

       220
       215
        
             

     

       221
       216
        
             (* Footer *)

     

       222
       222
       -
             El.footer ~at:[At.class' "bg-gray-800 text-white py-12"] [

     

       223
       223
       -
               El.div ~at:[At.class' "container text-center"] [

     

       224
       224
       -
                 El.p ~at:[At.class' "text-lg font-semibold mb-4"] [El.txt "Tailwind OCaml"];

     

       225
       225
       -
                 El.p ~at:[At.class' "text-gray-300 mb-6"] [

     

       226
       226
       -
                   El.txt "Type-safe Tailwind CSS for OCaml applications"

     

       217
       217
       +
             footer ~styles:[

     

       218
       218
       +
               bg_color (gray 800);

     

       219
       219
       +
               text_color (gray 200);

     

       220
       220
       +
               padding_y (rem 2.0);

     

       221
       221
       +
               text_center;

     

       222
       222
       +
             ] [

     

       223
       223
       +
               container [

     

       224
       224
       +
                 p ~styles:[margin_bottom (rem 1.0)] [

     

       225
       225
       +
                   txt "© 2024 TailwindOCaml. Built with type-safe GADT interface."

     

       227
       226
        
                 ];

     

       228
       228
       -
                 El.div ~at:[At.class' "flex flex-wrap gap-8 justify-center"] [

     

       229
       229
       -
                   El.a ~at:[At.href "#"; At.class' "text-gray-300 hover:text-white transition-colors"] [

     

       230
       230
       -
                     El.txt "Documentation"

     

       231
       231
       -
                   ];

     

       232
       232
       -
                   El.a ~at:[At.href "#"; At.class' "text-gray-300 hover:text-white transition-colors"] [

     

       233
       233
       -
                     El.txt "GitHub"

     

       234
       234
       -
                   ];

     

       235
       235
       -
                   El.a ~at:[At.href "#"; At.class' "text-gray-300 hover:text-white transition-colors"] [

     

       236
       236
       -
                     El.txt "Examples"

     

       237
       237
       -
                   ];

     

       238
       238
       -
                   El.a ~at:[At.href "#"; At.class' "text-gray-300 hover:text-white transition-colors"] [

     

       239
       239
       -
                     El.txt "Support"

     

       240
       240
       -
                   ];

     

       227
       227
       +
                 p ~styles:[font_size `Sm; text_color (gray 400)] [

     

       228
       228
       +
                   txt "Powered by OCaml, Tailwind CSS, and compile-time guarantees."

     

       241
       229
        
                 ];

     

       242
       230
        
               ];

     

       243
       231
        
             ];

     

       244
       232
        
           ];

     

       245
       233
        
         ] in

     

       246
       246
       -
         html_doc

     

       234
       234
       +
         html

     

       247
       235
        
       

     

       248
       236
        
       let () =

     

       249
       249
       -
         (* Output HTML to stdout *)

     

       250
       250
       -
         let html_doc = create_comprehensive_html_page () in

     

       251
       251
       -
         let html_string = El.to_string ~doctype:true html_doc in

     

       252
       252
       -
         print_string html_string
     

       237
       237
       +
         let html = create_showcase () in

     

       238
       238
       +
         print_string (El.to_string ~doctype:true html)

+29 -12

examples/dune

···

       1
       1
       -
       ;; Notebook-style examples - progressive learning path

     

       1
       1
       +
       ;; Examples demonstrating GADT-based Tailwind interface

     

       2
       2
        
       (executables

     

       3
       3
        
        (public_names 

     

       4
       4
        
         index

     

       5
       5
        
         hello_tailwind 

     

       6
       6
        
         colors_and_typography 

     

       7
       7
        
         layout_and_spacing 

     

       8
       8
       -
         responsive_design 

     

       9
       9
       -
         effects_and_variants 

     

       10
       10
       -
         patterns_and_components 

     

       11
       11
       -
         comprehensive_showcase)

     

       8
       8
       +
         responsive_design

     

       9
       9
       +
         effects_and_variants

     

       10
       10
       +
         patterns_and_components

     

       11
       11
       +
         comprehensive_showcase

     

       12
       12
       +
         button_demo)

     

       12
       13
        
        (names 

     

       13
       14
        
         index_00

     

       14
       15
        
         hello_tailwind_01

     
···

       17
       18
        
         responsive_design_04

     

       18
       19
        
         effects_and_variants_05

     

       19
       20
        
         patterns_and_components_06

     

       20
       20
       -
         comprehensive_showcase_07)

     

       21
       21
       +
         comprehensive_showcase_07

     

       22
       22
       +
         button_demo)

     

       21
       23
        
        (package tailwind)

     

       22
       24
        
        (libraries tailwind tailwind-html htmlit unix))

     

       23
       25
        
       

     
···

       26
       28
        
        (public_name index_html_generator)

     

       27
       29
        
        (name index_html_generator)

     

       28
       30
        
        (package tailwind)

     

       29
       29
       -
        (libraries tailwind htmlit))

     

       30
       30
       -
       

     

       31
       31
       +
        (libraries tailwind tailwind-html htmlit))

     

       31
       32
        
       

     

       32
       33
        
       ;; Generate HTML files from examples

     

       33
       34
        
       (rule

     
···

       65
       66
        
        (deps (:exe comprehensive_showcase_07.exe))

     

       66
       67
        
        (action (with-stdout-to %{target} (run %{exe}))))

     

       67
       68
        
       

     

       69
       69
       +
       (rule

     

       70
       70
       +
        (target button_demo.html)

     

       71
       71
       +
        (deps (:exe button_demo.exe))

     

       72
       72
       +
        (action (with-stdout-to %{target} (run %{exe}))))

     

       73
       73
       +
       

     

       68
       74
        
       ;; Generate CSS files using Tailwind CLI

     

       69
       75
        
       (rule

     

       70
       76
        
        (targets hello_tailwind_01.css)

     
···

       122
       128
        
        (action 

     

       123
       129
        
         (run tailwindcss --input input.css --output %{targets} --minify)))

     

       124
       130
        
       

     

       131
       131
       +
       (rule

     

       132
       132
       +
        (targets button_demo.css)

     

       133
       133
       +
        (deps 

     

       134
       134
       +
         input.css

     

       135
       135
       +
         button_demo.html)

     

       136
       136
       +
        (action 

     

       137
       137
       +
         (run tailwindcss --input input.css --output %{targets} --minify)))

     

       138
       138
       +
       

     

       125
       139
        
       ;; Generate index.html page

     

       126
       140
        
       (rule

     

       127
       141
        
        (target index.html)

     
···

       139
       153
        
         responsive_design_04.html

     

       140
       154
        
         effects_and_variants_05.html

     

       141
       155
        
         patterns_and_components_06.html

     

       142
       142
       -
         comprehensive_showcase_07.html))

     

       156
       156
       +
         comprehensive_showcase_07.html

     

       157
       157
       +
         button_demo.html))

     

       143
       158
        
       

     

       144
       159
        
       ;; Alias to build all CSS files (requires Tailwind CLI)

     

       145
       145
       -
       ;; Run: npm install -D @tailwindcss/cli

     

       146
       160
        
       (alias

     

       147
       161
        
        (name examples-css)

     

       148
       162
        
        (deps

     
···

       153
       167
        
         responsive_design_04.css

     

       154
       168
        
         effects_and_variants_05.css

     

       155
       169
        
         patterns_and_components_06.css

     

       156
       156
       -
         comprehensive_showcase_07.css))

     

       170
       170
       +
         comprehensive_showcase_07.css

     

       171
       171
       +
         button_demo.css))

     

       157
       172
        
       

     

       158
       173
        
       ;; Install generated files

     

       159
       174
        
       (install

     
···

       174
       189
        
         (patterns_and_components_06.html as examples/patterns_and_components_06.html)

     

       175
       190
        
         (patterns_and_components_06.css as examples/patterns_and_components_06.css)

     

       176
       191
        
         (comprehensive_showcase_07.html as examples/comprehensive_showcase_07.html)

     

       177
       177
       -
         (comprehensive_showcase_07.css as examples/comprehensive_showcase_07.css)))

     

       192
       192
       +
         (comprehensive_showcase_07.css as examples/comprehensive_showcase_07.css)

     

       193
       193
       +
         (button_demo.html as examples/button_demo.html)

     

       194
       194
       +
         (button_demo.css as examples/button_demo.css)))

+183 -279

examples/effects_and_variants_05.ml

···

       1
       1
       -
       (* Example 05: Effects and Variants - Interactive Elements and Visual Effects *)

     

       1
       1
       +
       (* Example 05: Effects and Variants - Visual effects with GADT *)

     

       2
       2
        
       

     

       3
       3
        
       open Htmlit

     

       4
       4
       -
       open Tailwind

     

       5
       5
       -
       

     

       6
       6
       -
       let classes_attr tailwind_classes = 

     

       7
       7
       -
         At.class' (Tailwind.to_string tailwind_classes)

     

       4
       4
       +
       open Tailwind_html

     

       8
       5
        
       

     

       9
       6
        
       let create_effects_demo () =

     

       10
       10
       -
         

     

       11
       11
       -
         (* Create comprehensive effects demonstration *)

     

       12
       12
       -
         let html_doc = El.html [

     

       7
       7
       +
         let html = El.html [

     

       13
       8
        
           El.head [

     

       14
       9
        
             El.meta ~at:[At.charset "utf-8"] ();

     

       15
       10
        
             El.meta ~at:[At.name "viewport"; At.content "width=device-width, initial-scale=1"] ();

     

       16
       16
       -
             El.title [El.txt "Effects and Variants"];

     

       11
       11
       +
             El.title [txt "Effects and Variants"];

     

       17
       12
        
             El.link ~at:[At.rel "stylesheet"; At.href "effects_and_variants_05.css"] ();

     

       18
       13
        
           ];

     

       19
       19
       -
           El.body ~at:[At.class' "min-h-screen bg-gray-50 p-8"] [

     

       20
       20
       -
             El.div ~at:[At.class' "max-w-6xl mx-auto"] [

     

       21
       21
       -
               El.h1 ~at:[classes_attr (Css.tw [

     

       22
       22
       -
                 Typography.(to_class (font_size `Xl2));

     

       23
       23
       -
                 Typography.(to_class (font_weight `Bold));

     

       24
       24
       -
                 Color.text (Color.make `Gray ~variant:`V800 ());

     

       25
       25
       -
               ]); At.class' "mb-8 text-center"] [El.txt "Effects and Variants Demo"];

     

       14
       14
       +
           El.body ~at:[classes_attr [

     

       15
       15
       +
             min_height screen;

     

       16
       16
       +
             bg_color (gray 50);

     

       17
       17
       +
             padding (rem 2.0);

     

       18
       18
       +
           ]] [

     

       19
       19
       +
             container [

     

       20
       20
       +
               h1 ~styles:[

     

       21
       21
       +
                 font_size `Xl2;

     

       22
       22
       +
                 font_weight `Bold;

     

       23
       23
       +
                 text_color (gray 800);

     

       24
       24
       +
                 text_center;

     

       25
       25
       +
                 margin_bottom (rem 2.0);

     

       26
       26
       +
               ] [txt "Effects and Variants Demo"];

     

       26
       27
        
               

     

       27
       28
        
               (* Shadow Effects *)

     

       28
       28
       -
               El.section ~at:[At.class' "mb-8"] [

     

       29
       29
       -
                 El.h2 ~at:[classes_attr (Css.tw [

     

       30
       30
       -
                   Typography.(to_class (font_size `Xl));

     

       31
       31
       -
                   Typography.(to_class (font_weight `Semibold));

     

       32
       32
       -
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       33
       33
       -
                 ]); At.class' "mb-6"] [El.txt "Shadow Effects"];

     

       29
       29
       +
               section ~styles:[margin_bottom (rem 2.0)] [

     

       30
       30
       +
                 h2 ~styles:[

     

       31
       31
       +
                   font_size `Xl;

     

       32
       32
       +
                   font_weight `Semibold;

     

       33
       33
       +
                   text_color (gray 700);

     

       34
       34
       +
                   margin_bottom (rem 1.5);

     

       35
       35
       +
                 ] [txt "Shadow Effects"];

     

       34
       36
        
                 

     

       35
       35
       -
                 El.div ~at:[classes_attr (Css.tw [

     

       36
       36
       -
                   Display.grid;

     

       37
       37
       -
                   Grid.(to_class (template_cols (`Cols 1)));

     

       38
       38
       -
                   Responsive.(to_class (at_breakpoint `Md (Grid.(to_class (template_cols (`Cols 3))))));

     

       39
       39
       -
                   Spacing.(to_class (gap `All (Size.rem 1.5)));

     

       40
       40
       -
                 ])] [

     

       41
       41
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       42
       42
       -
                     Color.bg Color.white;

     

       43
       43
       -
                     Spacing.(to_class (p (Size.rem 1.5)));

     

       44
       44
       -
                     Effects.shadow_sm;

     

       45
       45
       -
                     Effects.rounded_lg;

     

       46
       46
       -
                   ]); At.class' "text-center"] [

     

       47
       47
       -
                     El.h3 ~at:[classes_attr (Css.tw [

     

       48
       48
       -
                       Typography.(to_class (font_weight `Semibold));

     

       49
       49
       -
                       Color.text (Color.make `Gray ~variant:`V700 ());

     

       50
       50
       -
                     ]); At.class' "mb-2"] [El.txt "Small Shadow"];

     

       51
       51
       -
                     El.p ~at:[classes_attr (Css.tw [

     

       52
       52
       -
                       Typography.(to_class (font_size `Sm));

     

       53
       53
       -
                       Color.text (Color.make `Gray ~variant:`V600 ());

     

       54
       54
       -
                     ])] [El.txt "shadow-sm"];

     

       37
       37
       +
                 div ~styles:[

     

       38
       38
       +
                   grid;

     

       39
       39
       +
                   grid_cols 1;

     

       40
       40
       +
                   gap (rem 1.0);

     

       41
       41
       +
                 ] [

     

       42
       42
       +
                   div ~styles:[

     

       43
       43
       +
                     bg_color (Tailwind.Color.white);

     

       44
       44
       +
                     padding (rem 1.5);

     

       45
       45
       +
                     shadow `Sm;

     

       46
       46
       +
                     rounded `Lg;

     

       47
       47
       +
                     margin_bottom (rem 1.0);

     

       48
       48
       +
                     text_center;

     

       49
       49
       +
                   ] [

     

       50
       50
       +
                     h3 ~styles:[

     

       51
       51
       +
                       font_weight `Semibold;

     

       52
       52
       +
                       text_color (gray 700);

     

       53
       53
       +
                       margin_bottom (rem 0.5);

     

       54
       54
       +
                     ] [txt "Small Shadow"];

     

       55
       55
       +
                     p ~styles:[

     

       56
       56
       +
                       font_size `Sm;

     

       57
       57
       +
                       text_color (gray 600);

     

       58
       58
       +
                     ] [txt "shadow-sm"];

     

       55
       59
        
                   ];

     

       56
       60
        
                   

     

       57
       57
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       58
       58
       -
                     Color.bg Color.white;

     

       59
       59
       -
                     Spacing.(to_class (p (Size.rem 1.5)));

     

       60
       60
       -
                     Effects.shadow_md;

     

       61
       61
       -
                     Effects.rounded_lg;

     

       62
       62
       -
                   ]); At.class' "text-center"] [

     

       63
       63
       -
                     El.h3 ~at:[classes_attr (Css.tw [

     

       64
       64
       -
                       Typography.(to_class (font_weight `Semibold));

     

       65
       65
       -
                       Color.text (Color.make `Gray ~variant:`V700 ());

     

       66
       66
       -
                     ]); At.class' "mb-2"] [El.txt "Medium Shadow"];

     

       67
       67
       -
                     El.p ~at:[classes_attr (Css.tw [

     

       68
       68
       -
                       Typography.(to_class (font_size `Sm));

     

       69
       69
       -
                       Color.text (Color.make `Gray ~variant:`V600 ());

     

       70
       70
       -
                     ])] [El.txt "shadow-md"];

     

       61
       61
       +
                   div ~styles:[

     

       62
       62
       +
                     bg_color (Tailwind.Color.white);

     

       63
       63
       +
                     padding (rem 1.5);

     

       64
       64
       +
                     shadow `Md;

     

       65
       65
       +
                     rounded `Lg;

     

       66
       66
       +
                     margin_bottom (rem 1.0);

     

       67
       67
       +
                     text_center;

     

       68
       68
       +
                   ] [

     

       69
       69
       +
                     h3 ~styles:[

     

       70
       70
       +
                       font_weight `Semibold;

     

       71
       71
       +
                       text_color (gray 700);

     

       72
       72
       +
                       margin_bottom (rem 0.5);

     

       73
       73
       +
                     ] [txt "Medium Shadow"];

     

       74
       74
       +
                     p ~styles:[

     

       75
       75
       +
                       font_size `Sm;

     

       76
       76
       +
                       text_color (gray 600);

     

       77
       77
       +
                     ] [txt "shadow-md"];

     

       71
       78
        
                   ];

     

       72
       79
        
                   

     

       73
       73
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       74
       74
       -
                     Color.bg Color.white;

     

       75
       75
       -
                     Spacing.(to_class (p (Size.rem 1.5)));

     

       76
       76
       -
                     Effects.shadow_lg;

     

       77
       77
       -
                     Effects.rounded_lg;

     

       78
       78
       -
                   ]); At.class' "text-center"] [

     

       79
       79
       -
                     El.h3 ~at:[classes_attr (Css.tw [

     

       80
       80
       -
                       Typography.(to_class (font_weight `Semibold));

     

       81
       81
       -
                       Color.text (Color.make `Gray ~variant:`V700 ());

     

       82
       82
       -
                     ]); At.class' "mb-2"] [El.txt "Large Shadow"];

     

       83
       83
       -
                     El.p ~at:[classes_attr (Css.tw [

     

       84
       84
       -
                       Typography.(to_class (font_size `Sm));

     

       85
       85
       -
                       Color.text (Color.make `Gray ~variant:`V600 ());

     

       86
       86
       -
                     ])] [El.txt "shadow-lg"];

     

       80
       80
       +
                   div ~styles:[

     

       81
       81
       +
                     bg_color (Tailwind.Color.white);

     

       82
       82
       +
                     padding (rem 1.5);

     

       83
       83
       +
                     shadow `Lg;

     

       84
       84
       +
                     rounded `Lg;

     

       85
       85
       +
                     text_center;

     

       86
       86
       +
                   ] [

     

       87
       87
       +
                     h3 ~styles:[

     

       88
       88
       +
                       font_weight `Semibold;

     

       89
       89
       +
                       text_color (gray 700);

     

       90
       90
       +
                       margin_bottom (rem 0.5);

     

       91
       91
       +
                     ] [txt "Large Shadow"];

     

       92
       92
       +
                     p ~styles:[

     

       93
       93
       +
                       font_size `Sm;

     

       94
       94
       +
                       text_color (gray 600);

     

       95
       95
       +
                     ] [txt "shadow-lg"];

     

       87
       96
        
                   ];

     

       88
       97
        
                 ];

     

       89
       98
        
               ];

     

       90
       99
        
               

     

       91
       100
        
               (* Rounded Corners *)

     

       92
       92
       -
               El.section ~at:[At.class' "mb-8"] [

     

       93
       93
       -
                 El.h2 ~at:[classes_attr (Css.tw [

     

       94
       94
       -
                   Typography.(to_class (font_size `Xl));

     

       95
       95
       -
                   Typography.(to_class (font_weight `Semibold));

     

       96
       96
       -
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       97
       97
       -
                 ]); At.class' "mb-6"] [El.txt "Border Radius"];

     

       101
       101
       +
               section ~styles:[margin_bottom (rem 2.0)] [

     

       102
       102
       +
                 h2 ~styles:[

     

       103
       103
       +
                   font_size `Xl;

     

       104
       104
       +
                   font_weight `Semibold;

     

       105
       105
       +
                   text_color (gray 700);

     

       106
       106
       +
                   margin_bottom (rem 1.5);

     

       107
       107
       +
                 ] [txt "Border Radius"];

     

       98
       108
        
                 

     

       99
       99
       -
                 El.div ~at:[classes_attr (Css.tw [

     

       100
       100
       -
                   Display.flex;

     

       101
       101
       -
                   Flexbox.(to_class (wrap `Wrap));

     

       102
       102
       -
                   Spacing.(to_class (gap `All (Size.rem 1.0)));

     

       103
       103
       -
                   Flexbox.(to_class (justify `Center));

     

       104
       104
       -
                 ])] [

     

       105
       105
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       106
       106
       -
                     Color.bg (Color.make `Blue ~variant:`V100 ());

     

       107
       107
       -
                     Spacing.(to_class (p (Size.rem 1.0)));

     

       108
       108
       -
                     (* No rounded corners *)

     

       109
       109
       -
                   ]); At.class' "text-center"] [El.txt "No Radius"];

     

       109
       109
       +
                 div ~styles:[

     

       110
       110
       +
                   grid;

     

       111
       111
       +
                   grid_cols 2;

     

       112
       112
       +
                   gap (rem 1.0);

     

       113
       113
       +
                 ] [

     

       114
       114
       +
                   div ~styles:[

     

       115
       115
       +
                     bg_color (blue 100);

     

       116
       116
       +
                     padding (rem 1.0);

     

       117
       117
       +
                     rounded `Sm;

     

       118
       118
       +
                     text_center;

     

       119
       119
       +
                     margin_bottom (rem 1.0);

     

       120
       120
       +
                   ] [txt "Small Radius"];

     

       110
       121
        
                   

     

       111
       111
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       112
       112
       -
                     Color.bg (Color.make `Green ~variant:`V100 ());

     

       113
       113
       -
                     Spacing.(to_class (p (Size.rem 1.0)));

     

       114
       114
       -
                     Effects.rounded_sm;

     

       115
       115
       -
                   ]); At.class' "text-center"] [El.txt "Small"];

     

       122
       122
       +
                   div ~styles:[

     

       123
       123
       +
                     bg_color (green 100);

     

       124
       124
       +
                     padding (rem 1.0);

     

       125
       125
       +
                     rounded `Md;

     

       126
       126
       +
                     text_center;

     

       127
       127
       +
                     margin_bottom (rem 1.0);

     

       128
       128
       +
                   ] [txt "Medium Radius"];

     

       116
       129
        
                   

     

       117
       117
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       118
       118
       -
                     Color.bg (Color.make `Purple ~variant:`V100 ());

     

       119
       119
       -
                     Spacing.(to_class (p (Size.rem 1.0)));

     

       120
       120
       -
                     Effects.rounded_md;

     

       121
       121
       -
                   ]); At.class' "text-center"] [El.txt "Medium"];

     

       122
       122
       -
                   

     

       123
       123
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       124
       124
       -
                     Color.bg (Color.make `Red ~variant:`V100 ());

     

       125
       125
       -
                     Spacing.(to_class (p (Size.rem 1.0)));

     

       126
       126
       -
                     Effects.rounded_lg;

     

       127
       127
       -
                   ]); At.class' "text-center"] [El.txt "Large"];

     

       130
       130
       +
                   div ~styles:[

     

       131
       131
       +
                     bg_color (purple 100);

     

       132
       132
       +
                     padding (rem 1.0);

     

       133
       133
       +
                     rounded `Lg;

     

       134
       134
       +
                     text_center;

     

       135
       135
       +
                     margin_bottom (rem 1.0);

     

       136
       136
       +
                   ] [txt "Large Radius"];

     

       128
       137
        
                   

     

       129
       129
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       130
       130
       -
                     Color.bg (Color.make `Yellow ~variant:`V100 ());

     

       131
       131
       -
                     Spacing.(to_class (p (Size.rem 1.0)));

     

       132
       132
       -
                     Effects.rounded_full;

     

       133
       133
       -
                   ]); At.class' "text-center"] [El.txt "Full"];

     

       138
       138
       +
                   div ~styles:[

     

       139
       139
       +
                     bg_color (yellow 100);

     

       140
       140
       +
                     padding (rem 1.0);

     

       141
       141
       +
                     rounded `Full;

     

       142
       142
       +
                     text_center;

     

       143
       143
       +
                   ] [txt "Full Radius"];

     

       134
       144
        
                 ];

     

       135
       145
        
               ];

     

       136
       146
        
               

     

       137
       147
        
               (* Interactive Buttons *)

     

       138
       138
       -
               El.section ~at:[At.class' "mb-8"] [

     

       139
       139
       -
                 El.h2 ~at:[classes_attr (Css.tw [

     

       140
       140
       -
                   Typography.(to_class (font_size `Xl));

     

       141
       141
       -
                   Typography.(to_class (font_weight `Semibold));

     

       142
       142
       -
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       143
       143
       -
                 ]); At.class' "mb-6"] [El.txt "Interactive Buttons"];

     

       148
       148
       +
               section ~styles:[margin_bottom (rem 2.0)] [

     

       149
       149
       +
                 h2 ~styles:[

     

       150
       150
       +
                   font_size `Xl;

     

       151
       151
       +
                   font_weight `Semibold;

     

       152
       152
       +
                   text_color (gray 700);

     

       153
       153
       +
                   margin_bottom (rem 1.5);

     

       154
       154
       +
                 ] [txt "Interactive Buttons"];

     

       144
       155
        
                 

     

       145
       145
       -
                 El.div ~at:[classes_attr (Css.tw [

     

       146
       146
       -
                   Display.flex;

     

       147
       147
       -
                   Flexbox.(to_class (wrap `Wrap));

     

       148
       148
       -
                   Spacing.(to_class (gap `All (Size.rem 1.0)));

     

       149
       149
       -
                   Flexbox.(to_class (justify `Center));

     

       150
       150
       -
                 ])] [

     

       151
       151
       -
                   (* Hover color change *)

     

       152
       152
       -
                   El.button ~at:[classes_attr (Css.tw [

     

       153
       153
       -
                     Color.bg (Color.make `Blue ~variant:`V500 ());

     

       154
       154
       -
                     Color.text Color.white;

     

       155
       155
       -
                     Spacing.(to_class (px (Size.rem 1.5)));

     

       156
       156
       -
                     Spacing.(to_class (py (Size.rem 0.75)));

     

       157
       157
       -
                     Effects.rounded_md;

     

       158
       158
       -
                     Typography.(to_class (font_weight `Medium));

     

       159
       159
       -
                     Effects.transition `All;

     

       160
       160
       -
                     Variants.hover (Color.bg (Color.make `Blue ~variant:`V600 ()));

     

       161
       161
       -
                   ])] [El.txt "Hover Color"];

     

       162
       162
       -
                   

     

       163
       163
       -
                   (* Hover shadow *)

     

       164
       164
       -
                   El.button ~at:[classes_attr (Css.tw [

     

       165
       165
       -
                     Color.bg (Color.make `Green ~variant:`V500 ());

     

       166
       166
       -
                     Color.text Color.white;

     

       167
       167
       -
                     Spacing.(to_class (px (Size.rem 1.5)));

     

       168
       168
       -
                     Spacing.(to_class (py (Size.rem 0.75)));

     

       169
       169
       -
                     Effects.rounded_md;

     

       170
       170
       -
                     Typography.(to_class (font_weight `Medium));

     

       171
       171
       -
                     Effects.shadow_md;

     

       172
       172
       -
                     Effects.transition `All;

     

       173
       173
       -
                     Variants.hover Effects.shadow_lg;

     

       174
       174
       -
                   ])] [El.txt "Hover Shadow"];

     

       175
       175
       -
                   

     

       176
       176
       -
                   (* Scale effect *)

     

       177
       177
       -
                   El.button ~at:[classes_attr (Css.tw [

     

       178
       178
       -
                     Color.bg (Color.make `Purple ~variant:`V500 ());

     

       179
       179
       -
                     Color.text Color.white;

     

       180
       180
       -
                     Spacing.(to_class (px (Size.rem 1.5)));

     

       181
       181
       -
                     Spacing.(to_class (py (Size.rem 0.75)));

     

       182
       182
       -
                     Effects.rounded_md;

     

       183
       183
       -
                     Typography.(to_class (font_weight `Medium));

     

       184
       184
       -
                     Effects.transition `All;

     

       185
       185
       -
                   ]); At.class' "hover:scale-105 active:scale-95"] [El.txt "Scale Effect"];

     

       186
       186
       -
                   

     

       187
       187
       -
                   (* Focus ring *)

     

       188
       188
       -
                   El.button ~at:[classes_attr (Css.tw [

     

       189
       189
       -
                     Color.bg (Color.make `Red ~variant:`V500 ());

     

       190
       190
       -
                     Color.text Color.white;

     

       191
       191
       -
                     Spacing.(to_class (px (Size.rem 1.5)));

     

       192
       192
       -
                     Spacing.(to_class (py (Size.rem 0.75)));

     

       193
       193
       -
                     Effects.rounded_md;

     

       194
       194
       -
                     Typography.(to_class (font_weight `Medium));

     

       195
       195
       -
                     Effects.transition `All;

     

       196
       196
       -
                     Variants.focus Effects.shadow_md;

     

       197
       197
       -
                   ])] [El.txt "Focus Ring"];

     

       198
       198
       -
                 ];

     

       199
       199
       -
               ];

     

       200
       200
       -
               

     

       201
       201
       -
               (* Card Hover Effects *)

     

       202
       202
       -
               El.section ~at:[At.class' "mb-8"] [

     

       203
       203
       -
                 El.h2 ~at:[classes_attr (Css.tw [

     

       204
       204
       -
                   Typography.(to_class (font_size `Xl));

     

       205
       205
       -
                   Typography.(to_class (font_weight `Semibold));

     

       206
       206
       -
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       207
       207
       -
                 ]); At.class' "mb-6"] [El.txt "Card Hover Effects"];

     

       208
       208
       -
                 

     

       209
       209
       -
                 El.div ~at:[classes_attr (Css.tw [

     

       210
       210
       -
                   Display.grid;

     

       211
       211
       -
                   Grid.(to_class (template_cols (`Cols 1)));

     

       212
       212
       -
                   Responsive.(to_class (at_breakpoint `Md (Grid.(to_class (template_cols (`Cols 2))))));

     

       213
       213
       -
                   Spacing.(to_class (gap `All (Size.rem 1.5)));

     

       214
       214
       -
                 ])] [

     

       215
       215
       -
                   (* Hover shadow card *)

     

       216
       216
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       217
       217
       -
                     Color.bg Color.white;

     

       218
       218
       -
                     Spacing.(to_class (p (Size.rem 1.5)));

     

       219
       219
       -
                     Effects.rounded_lg;

     

       220
       220
       -
                     Effects.shadow_md;

     

       221
       221
       -
                     Effects.transition `All;

     

       222
       222
       -
                     Variants.hover Effects.shadow_lg;

     

       223
       223
       -
                   ]); At.class' "cursor-pointer"] [

     

       224
       224
       -
                     El.h3 ~at:[classes_attr (Css.tw [

     

       225
       225
       -
                       Typography.(to_class (font_size `Lg));

     

       226
       226
       -
                       Typography.(to_class (font_weight `Semibold));

     

       227
       227
       -
                       Color.text (Color.make `Gray ~variant:`V800 ());

     

       228
       228
       -
                     ]); At.class' "mb-2"] [El.txt "Shadow Lift"];

     

       229
       229
       -
                     El.p ~at:[classes_attr (Css.tw [

     

       230
       230
       -
                       Color.text (Color.make `Gray ~variant:`V600 ());

     

       231
       231
       -
                     ])] [El.txt "Hover to see the shadow increase. This creates a lifting effect."];

     

       232
       232
       -
                   ];

     

       233
       233
       -
                   

     

       234
       234
       -
                   (* Scale and shadow card *)

     

       235
       235
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       236
       236
       -
                     Color.bg Color.white;

     

       237
       237
       -
                     Spacing.(to_class (p (Size.rem 1.5)));

     

       238
       238
       -
                     Effects.rounded_lg;

     

       239
       239
       -
                     Effects.shadow_md;

     

       240
       240
       -
                     Effects.transition `All;

     

       241
       241
       -
                   ]); At.class' "cursor-pointer hover:scale-105 hover:shadow-xl"] [

     

       242
       242
       -
                     El.h3 ~at:[classes_attr (Css.tw [

     

       243
       243
       -
                       Typography.(to_class (font_size `Lg));

     

       244
       244
       -
                       Typography.(to_class (font_weight `Semibold));

     

       245
       245
       -
                       Color.text (Color.make `Gray ~variant:`V800 ());

     

       246
       246
       -
                     ]); At.class' "mb-2"] [El.txt "Scale + Shadow"];

     

       247
       247
       -
                     El.p ~at:[classes_attr (Css.tw [

     

       248
       248
       -
                       Color.text (Color.make `Gray ~variant:`V600 ());

     

       249
       249
       -
                     ])] [El.txt "This card both scales up and increases shadow on hover."];

     

       250
       250
       -
                   ];

     

       156
       156
       +
                 div ~styles:[

     

       157
       157
       +
                   grid;

     

       158
       158
       +
                   grid_cols 1;

     

       159
       159
       +
                   gap (rem 1.0);

     

       160
       160
       +
                 ] [

     

       161
       161
       +
                   btn_primary [txt "Primary Button with Hover"];

     

       162
       162
       +
                   btn_secondary [txt "Secondary Button"];

     

       163
       163
       +
                   btn_outline [txt "Outline Button"];

     

       251
       164
        
                 ];

     

       252
       165
        
               ];

     

       253
       166
        
               

     

       254
       167
        
               (* Border Effects *)

     

       255
       255
       -
               El.section [

     

       256
       256
       -
                 El.h2 ~at:[classes_attr (Css.tw [

     

       257
       257
       -
                   Typography.(to_class (font_size `Xl));

     

       258
       258
       -
                   Typography.(to_class (font_weight `Semibold));

     

       259
       259
       -
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       260
       260
       -
                 ]); At.class' "mb-6"] [El.txt "Border Effects"];

     

       168
       168
       +
               section [

     

       169
       169
       +
                 h2 ~styles:[

     

       170
       170
       +
                   font_size `Xl;

     

       171
       171
       +
                   font_weight `Semibold;

     

       172
       172
       +
                   text_color (gray 700);

     

       173
       173
       +
                   margin_bottom (rem 1.5);

     

       174
       174
       +
                 ] [txt "Border Effects"];

     

       261
       175
        
                 

     

       262
       262
       -
                 El.div ~at:[classes_attr (Css.tw [

     

       263
       263
       -
                   Display.grid;

     

       264
       264
       -
                   Grid.(to_class (template_cols (`Cols 1)));

     

       265
       265
       -
                   Responsive.(to_class (at_breakpoint `Md (Grid.(to_class (template_cols (`Cols 3))))));

     

       266
       266
       -
                   Spacing.(to_class (gap `All (Size.rem 1.5)));

     

       267
       267
       -
                 ])] [

     

       176
       176
       +
                 div ~styles:[

     

       177
       177
       +
                   grid;

     

       178
       178
       +
                   grid_cols 1;

     

       179
       179
       +
                   gap (rem 1.0);

     

       180
       180
       +
                 ] [

     

       268
       181
        
                   (* Regular border *)

     

       269
       269
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       270
       270
       -
                     Color.bg Color.white;

     

       271
       271
       -
                     Spacing.(to_class (p (Size.rem 1.5)));

     

       272
       272
       -
                     Effects.border;

     

       273
       273
       -
                     Color.border (Color.make `Gray ~variant:`V200 ());

     

       274
       274
       -
                     Effects.rounded_lg;

     

       275
       275
       -
                   ]); At.class' "text-center"] [

     

       276
       276
       -
                     El.h3 ~at:[classes_attr (Css.tw [

     

       277
       277
       -
                       Typography.(to_class (font_weight `Semibold));

     

       278
       278
       -
                       Color.text (Color.make `Gray ~variant:`V700 ());

     

       279
       279
       -
                     ]); At.class' "mb-2"] [El.txt "Regular Border"];

     

       280
       280
       -
                     El.p ~at:[classes_attr (Css.tw [

     

       281
       281
       -
                       Typography.(to_class (font_size `Sm));

     

       282
       282
       -
                       Color.text (Color.make `Gray ~variant:`V600 ());

     

       283
       283
       -
                     ])] [El.txt "border border-gray-200"];

     

       182
       182
       +
                   div ~styles:[

     

       183
       183
       +
                     bg_color (Tailwind.Color.white);

     

       184
       184
       +
                     padding (rem 1.5);

     

       185
       185
       +
                     border;

     

       186
       186
       +
                     border_color (gray 200);

     

       187
       187
       +
                     rounded `Lg;

     

       188
       188
       +
                     text_center;

     

       189
       189
       +
                     margin_bottom (rem 1.0);

     

       190
       190
       +
                   ] [

     

       191
       191
       +
                     h3 ~styles:[

     

       192
       192
       +
                       font_weight `Semibold;

     

       193
       193
       +
                       text_color (gray 700);

     

       194
       194
       +
                       margin_bottom (rem 0.5);

     

       195
       195
       +
                     ] [txt "Regular Border"];

     

       196
       196
       +
                     p ~styles:[

     

       197
       197
       +
                       font_size `Sm;

     

       198
       198
       +
                       text_color (gray 600);

     

       199
       199
       +
                     ] [txt "border border-gray-200"];

     

       284
       200
        
                   ];

     

       285
       201
        
                   

     

       286
       202
        
                   (* Colored border *)

     

       287
       287
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       288
       288
       -
                     Color.bg Color.white;

     

       289
       289
       -
                     Spacing.(to_class (p (Size.rem 1.5)));

     

       290
       290
       -
                     Effects.border;

     

       291
       291
       -
                     Color.border (Color.make `Blue ~variant:`V300 ());

     

       292
       292
       -
                     Effects.rounded_lg;

     

       293
       293
       -
                   ]); At.class' "text-center"] [

     

       294
       294
       -
                     El.h3 ~at:[classes_attr (Css.tw [

     

       295
       295
       -
                       Typography.(to_class (font_weight `Semibold));

     

       296
       296
       -
                       Color.text (Color.make `Blue ~variant:`V600 ());

     

       297
       297
       -
                     ]); At.class' "mb-2"] [El.txt "Colored Border"];

     

       298
       298
       -
                     El.p ~at:[classes_attr (Css.tw [

     

       299
       299
       -
                       Typography.(to_class (font_size `Sm));

     

       300
       300
       -
                       Color.text (Color.make `Gray ~variant:`V600 ());

     

       301
       301
       -
                     ])] [El.txt "border border-blue-300"];

     

       302
       302
       -
                   ];

     

       303
       303
       -
                   

     

       304
       304
       -
                   (* Thick border *)

     

       305
       305
       -
                   El.div ~at:[At.class' "bg-white p-6 border-2 border-purple-300 rounded-lg text-center"] [

     

       306
       306
       -
                     El.h3 ~at:[classes_attr (Css.tw [

     

       307
       307
       -
                       Typography.(to_class (font_weight `Semibold));

     

       308
       308
       -
                       Color.text (Color.make `Purple ~variant:`V600 ());

     

       309
       309
       -
                     ]); At.class' "mb-2"] [El.txt "Thick Border"];

     

       310
       310
       -
                     El.p ~at:[classes_attr (Css.tw [

     

       311
       311
       -
                       Typography.(to_class (font_size `Sm));

     

       312
       312
       -
                       Color.text (Color.make `Gray ~variant:`V600 ());

     

       313
       313
       -
                     ])] [El.txt "border-2 border-purple-300"];

     

       203
       203
       +
                   div ~styles:[

     

       204
       204
       +
                     bg_color (Tailwind.Color.white);

     

       205
       205
       +
                     padding (rem 1.5);

     

       206
       206
       +
                     border;

     

       207
       207
       +
                     border_color (blue 300);

     

       208
       208
       +
                     rounded `Lg;

     

       209
       209
       +
                     text_center;

     

       210
       210
       +
                   ] [

     

       211
       211
       +
                     h3 ~styles:[

     

       212
       212
       +
                       font_weight `Semibold;

     

       213
       213
       +
                       text_color (blue 600);

     

       214
       214
       +
                       margin_bottom (rem 0.5);

     

       215
       215
       +
                     ] [txt "Colored Border"];

     

       216
       216
       +
                     p ~styles:[

     

       217
       217
       +
                       font_size `Sm;

     

       218
       218
       +
                       text_color (gray 600);

     

       219
       219
       +
                     ] [txt "border border-blue-300"];

     

       314
       220
        
                   ];

     

       315
       221
        
                 ];

     

       316
       222
        
               ];

     

       317
       223
        
             ];

     

       318
       224
        
           ];

     

       319
       225
        
         ] in

     

       320
       320
       -
         html_doc

     

       226
       226
       +
         html

     

       321
       227
        
       

     

       322
       228
        
       let () =

     

       323
       323
       -
         (* Output HTML to stdout *)

     

       324
       324
       -
         let html_doc = create_effects_demo () in

     

       325
       325
       -
         let html_string = El.to_string ~doctype:true html_doc in

     

       326
       326
       -
         print_string html_string
     

       229
       229
       +
         let html = create_effects_demo () in

     

       230
       230
       +
         print_string (El.to_string ~doctype:true html)

-213

examples/gadt_demo.ml

···

       1
       1
       -
       (* GADT Heterogeneous List Demo - Revolutionary Tailwind interface *)

     

       2
       2
       -
       

     

       3
       3
       -
       open Htmlit

     

       4
       4
       -
       open Tailwind_html

     

       5
       5
       -
       

     

       6
       6
       -
       let create_gadt_demo () =

     

       7
       7
       -
         let html = El.html [

     

       8
       8
       -
           El.head [

     

       9
       9
       -
             El.meta ~at:[At.charset "utf-8"] ();

     

       10
       10
       -
             El.meta ~at:[At.name "viewport"; At.content "width=device-width, initial-scale=1"] ();

     

       11
       11
       -
             El.title [txt "GADT Tailwind Demo"];

     

       12
       12
       -
             El.link ~at:[At.rel "stylesheet"; At.href "gadt_demo.css"] ();

     

       13
       13
       -
           ];

     

       14
       14
       -
           

     

       15
       15
       -
           El.body ~at:[classes_attr [

     

       16
       16
       -
             bg_color (gray 50);

     

       17
       17
       -
             padding (rem 2.0);

     

       18
       18
       -
           ]] [

     

       19
       19
       -
             (* Hero Section *)

     

       20
       20
       -
             h1 ~styles:[

     

       21
       21
       -
               text_color (blue 600);

     

       22
       22
       -
               font_size `Xl4;

     

       23
       23
       -
               font_weight `Bold;

     

       24
       24
       -
               text_center;

     

       25
       25
       -
               margin_bottom (rem 2.0);

     

       26
       26
       -
             ] [txt "🚀 GADT Heterogeneous Lists for Tailwind"];

     

       27
       27
       -
             

     

       28
       28
       -
             p ~styles:[

     

       29
       29
       -
               text_color (gray 700);

     

       30
       30
       -
               font_size `Lg;

     

       31
       31
       -
               text_center;

     

       32
       32
       -
               margin_bottom (rem 3.0);

     

       33
       33
       -
             ] [txt "Type-safe, conflict-preventing, succinct Tailwind class composition"];

     

       34
       34
       -
       

     

       35
       35
       -
             (* Feature Cards Grid *)

     

       36
       36
       -
             div ~styles:[

     

       37
       37
       -
               flex;

     

       38
       38
       -
               justify_center;

     

       39
       39
       -
               margin_bottom (rem 3.0);

     

       40
       40
       -
             ] [

     

       41
       41
       -
               div ~styles:[

     

       42
       42
       -
                 bg_color (gray 50);

     

       43
       43
       -
                 rounded `Lg;

     

       44
       44
       -
                 shadow `Lg;

     

       45
       45
       -
                 padding (rem 2.0);

     

       46
       46
       -
                 text_center;

     

       47
       47
       -
               ] [

     

       48
       48
       -
                 h2 ~styles:[

     

       49
       49
       -
                   font_size `Xl2;

     

       50
       50
       -
                   font_weight `Semibold;

     

       51
       51
       -
                   text_color (gray 800);

     

       52
       52
       -
                   margin_bottom (rem 1.0);

     

       53
       53
       -
                 ] [txt "✨ Magic of GADTs"];

     

       54
       54
       -
                 

     

       55
       55
       -
                 p ~styles:[

     

       56
       56
       -
                   text_color (gray 600);

     

       57
       57
       -
                   margin_bottom (rem 1.5);

     

       58
       58
       -
                 ] [txt "Each property is type-categorized and validated at compile time"];

     

       59
       59
       -
               ];

     

       60
       60
       -
             ];

     

       61
       61
       -
       

     

       62
       62
       -
             (* Before/After Comparison *)

     

       63
       63
       -
             div ~styles:[

     

       64
       64
       -
               bg_color (Tailwind.Color.white);

     

       65
       65
       -
               rounded `Lg;

     

       66
       66
       -
               shadow `Md;

     

       67
       67
       -
               padding (rem 2.0);

     

       68
       68
       -
               margin_bottom (rem 3.0);

     

       69
       69
       -
             ] [

     

       70
       70
       -
               h2 ~styles:[

     

       71
       71
       -
                 font_size `Xl2;

     

       72
       72
       -
                 font_weight `Bold;

     

       73
       73
       -
                 text_color (gray 800);

     

       74
       74
       -
                 margin_bottom (rem 1.5);

     

       75
       75
       -
               ] [txt "🔄 Before vs After"];

     

       76
       76
       -
               

     

       77
       77
       -
               div ~styles:[

     

       78
       78
       -
                 flex;

     

       79
       79
       -
                 justify_between;

     

       80
       80
       -
               ] [

     

       81
       81
       -
                 (* Old Way *)

     

       82
       82
       -
                 div ~styles:[

     

       83
       83
       -
                   bg_color (red 50);

     

       84
       84
       -
                   rounded `Md;

     

       85
       85
       -
                   padding (rem 1.5);

     

       86
       86
       -
                   margin_right (rem 1.0);

     

       87
       87
       -
                 ] [

     

       88
       88
       -
                   h3 ~styles:[

     

       89
       89
       -
                     font_size `Lg;

     

       90
       90
       -
                     font_weight `Medium;

     

       91
       91
       -
                     text_color (red 700);

     

       92
       92
       -
                     margin_bottom (rem 1.0);

     

       93
       93
       -
                   ] [txt "❌ Old Verbose Way"];

     

       94
       94
       -
                   

     

       95
       95
       -
                   El.pre ~at:[classes_attr [

     

       96
       96
       -
                     bg_color (gray 100);

     

       97
       97
       -
                     padding (rem 1.0);

     

       98
       98
       -
                     rounded `Sm;

     

       99
       99
       -
                     font_size `Sm;

     

       100
       100
       -
                   ]] [

     

       101
       101
       -
                     El.code [txt {|Css.tw [

     

       102
       102
       -
         Color.text (Color.make `Blue ~variant:`V600 ());

     

       103
       103
       -
         Typography.(to_class (font_size `Xl2));

     

       104
       104
       -
         Typography.(to_class (font_weight `Bold));

     

       105
       105
       -
         Spacing.(to_class (mb (Size.rem 1.0)));

     

       106
       106
       -
       ]|}];

     

       107
       107
       -
                   ];

     

       108
       108
       -
                 ];

     

       109
       109
       -
                 

     

       110
       110
       -
                 (* New Way *)

     

       111
       111
       -
                 div ~styles:[

     

       112
       112
       -
                   bg_color (green 50);

     

       113
       113
       -
                   rounded `Md;

     

       114
       114
       -
                   padding (rem 1.5);

     

       115
       115
       -
                 ] [

     

       116
       116
       -
                   h3 ~styles:[

     

       117
       117
       -
                     font_size `Lg;

     

       118
       118
       -
                     font_weight `Medium;

     

       119
       119
       -
                     text_color (green 700);

     

       120
       120
       -
                     margin_bottom (rem 1.0);

     

       121
       121
       -
                   ] [txt "✅ New GADT Way"];

     

       122
       122
       -
                   

     

       123
       123
       -
                   El.pre ~at:[classes_attr [

     

       124
       124
       -
                     bg_color (gray 100);

     

       125
       125
       -
                     padding (rem 1.0);

     

       126
       126
       -
                     rounded `Sm;

     

       127
       127
       -
                     font_size `Sm;

     

       128
       128
       -
                   ]] [

     

       129
       129
       -
                     El.code [txt {|[

     

       130
       130
       -
         text_color (blue 600);

     

       131
       131
       -
         font_size `Xl2;

     

       132
       132
       -
         font_weight `Bold;

     

       133
       133
       -
         margin_bottom (rem 1.0);

     

       134
       134
       -
       ]|}];

     

       135
       135
       -
                   ];

     

       136
       136
       -
                 ];

     

       137
       137
       -
               ];

     

       138
       138
       -
             ];

     

       139
       139
       -
       

     

       140
       140
       -
             (* Interactive Example *)

     

       141
       141
       -
             div ~styles:[

     

       142
       142
       -
               bg_color (Tailwind.Color.white);

     

       143
       143
       -
               rounded `Lg;

     

       144
       144
       -
               shadow `Md;

     

       145
       145
       -
               padding (rem 2.0);

     

       146
       146
       -
               margin_bottom (rem 2.0);

     

       147
       147
       -
             ] [

     

       148
       148
       -
               h2 ~styles:[

     

       149
       149
       -
                 font_size `Xl2;

     

       150
       150
       -
                 font_weight `Bold;

     

       151
       151
       -
                 text_color (gray 800);

     

       152
       152
       -
                 margin_bottom (rem 1.5);

     

       153
       153
       -
               ] [txt "🎯 Type Safety in Action"];

     

       154
       154
       -
               

     

       155
       155
       -
               p ~styles:[

     

       156
       156
       -
                 text_color (gray 600);

     

       157
       157
       -
                 margin_bottom (rem 2.0);

     

       158
       158
       -
               ] [txt "Each property category can only appear once, preventing conflicts:"];

     

       159
       159
       -
       

     

       160
       160
       -
               (* Sample buttons with different styles *)

     

       161
       161
       -
               div ~styles:[

     

       162
       162
       -
                 flex;

     

       163
       163
       -
                 justify_between;

     

       164
       164
       -
                 margin_bottom (rem 2.0);

     

       165
       165
       -
               ] [

     

       166
       166
       -
                 button ~styles:[

     

       167
       167
       -
                   bg_color (blue 600);

     

       168
       168
       -
                   text_color (Tailwind.Color.white);

     

       169
       169
       -
                   padding (rem 1.0);

     

       170
       170
       -
                   rounded `Md;

     

       171
       171
       -
                   font_weight `Medium;

     

       172
       172
       -
                 ] [txt "Primary Button"];

     

       173
       173
       -
       

     

       174
       174
       -
                 button ~styles:[

     

       175
       175
       -
                   bg_color (green 600);

     

       176
       176
       -
                   text_color (Tailwind.Color.white);

     

       177
       177
       -
                   padding (rem 1.0);

     

       178
       178
       -
                   rounded `Md;

     

       179
       179
       -
                   font_weight `Medium;

     

       180
       180
       -
                 ] [txt "Success Button"];

     

       181
       181
       -
       

     

       182
       182
       -
                 button ~styles:[

     

       183
       183
       -
                   bg_color (red 600);

     

       184
       184
       -
                   text_color (Tailwind.Color.white);

     

       185
       185
       -
                   padding (rem 1.0);

     

       186
       186
       -
                   rounded `Md;

     

       187
       187
       -
                   font_weight `Medium;

     

       188
       188
       -
                 ] [txt "Danger Button"];

     

       189
       189
       -
               ];

     

       190
       190
       -
               

     

       191
       191
       -
               p ~styles:[

     

       192
       192
       -
                 text_color (gray 500);

     

       193
       193
       -
                 font_size `Sm;

     

       194
       194
       -
               ] [txt "Try adding two text_color entries - the compiler will prevent conflicts!"];

     

       195
       195
       -
             ];

     

       196
       196
       -
       

     

       197
       197
       -
             (* Footer *)

     

       198
       198
       -
             div ~styles:[

     

       199
       199
       -
               text_center;

     

       200
       200
       -
               padding_y (rem 2.0);

     

       201
       201
       -
             ] [

     

       202
       202
       -
               p ~styles:[

     

       203
       203
       -
                 text_color (gray 500);

     

       204
       204
       -
                 font_size `Sm;

     

       205
       205
       -
               ] [txt "🤖 Generated with revolutionary GADT-based Tailwind combinators"];

     

       206
       206
       -
             ];

     

       207
       207
       -
           ];

     

       208
       208
       -
         ] in

     

       209
       209
       -
         html

     

       210
       210
       -
       

     

       211
       211
       -
       let () =

     

       212
       212
       -
         let html = create_gadt_demo () in

     

       213
       213
       -
         print_string (El.to_string ~doctype:true html)

+145 -156

examples/index_html_generator.ml

···

       1
       1
        
       (* Generate index.html page linking to all examples *)

     

       2
       2
        
       

     

       3
       3
        
       open Htmlit

     

       4
       4
       -
       open Tailwind

     

       5
       5
       -
       

     

       6
       6
       -
       let classes_attr tailwind_classes = 

     

       7
       7
       -
         At.class' (Tailwind.to_string tailwind_classes)

     

       4
       4
       +
       open Tailwind_html

     

       8
       5
        
       

     

       9
       6
        
       let examples = [

     

       10
       7
        
         ("hello_tailwind_01.html", "01. Hello Tailwind", 

     

       11
       11
       -
          "Your first Tailwind OCaml program. Learn the basics of creating and using type-safe Tailwind classes.",

     

       12
       12
       -
          ["Basic concepts"; "Type safety"; "Class composition"]);

     

       13
       13
       -
          

     

       8
       8
       +
          "Your first Tailwind OCaml program with GADT interface",

     

       9
       9
       +
          ["Basic concepts"; "Type safety"; "GADT syntax"]);

     

       10
       10
       +
         

     

       14
       11
        
         ("colors_and_typography_02.html", "02. Colors and Typography", 

     

       15
       15
       -
          "Explore the comprehensive color system and typography utilities with compile-time validation.",

     

       16
       16
       -
          ["Color variants"; "Typography scale"; "Font weights"]);

     

       17
       17
       -
          

     

       12
       12
       +
          "Type-safe colors and typography with compile-time validation",

     

       13
       13
       +
          ["Color variants"; "Typography scale"; "Grid layouts"]);

     

       14
       14
       +
         

     

       18
       15
        
         ("layout_and_spacing_03.html", "03. Layout and Spacing", 

     

       19
       19
       -
          "Master the box model, flexbox layouts, and spacing utilities for building structured interfaces.",

     

       20
       20
       -
          ["Box model"; "Flexbox"; "Spacing system"]);

     

       21
       21
       -
          

     

       16
       16
       +
          "Master CSS Grid, flexbox layouts and spacing with GADT",

     

       17
       17
       +
          ["CSS Grid"; "Flexbox"; "Gap utilities"; "Spacing system"]);

     

       18
       18
       +
         

     

       22
       19
        
         ("responsive_design_04.html", "04. Responsive Design", 

     

       23
       23
       -
          "Learn responsive design patterns with breakpoints and mobile-first utilities.",

     

       24
       24
       -
          ["Breakpoints"; "Mobile-first"; "Responsive utilities"]);

     

       25
       25
       -
          

     

       20
       20
       +
          "Adaptive layouts using GADT interface",

     

       21
       21
       +
          ["Mobile-first"; "CSS Grid"; "Responsive cards"]);

     

       22
       22
       +
         

     

       26
       23
        
         ("effects_and_variants_05.html", "05. Effects and Variants", 

     

       27
       27
       -
          "Add visual effects and interactive states with shadows, borders, and hover variants.",

     

       28
       28
       -
          ["Visual effects"; "Interactive states"; "Hover variants"]);

     

       29
       29
       -
          

     

       24
       24
       +
          "Visual effects with shadows, borders, and rounded corners",

     

       25
       25
       +
          ["Shadow effects"; "Grid layouts"; "Interactive buttons"]);

     

       26
       26
       +
         

     

       30
       27
        
         ("patterns_and_components_06.html", "06. Patterns and Components", 

     

       31
       31
       -
          "Build reusable layout patterns and component compositions for consistent design.",

     

       32
       32
       -
          ["Layout patterns"; "Component composition"; "Reusable utilities"]);

     

       33
       33
       -
          

     

       28
       28
       +
          "Reusable component patterns with GADT",

     

       29
       29
       +
          ["Card patterns"; "Button components"; "Form patterns"]);

     

       30
       30
       +
         

     

       34
       31
        
         ("comprehensive_showcase_07.html", "07. Comprehensive Showcase", 

     

       35
       35
       -
          "Complete application demo showcasing all library features in a real-world context.",

     

       36
       36
       -
          ["Complete application"; "All features"; "Best practices"]);

     

       32
       32
       +
          "Full application demo with complete UI",

     

       33
       33
       +
          ["Header/Footer"; "Hero section"; "Feature grids"]);

     

       34
       34
       +
         

     

       35
       35
       +
         ("button_demo.html", "Button Demo", 

     

       36
       36
       +
          "Showcase of all button variants and sizes",

     

       37
       37
       +
          ["Primary buttons"; "Secondary buttons"; "Outline buttons"]);

     

       37
       38
        
       ]

     

       38
       39
        
       

     

       39
       39
       -
       let create_index_page () =

     

       40
       40
       -
         let page_classes = Css.tw [

     

       41
       41
       -
           Layout.(to_class (min_height Size.screen));

     

       42
       42
       -
           Color.bg (Color.make `Gray ~variant:`V50 ());

     

       43
       43
       -
         ] in

     

       44
       44
       -
         

     

       45
       45
       -
         let container_classes = Css.tw [

     

       46
       46
       -
           Spacing.(to_class (mx `Auto));

     

       47
       47
       -
           Spacing.(to_class (p (Size.rem 2.0)));

     

       48
       48
       -
         ] in

     

       49
       49
       -
         

     

       50
       50
       -
         let header_classes = Css.tw [

     

       51
       51
       -
           Typography.(to_class (font_size `Xl4));

     

       52
       52
       -
           Typography.(to_class (font_weight `Bold));

     

       53
       53
       -
           Color.text (Color.make `Gray ~variant:`V900 ());

     

       54
       54
       -
           Spacing.(to_class (mb (Size.rem 2.0)));

     

       55
       55
       -
           Typography.(to_class (text_align `Center));

     

       56
       56
       -
         ] in

     

       57
       57
       -
         

     

       58
       58
       -
         let subtitle_classes = Css.tw [

     

       59
       59
       -
           Typography.(to_class (font_size `Xl));

     

       60
       60
       -
           Color.text (Color.make `Gray ~variant:`V600 ());

     

       61
       61
       -
           Typography.(to_class (text_align `Center));

     

       62
       62
       -
           Spacing.(to_class (mb (Size.rem 3.0)));

     

       63
       63
       -
         ] in

     

       64
       64
       -
         

     

       65
       65
       -
         let grid_classes = Css.tw [

     

       66
       66
       -
           Display.grid;

     

       67
       67
       -
           Grid.(to_class (template_cols (`Cols 1)));

     

       68
       68
       -
           Responsive.(to_class (at_breakpoint `Md (Grid.(to_class (template_cols (`Cols 2))))));

     

       69
       69
       -
           Spacing.(to_class (gap `All (Size.rem 1.5)));

     

       70
       70
       -
           Spacing.(to_class (mb (Size.rem 3.0)));

     

       71
       71
       -
         ] in

     

       72
       72
       -
         

     

       73
       73
       -
         let card_classes = Css.tw [

     

       74
       74
       -
           Color.bg Color.white;

     

       75
       75
       -
           Effects.rounded_lg;

     

       76
       76
       -
           Effects.shadow_sm;

     

       77
       77
       -
           Spacing.(to_class (p (Size.rem 1.5)));

     

       78
       78
       -
           Effects.border;

     

       79
       79
       -
           Color.border (Color.make `Gray ~variant:`V200 ());

     

       80
       80
       -
           Effects.transition `All;

     

       81
       81
       -
           Variants.hover Effects.shadow_md;

     

       82
       82
       -
           Variants.hover (Color.border (Color.make `Blue ~variant:`V300 ()));

     

       83
       83
       -
         ] in

     

       84
       84
       -
         

     

       85
       85
       -
         let card_title_classes = Css.tw [

     

       86
       86
       -
           Typography.(to_class (font_size `Lg));

     

       87
       87
       -
           Typography.(to_class (font_weight `Semibold));

     

       88
       88
       -
           Color.text (Color.make `Gray ~variant:`V900 ());

     

       89
       89
       -
           Spacing.(to_class (mb (Size.rem 0.75)));

     

       90
       90
       -
         ] in

     

       91
       91
       -
         

     

       92
       92
       -
         let card_description_classes = Css.tw [

     

       93
       93
       -
           Color.text (Color.make `Gray ~variant:`V600 ());

     

       94
       94
       -
           Spacing.(to_class (mb (Size.rem 1.0)));

     

       95
       95
       -
           Typography.(to_class (line_height `Relaxed));

     

       96
       96
       -
         ] in

     

       97
       97
       -
         

     

       98
       98
       -
         let features_classes = Css.tw [

     

       99
       99
       -
           Display.flex;

     

       100
       100
       -
           Flexbox.(to_class (wrap `Wrap));

     

       101
       101
       -
           Spacing.(to_class (gap `All (Size.rem 0.5)));

     

       102
       102
       -
           Spacing.(to_class (mb (Size.rem 1.0)));

     

       103
       103
       -
         ] in

     

       104
       104
       -
         

     

       105
       105
       -
         let feature_tag_classes = Css.tw [

     

       106
       106
       -
           Color.bg (Color.make `Blue ~variant:`V50 ());

     

       107
       107
       -
           Color.text (Color.make `Blue ~variant:`V700 ());

     

       108
       108
       -
           Typography.(to_class (font_size `Xs));

     

       109
       109
       -
           Spacing.(to_class (px (Size.rem 0.5)));

     

       110
       110
       -
           Spacing.(to_class (py (Size.rem 0.25)));

     

       111
       111
       -
           Effects.rounded_full;

     

       112
       112
       -
         ] in

     

       113
       113
       -
         

     

       114
       114
       -
         let link_classes = Css.tw [

     

       115
       115
       -
           Color.text (Color.make `Blue ~variant:`V600 ());

     

       116
       116
       -
           Typography.(to_class (font_weight `Medium));

     

       117
       117
       -
           Variants.hover (Color.text (Color.make `Blue ~variant:`V800 ()));

     

       118
       118
       -
           Effects.transition `Colors;

     

       119
       119
       -
         ] in

     

       120
       120
       -
         

     

       121
       121
       -
         let footer_classes = Css.tw [

     

       122
       122
       -
           Typography.(to_class (text_align `Center));

     

       123
       123
       -
           Spacing.(to_class (mt (Size.rem 3.0)));

     

       124
       124
       -
           Color.text (Color.make `Gray ~variant:`V500 ());

     

       125
       125
       -
           Typography.(to_class (font_size `Sm));

     

       126
       126
       -
         ] in

     

       127
       127
       -
       

     

       128
       128
       -
         let html_doc = El.html [

     

       40
       40
       +
       let create_index () =

     

       41
       41
       +
         let html = El.html [

     

       129
       42
        
           El.head [

     

       130
       43
        
             El.meta ~at:[At.charset "utf-8"] ();

     

       131
       44
        
             El.meta ~at:[At.name "viewport"; At.content "width=device-width, initial-scale=1"] ();

     

       132
       132
       -
             El.title [El.txt "Tailwind OCaml Examples"];

     

       133
       133
       -
             El.link ~at:[At.rel "stylesheet"; At.href "hello_tailwind_01.css"] (); (* Reuse CSS from first example *)

     

       134
       134
       -
             El.style [El.txt {|

     

       135
       135
       -
               body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }

     

       136
       136
       -
               a { text-decoration: none; }

     

       137
       137
       -
               .example-card { display: block; }

     

       45
       45
       +
             El.title [txt "Tailwind OCaml Examples - GADT Interface"];

     

       46
       46
       +
             El.style [txt {|

     

       47
       47
       +
               body { font-family: system-ui, -apple-system, sans-serif; }

     

       48
       48
       +
               .example-card { transition: transform 0.2s, box-shadow 0.2s; }

     

       49
       49
       +
               .example-card:hover { transform: translateY(-2px); }

     

       138
       50
        
             |}];

     

       139
       51
        
           ];

     

       140
       140
       -
           El.body ~at:[classes_attr page_classes] [

     

       141
       141
       -
             El.div ~at:[classes_attr container_classes] [

     

       142
       142
       -
               El.h1 ~at:[classes_attr header_classes] [

     

       143
       143
       -
                 El.txt "Tailwind OCaml Examples"

     

       52
       52
       +
           El.body ~at:[classes_attr [

     

       53
       53
       +
             min_height screen;

     

       54
       54
       +
             bg_color (gray 50);

     

       55
       55
       +
             padding (rem 2.0);

     

       56
       56
       +
           ]] [

     

       57
       57
       +
             container [

     

       58
       58
       +
               (* Header *)

     

       59
       59
       +
               header ~styles:[

     

       60
       60
       +
                 text_center;

     

       61
       61
       +
                 margin_bottom (rem 3.0);

     

       62
       62
       +
               ] [

     

       63
       63
       +
                 h1 ~styles:[

     

       64
       64
       +
                   font_size `Xl3;

     

       65
       65
       +
                   font_weight `Bold;

     

       66
       66
       +
                   text_color (gray 800);

     

       67
       67
       +
                   margin_bottom (rem 1.0);

     

       68
       68
       +
                 ] [txt "🎨 Tailwind OCaml Examples"];

     

       69
       69
       +
                 

     

       70
       70
       +
                 p ~styles:[

     

       71
       71
       +
                   font_size `Xl;

     

       72
       72
       +
                   text_color (gray 600);

     

       73
       73
       +
                   margin_bottom (rem 1.0);

     

       74
       74
       +
                 ] [txt "Type-safe CSS generation with GADT-based interface"];

     

       75
       75
       +
                 

     

       76
       76
       +
                 p ~styles:[

     

       77
       77
       +
                   font_size `Base;

     

       78
       78
       +
                   text_color (gray 500);

     

       79
       79
       +
                 ] [txt "Explore examples showcasing the power of compile-time guaranteed styling"];

     

       144
       80
        
               ];

     

       145
       81
        
               

     

       146
       146
       -
               El.p ~at:[classes_attr subtitle_classes] [

     

       147
       147
       -
                 El.txt "A progressive tutorial series demonstrating type-safe Tailwind CSS generation in OCaml"

     

       148
       148
       -
               ];

     

       149
       149
       -
               

     

       150
       150
       -
               El.div ~at:[classes_attr grid_classes] (

     

       151
       151
       -
                 List.map (fun (href, title, description, features) ->

     

       152
       152
       -
                   El.a ~at:[At.href href; At.class' "example-card"] [

     

       153
       153
       -
                     El.div ~at:[classes_attr card_classes] [

     

       154
       154
       -
                       El.h2 ~at:[classes_attr card_title_classes] [El.txt title];

     

       155
       155
       -
                       El.p ~at:[classes_attr card_description_classes] [El.txt description];

     

       156
       156
       -
                       El.div ~at:[classes_attr features_classes] (

     

       157
       157
       -
                         List.map (fun feature ->

     

       158
       158
       -
                           El.span ~at:[classes_attr feature_tag_classes] [El.txt feature]

     

       159
       159
       -
                         ) features

     

       160
       160
       -
                       );

     

       161
       161
       -
                       El.div ~at:[classes_attr link_classes] [

     

       162
       162
       -
                         El.txt "View Example →"

     

       163
       163
       -
                       ];

     

       82
       82
       +
               (* Examples Grid *)

     

       83
       83
       +
               div ~styles:[

     

       84
       84
       +
                 grid;

     

       85
       85
       +
                 grid_cols 1;

     

       86
       86
       +
                 gap (rem 1.5);

     

       87
       87
       +
               ] (List.map (fun (file, title, desc, features) ->

     

       88
       88
       +
                 El.a ~at:[At.href file; At.style "text-decoration: none; color: inherit;"] [

     

       89
       89
       +
                   div ~styles:[

     

       90
       90
       +
                     bg_color (Tailwind.Color.white);

     

       91
       91
       +
                     rounded `Lg;

     

       92
       92
       +
                     shadow `Md;

     

       93
       93
       +
                     padding (rem 2.0);

     

       94
       94
       +
                     margin_bottom (rem 1.5);

     

       95
       95
       +
                     border;

     

       96
       96
       +
                     border_color (gray 200);

     

       97
       97
       +
                     transition;

     

       98
       98
       +
                   ] [

     

       99
       99
       +
                     (* Title and description *)

     

       100
       100
       +
                     div ~styles:[margin_bottom (rem 1.0)] [

     

       101
       101
       +
                       h2 ~styles:[

     

       102
       102
       +
                         font_size `Xl;

     

       103
       103
       +
                         font_weight `Semibold;

     

       104
       104
       +
                         text_color (gray 800);

     

       105
       105
       +
                         margin_bottom (rem 0.5);

     

       106
       106
       +
                       ] [txt title];

     

       107
       107
       +
                       

     

       108
       108
       +
                       p ~styles:[

     

       109
       109
       +
                         text_color (gray 600);

     

       110
       110
       +
                         margin_bottom (rem 1.0);

     

       111
       111
       +
                       ] [txt desc];

     

       164
       112
        
                     ];

     

       165
       165
       -
                   ]

     

       166
       166
       -
                 ) examples

     

       167
       167
       -
               );

     

       113
       113
       +
                     

     

       114
       114
       +
                     (* Feature tags *)

     

       115
       115
       +
                     div ~styles:[

     

       116
       116
       +
                       grid;

     

       117
       117
       +
                       grid_cols 3;

     

       118
       118
       +
                       gap_x (rem 0.5);

     

       119
       119
       +
                       gap_y (rem 0.5);

     

       120
       120
       +
                     ] (List.map (fun feature ->

     

       121
       121
       +
                       span ~styles:[

     

       122
       122
       +
                         bg_color (blue 100);

     

       123
       123
       +
                         text_color (blue 700);

     

       124
       124
       +
                         padding_x (rem 0.75);

     

       125
       125
       +
                         padding_y (rem 0.25);

     

       126
       126
       +
                         rounded `Full;

     

       127
       127
       +
                         font_size `Sm;

     

       128
       128
       +
                         font_weight `Medium;

     

       129
       129
       +
                         margin_right (rem 0.5);

     

       130
       130
       +
                         margin_bottom (rem 0.5);

     

       131
       131
       +
                       ] [txt feature]

     

       132
       132
       +
                     ) features);

     

       133
       133
       +
                     

     

       134
       134
       +
                     (* View link *)

     

       135
       135
       +
                     div ~styles:[

     

       136
       136
       +
                       margin_top (rem 1.0);

     

       137
       137
       +
                       text_right;

     

       138
       138
       +
                     ] [

     

       139
       139
       +
                       span ~styles:[

     

       140
       140
       +
                         text_color (blue 600);

     

       141
       141
       +
                         font_weight `Medium;

     

       142
       142
       +
                       ] [txt "View Example →"];

     

       143
       143
       +
                     ];

     

       144
       144
       +
                   ];

     

       145
       145
       +
                 ]

     

       146
       146
       +
               ) examples);

     

       168
       147
        
               

     

       169
       169
       -
               El.div ~at:[classes_attr footer_classes] [

     

       170
       170
       -
                 El.p [

     

       171
       171
       -
                   El.txt "Built with ";

     

       172
       172
       -
                   El.a ~at:[At.href "https://github.com/dbuenzli/htmlit"; classes_attr link_classes] [El.txt "Htmlit"];

     

       173
       173
       -
                   El.txt " and type-safe Tailwind CSS generation"

     

       174
       174
       -
                 ];

     

       148
       148
       +
               (* Footer *)

     

       149
       149
       +
               footer ~styles:[

     

       150
       150
       +
                 text_center;

     

       151
       151
       +
                 margin_top (rem 3.0);

     

       152
       152
       +
                 padding_y (rem 2.0);

     

       153
       153
       +
                 border;

     

       154
       154
       +
                 border_color (gray 200);

     

       155
       155
       +
               ] [

     

       156
       156
       +
                 p ~styles:[

     

       157
       157
       +
                   text_color (gray 500);

     

       158
       158
       +
                   font_size `Sm;

     

       159
       159
       +
                   margin_bottom (rem 0.5);

     

       160
       160
       +
                 ] [txt "Built with OCaml, Tailwind CSS, and GADT-based type safety"];

     

       161
       161
       +
                 

     

       162
       162
       +
                 p ~styles:[

     

       163
       163
       +
                   text_color (gray 400);

     

       164
       164
       +
                   font_size `Xs;

     

       165
       165
       +
                 ] [txt "© 2024 Tailwind OCaml - Compile-time guaranteed styling"];

     

       175
       166
        
               ];

     

       176
       167
        
             ];

     

       177
       168
        
           ];

     

       178
       169
        
         ] in

     

       179
       179
       -
         html_doc

     

       170
       170
       +
         html

     

       180
       171
        
       

     

       181
       172
        
       let () =

     

       182
       182
       -
         (* Output HTML to stdout *)

     

       183
       183
       -
         let html_doc = create_index_page () in

     

       184
       184
       -
         let html_string = El.to_string ~doctype:true html_doc in

     

       185
       185
       -
         print_string html_string
     

       173
       173
       +
         let html = create_index () in

     

       174
       174
       +
         print_string (El.to_string ~doctype:true html)

+259 -211

examples/layout_and_spacing_03.ml

···

       1
       1
       -
       (* Example 03: Layout and Spacing - Mastering Box Model and Flexbox *)

     

       1
       1
       +
       (* Example 03: Layout and Spacing - GADT flexbox and spacing demo *)

     

       2
       2
        
       

     

       3
       3
        
       open Htmlit

     

       4
       4
       -
       open Tailwind

     

       5
       5
       -
       

     

       6
       6
       -
       let classes_attr tailwind_classes = 

     

       7
       7
       -
         At.class' (Tailwind.to_string tailwind_classes)

     

       4
       4
       +
       open Tailwind_html

     

       8
       5
        
       

     

       9
       6
        
       let create_layout_demo () =

     

       10
       10
       -
         (* Create comprehensive layout demonstration *)

     

       11
       11
       -
         let html_doc = El.html [

     

       7
       7
       +
         let html = El.html [

     

       12
       8
        
           El.head [

     

       13
       9
        
             El.meta ~at:[At.charset "utf-8"] ();

     

       14
       10
        
             El.meta ~at:[At.name "viewport"; At.content "width=device-width, initial-scale=1"] ();

     

       15
       15
       -
             El.title [El.txt "Layout and Spacing"];

     

       11
       11
       +
             El.title [txt "Layout and Spacing"];

     

       16
       12
        
             El.link ~at:[At.rel "stylesheet"; At.href "layout_and_spacing_03.css"] ();

     

       17
       13
        
           ];

     

       18
       18
       -
           El.body ~at:[At.class' "min-h-screen bg-gray-50 p-8"] [

     

       19
       19
       -
             El.div ~at:[At.class' "max-w-6xl mx-auto"] [

     

       20
       20
       -
               El.h1 ~at:[classes_attr (Css.tw [

     

       21
       21
       -
                 Typography.(to_class (font_size `Xl2));

     

       22
       22
       -
                 Typography.(to_class (font_weight `Bold));

     

       23
       23
       -
                 Color.text (Color.make `Gray ~variant:`V800 ());

     

       24
       24
       -
               ]); At.class' "mb-8 text-center"] [El.txt "Layout and Spacing Demo"];

     

       14
       14
       +
           El.body ~at:[classes_attr [

     

       15
       15
       +
             min_height screen;

     

       16
       16
       +
             bg_color (gray 50);

     

       17
       17
       +
             padding (rem 2.0);

     

       18
       18
       +
           ]] [

     

       19
       19
       +
             container [

     

       20
       20
       +
               h1 ~styles:[

     

       21
       21
       +
                 font_size `Xl2;

     

       22
       22
       +
                 font_weight `Bold;

     

       23
       23
       +
                 text_color (gray 800);

     

       24
       24
       +
                 text_center;

     

       25
       25
       +
                 margin_bottom (rem 2.0);

     

       26
       26
       +
               ] [txt "Layout and Spacing Demo"];

     

       25
       27
        
               

     

       26
       26
       -
               El.p ~at:[classes_attr (Css.tw [

     

       27
       27
       -
                 Typography.(to_class (font_size `Lg));

     

       28
       28
       -
                 Color.text (Color.make `Gray ~variant:`V600 ());

     

       29
       29
       -
               ]); At.class' "text-center mb-12"] [

     

       30
       30
       -
                 El.txt "Master the box model, flexbox, and CSS grid with type-safe utilities."

     

       31
       31
       -
               ];

     

       28
       28
       +
               p ~styles:[

     

       29
       29
       +
                 font_size `Lg;

     

       30
       30
       +
                 text_color (gray 600);

     

       31
       31
       +
                 text_center;

     

       32
       32
       +
                 margin_bottom (rem 3.0);

     

       33
       33
       +
               ] [txt "Master flexbox layouts and spacing with GADT interface"];

     

       32
       34
        
               

     

       33
       35
        
               (* Flexbox Examples *)

     

       34
       34
       -
               El.section ~at:[At.class' "mb-12"] [

     

       35
       35
       -
                 El.h2 ~at:[classes_attr (Css.tw [

     

       36
       36
       -
                   Typography.(to_class (font_size `Xl));

     

       37
       37
       -
                   Typography.(to_class (font_weight `Semibold));

     

       38
       38
       -
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       39
       39
       -
                 ]); At.class' "mb-8"] [El.txt "Flexbox Layouts"];

     

       36
       36
       +
               section ~styles:[margin_bottom (rem 3.0)] [

     

       37
       37
       +
                 h2 ~styles:[

     

       38
       38
       +
                   font_size `Xl;

     

       39
       39
       +
                   font_weight `Semibold;

     

       40
       40
       +
                   text_color (gray 700);

     

       41
       41
       +
                   margin_bottom (rem 2.0);

     

       42
       42
       +
                 ] [txt "Flexbox Layouts"];

     

       40
       43
        
                 

     

       41
       44
        
                 (* Centered content *)

     

       42
       42
       -
                 El.div ~at:[At.class' "mb-8"] [

     

       43
       43
       -
                   El.h3 ~at:[classes_attr (Css.tw [

     

       44
       44
       -
                     Typography.(to_class (font_size `Lg));

     

       45
       45
       -
                     Typography.(to_class (font_weight `Semibold));

     

       46
       46
       -
                     Color.text (Color.make `Gray ~variant:`V700 ());

     

       47
       47
       -
                   ]); At.class' "mb-4"] [El.txt "Centered Content"];

     

       45
       45
       +
                 card [

     

       46
       46
       +
                   h3 ~styles:[

     

       47
       47
       +
                     font_size `Lg;

     

       48
       48
       +
                     font_weight `Semibold;

     

       49
       49
       +
                     text_color (gray 700);

     

       50
       50
       +
                     margin_bottom (rem 1.0);

     

       51
       51
       +
                   ] [txt "Centered Content"];

     

       48
       52
        
                   

     

       49
       49
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       50
       50
       -
                     Display.flex;

     

       51
       51
       -
                     Flexbox.(to_class (justify `Center));

     

       52
       52
       -
                     Flexbox.(to_class (align_items `Center));

     

       53
       53
       -
                     Color.bg (Color.make `Blue ~variant:`V100 ());

     

       54
       54
       -
                     Layout.(to_class (height (Size.rem 8.0)));

     

       55
       55
       -
                     Effects.rounded_lg;

     

       56
       56
       -
                   ])] [

     

       57
       57
       -
                     El.div ~at:[classes_attr (Css.tw [

     

       58
       58
       -
                       Color.bg Color.white;

     

       59
       59
       -
                       Spacing.(to_class (p (Size.rem 1.5)));

     

       60
       60
       -
                       Effects.rounded_md;

     

       61
       61
       -
                       Effects.shadow_sm;

     

       62
       62
       -
                     ])] [

     

       63
       63
       -
                       El.txt "Perfectly Centered Content"

     

       53
       53
       +
                   div ~styles:[

     

       54
       54
       +
                     flex;

     

       55
       55
       +
                     justify_center;

     

       56
       56
       +
                     items_center;

     

       57
       57
       +
                     bg_color (blue 100);

     

       58
       58
       +
                     height (rem 8.0);

     

       59
       59
       +
                     rounded `Lg;

     

       60
       60
       +
                     margin_bottom (rem 1.5);

     

       61
       61
       +
                   ] [

     

       62
       62
       +
                     div ~styles:[

     

       63
       63
       +
                       bg_color (Tailwind.Color.white);

     

       64
       64
       +
                       padding (rem 1.5);

     

       65
       65
       +
                       rounded `Md;

     

       66
       66
       +
                       shadow `Sm;

     

       67
       67
       +
                     ] [

     

       68
       68
       +
                       txt "Perfectly Centered Content"

     

       64
       69
        
                     ];

     

       65
       70
        
                   ];

     

       66
       71
        
                 ];

     

       67
       72
        
                 

     

       68
       73
        
                 (* Space between items *)

     

       69
       69
       -
                 El.div ~at:[At.class' "mb-8"] [

     

       70
       70
       -
                   El.h3 ~at:[classes_attr (Css.tw [

     

       71
       71
       -
                     Typography.(to_class (font_size `Lg));

     

       72
       72
       -
                     Typography.(to_class (font_weight `Semibold));

     

       73
       73
       -
                     Color.text (Color.make `Gray ~variant:`V700 ());

     

       74
       74
       -
                   ]); At.class' "mb-4"] [El.txt "Space Between"];

     

       74
       74
       +
                 card [

     

       75
       75
       +
                   h3 ~styles:[

     

       76
       76
       +
                     font_size `Lg;

     

       77
       77
       +
                     font_weight `Semibold;

     

       78
       78
       +
                     text_color (gray 700);

     

       79
       79
       +
                     margin_bottom (rem 1.0);

     

       80
       80
       +
                   ] [txt "Space Between"];

     

       75
       81
        
                   

     

       76
       76
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       77
       77
       -
                     Display.flex;

     

       78
       78
       -
                     Flexbox.(to_class (justify `Between));

     

       79
       79
       -
                     Flexbox.(to_class (align_items `Center));

     

       80
       80
       -
                     Color.bg (Color.make `Green ~variant:`V100 ());

     

       81
       81
       -
                     Spacing.(to_class (p (Size.rem 1.5)));

     

       82
       82
       -
                     Effects.rounded_lg;

     

       83
       83
       -
                   ])] [

     

       84
       84
       -
                     El.div ~at:[classes_attr (Css.tw [

     

       85
       85
       -
                       Color.bg Color.white;

     

       86
       86
       -
                       Spacing.(to_class (p (Size.rem 1.0)));

     

       87
       87
       -
                       Effects.rounded_md;

     

       88
       88
       -
                     ])] [El.txt "Left"];

     

       89
       89
       -
                     El.div ~at:[classes_attr (Css.tw [

     

       90
       90
       -
                       Color.bg Color.white;

     

       91
       91
       -
                       Spacing.(to_class (p (Size.rem 1.0)));

     

       92
       92
       -
                       Effects.rounded_md;

     

       93
       93
       -
                     ])] [El.txt "Center"];

     

       94
       94
       -
                     El.div ~at:[classes_attr (Css.tw [

     

       95
       95
       -
                       Color.bg Color.white;

     

       96
       96
       -
                       Spacing.(to_class (p (Size.rem 1.0)));

     

       97
       97
       -
                       Effects.rounded_md;

     

       98
       98
       -
                     ])] [El.txt "Right"];

     

       99
       99
       -
                   ];

     

       100
       100
       -
                 ];

     

       101
       101
       -
                 

     

       102
       102
       -
                 (* Flex direction example *)

     

       103
       103
       -
                 El.div [

     

       104
       104
       -
                   El.h3 ~at:[classes_attr (Css.tw [

     

       105
       105
       -
                     Typography.(to_class (font_size `Lg));

     

       106
       106
       -
                     Typography.(to_class (font_weight `Semibold));

     

       107
       107
       -
                     Color.text (Color.make `Gray ~variant:`V700 ());

     

       108
       108
       -
                   ]); At.class' "mb-4"] [El.txt "Flex Direction Column"];

     

       109
       109
       -
                   

     

       110
       110
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       111
       111
       -
                     Display.flex;

     

       112
       112
       -
                     Flexbox.(to_class (direction `Col));

     

       113
       113
       -
                     Spacing.(to_class (gap `All (Size.rem 1.0)));

     

       114
       114
       -
                     Color.bg (Color.make `Purple ~variant:`V100 ());

     

       115
       115
       -
                     Spacing.(to_class (p (Size.rem 1.5)));

     

       116
       116
       -
                     Effects.rounded_lg;

     

       117
       117
       -
                   ])] [

     

       118
       118
       -
                     El.div ~at:[classes_attr (Css.tw [

     

       119
       119
       -
                       Color.bg Color.white;

     

       120
       120
       -
                       Spacing.(to_class (p (Size.rem 1.0)));

     

       121
       121
       -
                       Effects.rounded_md;

     

       122
       122
       -
                     ]); At.class' "text-center"] [El.txt "Item 1"];

     

       123
       123
       -
                     El.div ~at:[classes_attr (Css.tw [

     

       124
       124
       -
                       Color.bg Color.white;

     

       125
       125
       -
                       Spacing.(to_class (p (Size.rem 1.0)));

     

       126
       126
       -
                       Effects.rounded_md;

     

       127
       127
       -
                     ]); At.class' "text-center"] [El.txt "Item 2"];

     

       128
       128
       -
                     El.div ~at:[classes_attr (Css.tw [

     

       129
       129
       -
                       Color.bg Color.white;

     

       130
       130
       -
                       Spacing.(to_class (p (Size.rem 1.0)));

     

       131
       131
       -
                       Effects.rounded_md;

     

       132
       132
       -
                     ]); At.class' "text-center"] [El.txt "Item 3"];

     

       82
       82
       +
                   div ~styles:[

     

       83
       83
       +
                     flex;

     

       84
       84
       +
                     justify_between;

     

       85
       85
       +
                     items_center;

     

       86
       86
       +
                     bg_color (green 100);

     

       87
       87
       +
                     padding (rem 1.5);

     

       88
       88
       +
                     rounded `Lg;

     

       89
       89
       +
                   ] [

     

       90
       90
       +
                     div ~styles:[

     

       91
       91
       +
                       bg_color (Tailwind.Color.white);

     

       92
       92
       +
                       padding (rem 1.0);

     

       93
       93
       +
                       rounded `Md;

     

       94
       94
       +
                     ] [txt "Left"];

     

       95
       95
       +
                     div ~styles:[

     

       96
       96
       +
                       bg_color (Tailwind.Color.white);

     

       97
       97
       +
                       padding (rem 1.0);

     

       98
       98
       +
                       rounded `Md;

     

       99
       99
       +
                     ] [txt "Center"];

     

       100
       100
       +
                     div ~styles:[

     

       101
       101
       +
                       bg_color (Tailwind.Color.white);

     

       102
       102
       +
                       padding (rem 1.0);

     

       103
       103
       +
                       rounded `Md;

     

       104
       104
       +
                     ] [txt "Right"];

     

       133
       105
        
                   ];

     

       134
       106
        
                 ];

     

       135
       107
        
               ];

     

       136
       108
        
               

     

       137
       137
       -
               (* Grid Examples *)

     

       138
       138
       -
               El.section ~at:[At.class' "mb-12"] [

     

       139
       139
       -
                 El.h2 ~at:[classes_attr (Css.tw [

     

       140
       140
       -
                   Typography.(to_class (font_size `Xl));

     

       141
       141
       -
                   Typography.(to_class (font_weight `Semibold));

     

       142
       142
       -
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       143
       143
       -
                 ]); At.class' "mb-8"] [El.txt "CSS Grid Layouts"];

     

       109
       109
       +
               (* Grid Layout Examples *)

     

       110
       110
       +
               section ~styles:[margin_bottom (rem 3.0)] [

     

       111
       111
       +
                 h2 ~styles:[

     

       112
       112
       +
                   font_size `Xl;

     

       113
       113
       +
                   font_weight `Semibold;

     

       114
       114
       +
                   text_color (gray 700);

     

       115
       115
       +
                   margin_bottom (rem 2.0);

     

       116
       116
       +
                 ] [txt "CSS Grid Layouts"];

     

       144
       117
        
                 

     

       145
       145
       -
                 (* 2-column grid *)

     

       146
       146
       -
                 El.div ~at:[At.class' "mb-8"] [

     

       147
       147
       -
                   El.h3 ~at:[classes_attr (Css.tw [

     

       148
       148
       -
                     Typography.(to_class (font_size `Lg));

     

       149
       149
       -
                     Typography.(to_class (font_weight `Semibold));

     

       150
       150
       -
                     Color.text (Color.make `Gray ~variant:`V700 ());

     

       151
       151
       -
                   ]); At.class' "mb-4"] [El.txt "Two Column Grid"];

     

       118
       118
       +
                 (* 3-column grid *)

     

       119
       119
       +
                 card [

     

       120
       120
       +
                   h3 ~styles:[

     

       121
       121
       +
                     font_size `Lg;

     

       122
       122
       +
                     font_weight `Semibold;

     

       123
       123
       +
                     text_color (gray 700);

     

       124
       124
       +
                     margin_bottom (rem 1.0);

     

       125
       125
       +
                   ] [txt "Three Column Grid"];

     

       152
       126
        
                   

     

       153
       153
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       154
       154
       -
                     Display.grid;

     

       155
       155
       -
                     Grid.(to_class (template_cols (`Cols 2)));

     

       156
       156
       -
                     Spacing.(to_class (gap `All (Size.rem 1.5)));

     

       157
       157
       -
                   ])] (List.init 4 (fun i ->

     

       158
       158
       -
                     El.div ~at:[classes_attr (Css.tw [

     

       159
       159
       -
                       Color.bg (Color.make `Red ~variant:`V100 ());

     

       160
       160
       -
                       Spacing.(to_class (p (Size.rem 1.5)));

     

       161
       161
       -
                       Effects.rounded_lg;

     

       162
       162
       -
                     ]); At.class' "text-center"] [

     

       163
       163
       -
                       El.txt (Printf.sprintf "Grid Item %d" (i + 1))

     

       164
       164
       -
                     ]

     

       165
       165
       -
                   ));

     

       127
       127
       +
                   div ~styles:[

     

       128
       128
       +
                     grid;

     

       129
       129
       +
                     grid_cols 3;

     

       130
       130
       +
                     gap (rem 1.0);

     

       131
       131
       +
                   ] [

     

       132
       132
       +
                     div ~styles:[

     

       133
       133
       +
                       bg_color (blue 100);

     

       134
       134
       +
                       padding (rem 1.0);

     

       135
       135
       +
                       rounded `Md;

     

       136
       136
       +
                       text_center;

     

       137
       137
       +
                     ] [txt "Item 1"];

     

       138
       138
       +
                     div ~styles:[

     

       139
       139
       +
                       bg_color (green 100);

     

       140
       140
       +
                       padding (rem 1.0);

     

       141
       141
       +
                       rounded `Md;

     

       142
       142
       +
                       text_center;

     

       143
       143
       +
                     ] [txt "Item 2"];

     

       144
       144
       +
                     div ~styles:[

     

       145
       145
       +
                       bg_color (purple 100);

     

       146
       146
       +
                       padding (rem 1.0);

     

       147
       147
       +
                       rounded `Md;

     

       148
       148
       +
                       text_center;

     

       149
       149
       +
                     ] [txt "Item 3"];

     

       150
       150
       +
                     div ~styles:[

     

       151
       151
       +
                       bg_color (red 100);

     

       152
       152
       +
                       padding (rem 1.0);

     

       153
       153
       +
                       rounded `Md;

     

       154
       154
       +
                       text_center;

     

       155
       155
       +
                     ] [txt "Item 4"];

     

       156
       156
       +
                     div ~styles:[

     

       157
       157
       +
                       bg_color (yellow 100);

     

       158
       158
       +
                       padding (rem 1.0);

     

       159
       159
       +
                       rounded `Md;

     

       160
       160
       +
                       text_center;

     

       161
       161
       +
                     ] [txt "Item 5"];

     

       162
       162
       +
                     div ~styles:[

     

       163
       163
       +
                       bg_color (indigo 100);

     

       164
       164
       +
                       padding (rem 1.0);

     

       165
       165
       +
                       rounded `Md;

     

       166
       166
       +
                       text_center;

     

       167
       167
       +
                     ] [txt "Item 6"];

     

       168
       168
       +
                   ];

     

       166
       169
        
                 ];

     

       167
       170
        
                 

     

       168
       168
       -
                 (* 3-column grid *)

     

       169
       169
       -
                 El.div ~at:[At.class' "mb-8"] [

     

       170
       170
       -
                   El.h3 ~at:[classes_attr (Css.tw [

     

       171
       171
       -
                     Typography.(to_class (font_size `Lg));

     

       172
       172
       -
                     Typography.(to_class (font_weight `Semibold));

     

       173
       173
       -
                     Color.text (Color.make `Gray ~variant:`V700 ());

     

       174
       174
       -
                   ]); At.class' "mb-4"] [El.txt "Three Column Grid"];

     

       171
       171
       +
                 (* Grid gap examples *)

     

       172
       172
       +
                 card [

     

       173
       173
       +
                   h3 ~styles:[

     

       174
       174
       +
                     font_size `Lg;

     

       175
       175
       +
                     font_weight `Semibold;

     

       176
       176
       +
                     text_color (gray 700);

     

       177
       177
       +
                     margin_bottom (rem 1.0);

     

       178
       178
       +
                   ] [txt "Grid Gap Variations"];

     

       175
       179
        
                   

     

       176
       176
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       177
       177
       -
                     Display.grid;

     

       178
       178
       -
                     Grid.(to_class (template_cols (`Cols 3)));

     

       179
       179
       -
                     Spacing.(to_class (gap `All (Size.rem 1.5)));

     

       180
       180
       -
                   ])] (List.init 6 (fun i ->

     

       181
       181
       -
                     El.div ~at:[classes_attr (Css.tw [

     

       182
       182
       -
                       Color.bg (Color.make `Yellow ~variant:`V100 ());

     

       183
       183
       -
                       Spacing.(to_class (p (Size.rem 1.5)));

     

       184
       184
       -
                       Effects.rounded_lg;

     

       185
       185
       -
                     ]); At.class' "text-center"] [

     

       186
       186
       -
                       El.txt (Printf.sprintf "Item %d" (i + 1))

     

       187
       187
       -
                     ]

     

       188
       188
       -
                   ));

     

       180
       180
       +
                   div ~styles:[margin_bottom (rem 1.5)] [

     

       181
       181
       +
                     h4 ~styles:[

     

       182
       182
       +
                       font_size `Base;

     

       183
       183
       +
                       font_weight `Medium;

     

       184
       184
       +
                       text_color (gray 600);

     

       185
       185
       +
                       margin_bottom (rem 0.5);

     

       186
       186
       +
                     ] [txt "Small Gap"];

     

       187
       187
       +
                     div ~styles:[

     

       188
       188
       +
                       grid;

     

       189
       189
       +
                       grid_cols 4;

     

       190
       190
       +
                       gap (rem 0.5);

     

       191
       191
       +
                     ] (List.init 4 (fun i ->

     

       192
       192
       +
                       div ~styles:[

     

       193
       193
       +
                         bg_color (blue 200);

     

       194
       194
       +
                         padding (rem 0.5);

     

       195
       195
       +
                         rounded `Sm;

     

       196
       196
       +
                         text_center;

     

       197
       197
       +
                       ] [txt (string_of_int (i + 1))]

     

       198
       198
       +
                     ));

     

       199
       199
       +
                   ];

     

       200
       200
       +
                   

     

       201
       201
       +
                   div ~styles:[margin_bottom (rem 1.5)] [

     

       202
       202
       +
                     h4 ~styles:[

     

       203
       203
       +
                       font_size `Base;

     

       204
       204
       +
                       font_weight `Medium;

     

       205
       205
       +
                       text_color (gray 600);

     

       206
       206
       +
                       margin_bottom (rem 0.5);

     

       207
       207
       +
                     ] [txt "Large Gap"];

     

       208
       208
       +
                     div ~styles:[

     

       209
       209
       +
                       grid;

     

       210
       210
       +
                       grid_cols 3;

     

       211
       211
       +
                       gap (rem 2.0);

     

       212
       212
       +
                     ] (List.init 3 (fun i ->

     

       213
       213
       +
                       div ~styles:[

     

       214
       214
       +
                         bg_color (green 200);

     

       215
       215
       +
                         padding (rem 1.0);

     

       216
       216
       +
                         rounded `Md;

     

       217
       217
       +
                         text_center;

     

       218
       218
       +
                       ] [txt (Printf.sprintf "Item %d" (i + 1))]

     

       219
       219
       +
                     ));

     

       220
       220
       +
                   ];

     

       221
       221
       +
                   

     

       222
       222
       +
                   div [

     

       223
       223
       +
                     h4 ~styles:[

     

       224
       224
       +
                       font_size `Base;

     

       225
       225
       +
                       font_weight `Medium;

     

       226
       226
       +
                       text_color (gray 600);

     

       227
       227
       +
                       margin_bottom (rem 0.5);

     

       228
       228
       +
                     ] [txt "Asymmetric Gap"];

     

       229
       229
       +
                     div ~styles:[

     

       230
       230
       +
                       grid;

     

       231
       231
       +
                       grid_cols 2;

     

       232
       232
       +
                       gap_x (rem 2.0);

     

       233
       233
       +
                       gap_y (rem 0.5);

     

       234
       234
       +
                     ] (List.init 4 (fun i ->

     

       235
       235
       +
                       div ~styles:[

     

       236
       236
       +
                         bg_color (purple 200);

     

       237
       237
       +
                         padding (rem 0.75);

     

       238
       238
       +
                         rounded `Md;

     

       239
       239
       +
                         text_center;

     

       240
       240
       +
                       ] [txt (Printf.sprintf "Box %d" (i + 1))]

     

       241
       241
       +
                     ));

     

       242
       242
       +
                   ];

     

       189
       243
        
                 ];

     

       190
       244
        
               ];

     

       191
       245
        
               

     

       192
       246
        
               (* Spacing Examples *)

     

       193
       193
       -
               El.section [

     

       194
       194
       -
                 El.h2 ~at:[classes_attr (Css.tw [

     

       195
       195
       -
                   Typography.(to_class (font_size `Xl));

     

       196
       196
       -
                   Typography.(to_class (font_weight `Semibold));

     

       197
       197
       -
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       198
       198
       -
                 ]); At.class' "mb-8"] [El.txt "Spacing System"];

     

       247
       247
       +
               section [

     

       248
       248
       +
                 h2 ~styles:[

     

       249
       249
       +
                   font_size `Xl;

     

       250
       250
       +
                   font_weight `Semibold;

     

       251
       251
       +
                   text_color (gray 700);

     

       252
       252
       +
                   margin_bottom (rem 2.0);

     

       253
       253
       +
                 ] [txt "Spacing System"];

     

       199
       254
        
                 

     

       200
       200
       -
                 El.div ~at:[classes_attr (Css.tw [

     

       201
       201
       -
                   Display.grid;

     

       202
       202
       -
                   Grid.(to_class (template_cols (`Cols 1)));

     

       203
       203
       -
                   Responsive.(to_class (at_breakpoint `Md (Grid.(to_class (template_cols (`Cols 2))))));

     

       204
       204
       -
                   Spacing.(to_class (gap `All (Size.rem 2.0)));

     

       205
       205
       -
                 ])] [

     

       255
       255
       +
                 (* Using grid for spacing examples *)

     

       256
       256
       +
                 div ~styles:[

     

       257
       257
       +
                   grid;

     

       258
       258
       +
                   grid_cols 2;

     

       259
       259
       +
                   gap (rem 1.5);

     

       260
       260
       +
                 ] [

     

       206
       261
        
                   (* Padding example *)

     

       207
       207
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       208
       208
       -
                     Color.bg (Color.make `Indigo ~variant:`V100 ());

     

       209
       209
       -
                     Spacing.(to_class (p (Size.rem 1.5)));

     

       210
       210
       -
                     Effects.rounded_lg;

     

       211
       211
       -
                   ])] [

     

       212
       212
       -
                     El.h4 ~at:[classes_attr (Css.tw [

     

       213
       213
       -
                       Typography.(to_class (font_size `Base));

     

       214
       214
       -
                       Typography.(to_class (font_weight `Semibold));

     

       215
       215
       -
                       Color.text (Color.make `Gray ~variant:`V700 ());

     

       216
       216
       -
                     ]); At.class' "mb-3"] [El.txt "Padding Example"];

     

       217
       217
       -
                     El.div ~at:[classes_attr (Css.tw [

     

       218
       218
       -
                       Color.bg Color.white;

     

       219
       219
       -
                       Spacing.(to_class (p (Size.rem 2.0)));

     

       220
       220
       -
                       Effects.rounded_md;

     

       221
       221
       -
                       Effects.border;

     

       222
       222
       -
                       Color.border (Color.make `Gray ~variant:`V200 ());

     

       223
       223
       -
                     ])] [

     

       224
       224
       -
                       El.txt "This content has p-8 (2rem padding)"

     

       262
       262
       +
                   card [

     

       263
       263
       +
                     h4 ~styles:[

     

       264
       264
       +
                       font_size `Base;

     

       265
       265
       +
                       font_weight `Semibold;

     

       266
       266
       +
                       text_color (gray 700);

     

       267
       267
       +
                       margin_bottom (rem 0.75);

     

       268
       268
       +
                     ] [txt "Padding Example"];

     

       269
       269
       +
                     div ~styles:[

     

       270
       270
       +
                       bg_color (Tailwind.Color.white);

     

       271
       271
       +
                       padding (rem 2.0);

     

       272
       272
       +
                       rounded `Md;

     

       273
       273
       +
                       border;

     

       274
       274
       +
                       border_color (gray 200);

     

       275
       275
       +
                     ] [

     

       276
       276
       +
                       txt "This content has padding (2rem)"

     

       225
       277
        
                     ];

     

       226
       278
        
                   ];

     

       227
       279
        
                   

     

       228
       280
        
                   (* Margin example *)

     

       229
       229
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       230
       230
       -
                     Color.bg (Color.make `Cyan ~variant:`V100 ());

     

       231
       231
       -
                     Spacing.(to_class (p (Size.rem 1.5)));

     

       232
       232
       -
                     Effects.rounded_lg;

     

       233
       233
       -
                   ])] [

     

       234
       234
       -
                     El.h4 ~at:[classes_attr (Css.tw [

     

       235
       235
       -
                       Typography.(to_class (font_size `Base));

     

       236
       236
       -
                       Typography.(to_class (font_weight `Semibold));

     

       237
       237
       -
                       Color.text (Color.make `Gray ~variant:`V700 ());

     

       238
       238
       -
                     ]); At.class' "mb-3"] [El.txt "Margin Example"];

     

       239
       239
       -
                     El.div ~at:[classes_attr (Css.tw [

     

       240
       240
       -
                       Color.bg Color.white;

     

       241
       241
       -
                       Spacing.(to_class (p (Size.rem 1.0)));

     

       242
       242
       -
                       Spacing.(to_class (m (Size.rem 1.5)));

     

       243
       243
       -
                       Effects.rounded_md;

     

       244
       244
       -
                       Effects.border;

     

       245
       245
       -
                       Color.border (Color.make `Gray ~variant:`V200 ());

     

       246
       246
       -
                     ])] [

     

       247
       247
       -
                       El.txt "This box has m-6 (1.5rem margin) from its container"

     

       281
       281
       +
                   card [

     

       282
       282
       +
                     h4 ~styles:[

     

       283
       283
       +
                       font_size `Base;

     

       284
       284
       +
                       font_weight `Semibold;

     

       285
       285
       +
                       text_color (gray 700);

     

       286
       286
       +
                       margin_bottom (rem 0.75);

     

       287
       287
       +
                     ] [txt "Margin Example"];

     

       288
       288
       +
                     div ~styles:[

     

       289
       289
       +
                       bg_color (Tailwind.Color.white);

     

       290
       290
       +
                       padding (rem 1.0);

     

       291
       291
       +
                       margin (rem 1.5);

     

       292
       292
       +
                       rounded `Md;

     

       293
       293
       +
                       border;

     

       294
       294
       +
                       border_color (gray 200);

     

       295
       295
       +
                     ] [

     

       296
       296
       +
                       txt "This box has margin (1.5rem) from its container"

     

       248
       297
        
                     ];

     

       249
       298
        
                   ];

     

       250
       299
        
                 ];

     
···

       252
       301
        
             ];

     

       253
       302
        
           ];

     

       254
       303
        
         ] in

     

       255
       255
       -
         html_doc

     

       304
       304
       +
         html

     

       256
       305
        
       

     

       257
       306
        
       let () =

     

       258
       258
       -
         (* Output HTML to stdout *)

     

       259
       259
       -
         let html_doc = create_layout_demo () in

     

       260
       260
       -
         print_string (El.to_string ~doctype:true html_doc)
     

       307
       307
       +
         let html = create_layout_demo () in

     

       308
       308
       +
         print_string (El.to_string ~doctype:true html)

+165 -135

examples/patterns_and_components_06.ml

···

       1
       1
       -
       (* Example 06: Patterns and Components - Reusable Layout Patterns *)

     

       1
       1
       +
       (* Example 06: Patterns and Components - Reusable components with GADT *)

     

       2
       2
        
       

     

       3
       3
        
       open Htmlit

     

       4
       4
       -
       open Tailwind

     

       5
       5
       -
       

     

       6
       6
       -
       let classes_attr tailwind_classes = 

     

       7
       7
       -
         At.class' (Tailwind.to_string tailwind_classes)

     

       4
       4
       +
       open Tailwind_html

     

       8
       5
        
       

     

       9
       6
        
       let create_patterns_demo () =

     

       10
       10
       -
         (* Create comprehensive patterns demonstration *)

     

       11
       11
       -
         let html_doc = El.html [

     

       7
       7
       +
         let html = El.html [

     

       12
       8
        
           El.head [

     

       13
       9
        
             El.meta ~at:[At.charset "utf-8"] ();

     

       14
       10
        
             El.meta ~at:[At.name "viewport"; At.content "width=device-width, initial-scale=1"] ();

     

       15
       15
       -
             El.title [El.txt "Patterns and Components"];

     

       11
       11
       +
             El.title [txt "Patterns and Components"];

     

       16
       12
        
             El.link ~at:[At.rel "stylesheet"; At.href "patterns_and_components_06.css"] ();

     

       17
       13
        
           ];

     

       18
       18
       -
           El.body ~at:[At.class' "min-h-screen bg-gray-50 p-8"] [

     

       19
       19
       -
             El.div ~at:[At.class' "max-w-6xl mx-auto"] [

     

       20
       20
       -
               El.h1 ~at:[classes_attr (Css.tw [

     

       21
       21
       -
                 Typography.(to_class (font_size `Xl2));

     

       22
       22
       -
                 Typography.(to_class (font_weight `Bold));

     

       23
       23
       -
                 Color.text (Color.make `Gray ~variant:`V800 ());

     

       24
       24
       -
               ]); At.class' "mb-8 text-center"] [El.txt "Patterns and Components Demo"];

     

       14
       14
       +
           El.body ~at:[classes_attr [

     

       15
       15
       +
             min_height screen;

     

       16
       16
       +
             bg_color (gray 50);

     

       17
       17
       +
             padding (rem 2.0);

     

       18
       18
       +
           ]] [

     

       19
       19
       +
             container [

     

       20
       20
       +
               h1 ~styles:[

     

       21
       21
       +
                 font_size `Xl2;

     

       22
       22
       +
                 font_weight `Bold;

     

       23
       23
       +
                 text_color (gray 800);

     

       24
       24
       +
                 text_center;

     

       25
       25
       +
                 margin_bottom (rem 2.0);

     

       26
       26
       +
               ] [txt "Patterns and Components Demo"];

     

       25
       27
        
               

     

       26
       28
        
               (* Container Pattern *)

     

       27
       27
       -
               El.section ~at:[At.class' "mb-12"] [

     

       28
       28
       -
                 El.h2 ~at:[classes_attr (Css.tw [

     

       29
       29
       -
                   Typography.(to_class (font_size `Xl));

     

       30
       30
       -
                   Typography.(to_class (font_weight `Semibold));

     

       31
       31
       -
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       32
       32
       -
                 ]); At.class' "mb-6"] [El.txt "Container Pattern"];

     

       29
       29
       +
               section ~styles:[margin_bottom (rem 3.0)] [

     

       30
       30
       +
                 h2 ~styles:[

     

       31
       31
       +
                   font_size `Xl;

     

       32
       32
       +
                   font_weight `Semibold;

     

       33
       33
       +
                   text_color (gray 700);

     

       34
       34
       +
                   margin_bottom (rem 1.5);

     

       35
       35
       +
                 ] [txt "Container Pattern"];

     

       33
       36
        
                 

     

       34
       34
       -
                 El.div ~at:[classes_attr (Css.tw [Patterns.container ()]); At.class' "bg-white rounded-lg shadow-sm p-6"] [

     

       35
       35
       -
                   El.p ~at:[classes_attr (Css.tw [

     

       36
       36
       -
                     Color.text (Color.make `Gray ~variant:`V600 ());

     

       37
       37
       -
                   ])] [El.txt "This content is inside a container pattern that centers content and provides responsive padding."];

     

       37
       37
       +
                 card [

     

       38
       38
       +
                   p ~styles:[text_color (gray 600)] [

     

       39
       39
       +
                     txt "This content is inside a container pattern that centers content and provides responsive padding."

     

       40
       40
       +
                   ];

     

       38
       41
        
                 ];

     

       39
       42
        
               ];

     

       40
       43
        
               

     

       41
       44
        
               (* Card Pattern *)

     

       42
       42
       -
               El.section ~at:[At.class' "mb-12"] [

     

       43
       43
       -
                 El.h2 ~at:[classes_attr (Css.tw [

     

       44
       44
       -
                   Typography.(to_class (font_size `Xl));

     

       45
       45
       -
                   Typography.(to_class (font_weight `Semibold));

     

       46
       46
       -
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       47
       47
       -
                 ]); At.class' "mb-6"] [El.txt "Card Pattern"];

     

       45
       45
       +
               section ~styles:[margin_bottom (rem 3.0)] [

     

       46
       46
       +
                 h2 ~styles:[

     

       47
       47
       +
                   font_size `Xl;

     

       48
       48
       +
                   font_weight `Semibold;

     

       49
       49
       +
                   text_color (gray 700);

     

       50
       50
       +
                   margin_bottom (rem 1.5);

     

       51
       51
       +
                 ] [txt "Card Patterns"];

     

       48
       52
        
                 

     

       49
       49
       -
                 El.div ~at:[At.class' "grid grid-cols-1 md:grid-cols-3 gap-6"] [

     

       50
       50
       -
                   El.div ~at:[classes_attr (Css.tw [Patterns.card]); At.class' "p-6"] [

     

       51
       51
       -
                     El.h3 ~at:[classes_attr (Css.tw [

     

       52
       52
       -
                       Typography.(to_class (font_size `Lg));

     

       53
       53
       -
                       Typography.(to_class (font_weight `Semibold));

     

       54
       54
       -
                       Color.text (Color.make `Gray ~variant:`V800 ());

     

       55
       55
       -
                     ]); At.class' "mb-2"] [El.txt "Card One"];

     

       56
       56
       -
                     El.p ~at:[classes_attr (Css.tw [

     

       57
       57
       -
                       Color.text (Color.make `Gray ~variant:`V600 ());

     

       58
       58
       -
                     ])] [El.txt "This is a card using the built-in card pattern."];

     

       53
       53
       +
                 div ~styles:[flex; flex_col] [

     

       54
       54
       +
                   card [

     

       55
       55
       +
                     h3 ~styles:[

     

       56
       56
       +
                       font_size `Lg;

     

       57
       57
       +
                       font_weight `Semibold;

     

       58
       58
       +
                       text_color (gray 800);

     

       59
       59
       +
                       margin_bottom (rem 1.0);

     

       60
       60
       +
                     ] [txt "Basic Card"];

     

       61
       61
       +
                     p ~styles:[text_color (gray 600)] [

     

       62
       62
       +
                       txt "A simple card with padding and shadow."

     

       63
       63
       +
                     ];

     

       59
       64
        
                   ];

     

       60
       65
        
                   

     

       61
       61
       -
                   El.div ~at:[classes_attr (Css.tw [Patterns.card]); At.class' "p-6"] [

     

       62
       62
       -
                     El.h3 ~at:[classes_attr (Css.tw [

     

       63
       63
       -
                       Typography.(to_class (font_size `Lg));

     

       64
       64
       -
                       Typography.(to_class (font_weight `Semibold));

     

       65
       65
       -
                       Color.text (Color.make `Gray ~variant:`V800 ());

     

       66
       66
       -
                     ]); At.class' "mb-2"] [El.txt "Card Two"];

     

       67
       67
       -
                     El.p ~at:[classes_attr (Css.tw [

     

       68
       68
       -
                       Color.text (Color.make `Gray ~variant:`V600 ());

     

       69
       69
       -
                     ])] [El.txt "Another card with the same styling pattern applied."];

     

       70
       70
       -
                   ];

     

       71
       71
       -
                   

     

       72
       72
       -
                   El.div ~at:[classes_attr (Css.tw [Patterns.card]); At.class' "p-6"] [

     

       73
       73
       -
                     El.h3 ~at:[classes_attr (Css.tw [

     

       74
       74
       -
                       Typography.(to_class (font_size `Lg));

     

       75
       75
       -
                       Typography.(to_class (font_weight `Semibold));

     

       76
       76
       -
                       Color.text (Color.make `Gray ~variant:`V800 ());

     

       77
       77
       -
                     ]); At.class' "mb-2"] [El.txt "Card Three"];

     

       78
       78
       -
                     El.p ~at:[classes_attr (Css.tw [

     

       79
       79
       -
                       Color.text (Color.make `Gray ~variant:`V600 ());

     

       80
       80
       -
                     ])] [El.txt "A third card demonstrating consistent styling."];

     

       66
       66
       +
                   card ~elevated:true [

     

       67
       67
       +
                     h3 ~styles:[

     

       68
       68
       +
                       font_size `Lg;

     

       69
       69
       +
                       font_weight `Semibold;

     

       70
       70
       +
                       text_color (gray 800);

     

       71
       71
       +
                       margin_bottom (rem 1.0);

     

       72
       72
       +
                     ] [txt "Elevated Card"];

     

       73
       73
       +
                     p ~styles:[text_color (gray 600)] [

     

       74
       74
       +
                       txt "This card has a stronger shadow for emphasis."

     

       75
       75
       +
                     ];

     

       81
       76
        
                   ];

     

       82
       77
        
                 ];

     

       83
       78
        
               ];

     

       84
       79
        
               

     

       85
       85
       -
               (* Flex Center Pattern *)

     

       86
       86
       -
               El.section ~at:[At.class' "mb-12"] [

     

       87
       87
       -
                 El.h2 ~at:[classes_attr (Css.tw [

     

       88
       88
       -
                   Typography.(to_class (font_size `Xl));

     

       89
       89
       -
                   Typography.(to_class (font_weight `Semibold));

     

       90
       90
       -
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       91
       91
       -
                 ]); At.class' "mb-6"] [El.txt "Flex Center Pattern"];

     

       80
       80
       +
               (* Button Components *)

     

       81
       81
       +
               section ~styles:[margin_bottom (rem 3.0)] [

     

       82
       82
       +
                 h2 ~styles:[

     

       83
       83
       +
                   font_size `Xl;

     

       84
       84
       +
                   font_weight `Semibold;

     

       85
       85
       +
                   text_color (gray 700);

     

       86
       86
       +
                   margin_bottom (rem 1.5);

     

       87
       87
       +
                 ] [txt "Button Components"];

     

       92
       88
        
                 

     

       93
       93
       -
                 El.div ~at:[classes_attr (Css.tw [Patterns.flex_center]); At.class' "bg-blue-50 rounded-lg h-32"] [

     

       94
       94
       -
                   El.p ~at:[classes_attr (Css.tw [

     

       95
       95
       -
                     Color.text (Color.make `Blue ~variant:`V600 ());

     

       96
       96
       -
                     Typography.(to_class (font_weight `Medium));

     

       97
       97
       -
                   ])] [El.txt "This content is perfectly centered using flex_center pattern"];

     

       89
       89
       +
                 card [

     

       90
       90
       +
                   h3 ~styles:[

     

       91
       91
       +
                     font_size `Lg;

     

       92
       92
       +
                     font_weight `Semibold;

     

       93
       93
       +
                     text_color (gray 800);

     

       94
       94
       +
                     margin_bottom (rem 1.5);

     

       95
       95
       +
                   ] [txt "Button Variants"];

     

       96
       96
       +
                   

     

       97
       97
       +
                   div ~styles:[flex; flex_col] [

     

       98
       98
       +
                     div ~styles:[margin_bottom (rem 1.0)] [

     

       99
       99
       +
                       btn_primary ~size:`Sm [txt "Small Primary"];

     

       100
       100
       +
                       btn_primary [txt "Default Primary"];

     

       101
       101
       +
                       btn_primary ~size:`Lg [txt "Large Primary"];

     

       102
       102
       +
                     ];

     

       103
       103
       +
                     

     

       104
       104
       +
                     div ~styles:[margin_bottom (rem 1.0)] [

     

       105
       105
       +
                       btn_secondary ~size:`Sm [txt "Small Secondary"];

     

       106
       106
       +
                       btn_secondary [txt "Default Secondary"];

     

       107
       107
       +
                       btn_secondary ~size:`Lg [txt "Large Secondary"];

     

       108
       108
       +
                     ];

     

       109
       109
       +
                     

     

       110
       110
       +
                     div [

     

       111
       111
       +
                       btn_outline ~size:`Sm [txt "Small Outline"];

     

       112
       112
       +
                       btn_outline [txt "Default Outline"];

     

       113
       113
       +
                       btn_outline ~size:`Lg [txt "Large Outline"];

     

       114
       114
       +
                     ];

     

       115
       115
       +
                   ];

     

       98
       116
        
                 ];

     

       99
       117
        
               ];

     

       100
       118
        
               

     

       101
       101
       -
               (* Stack Pattern *)

     

       102
       102
       -
               El.section ~at:[At.class' "mb-12"] [

     

       103
       103
       -
                 El.h2 ~at:[classes_attr (Css.tw [

     

       104
       104
       -
                   Typography.(to_class (font_size `Xl));

     

       105
       105
       -
                   Typography.(to_class (font_weight `Semibold));

     

       106
       106
       -
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       107
       107
       -
                 ]); At.class' "mb-6"] [El.txt "Stack Pattern"];

     

       119
       119
       +
               (* List Pattern *)

     

       120
       120
       +
               section ~styles:[margin_bottom (rem 3.0)] [

     

       121
       121
       +
                 h2 ~styles:[

     

       122
       122
       +
                   font_size `Xl;

     

       123
       123
       +
                   font_weight `Semibold;

     

       124
       124
       +
                   text_color (gray 700);

     

       125
       125
       +
                   margin_bottom (rem 1.5);

     

       126
       126
       +
                 ] [txt "List Patterns"];

     

       108
       127
        
                 

     

       109
       109
       -
                 El.div ~at:[classes_attr (Css.tw [Patterns.stack ~gap:(Size.rem 1.0) ()]); At.class' "bg-white rounded-lg shadow-sm p-6"] [

     

       110
       110
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       111
       111
       -
                     Color.bg (Color.make `Green ~variant:`V50 ());

     

       112
       112
       -
                     Spacing.(to_class (p (Size.rem 1.0)));

     

       113
       113
       -
                     Effects.rounded_md;

     

       114
       114
       -
                   ])] [El.txt "Stack Item 1"];

     

       128
       128
       +
                 card [

     

       129
       129
       +
                   h3 ~styles:[

     

       130
       130
       +
                     font_size `Lg;

     

       131
       131
       +
                     font_weight `Semibold;

     

       132
       132
       +
                     text_color (gray 800);

     

       133
       133
       +
                     margin_bottom (rem 1.0);

     

       134
       134
       +
                   ] [txt "Feature List"];

     

       115
       135
        
                   

     

       116
       116
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       117
       117
       -
                     Color.bg (Color.make `Blue ~variant:`V50 ());

     

       118
       118
       -
                     Spacing.(to_class (p (Size.rem 1.0)));

     

       119
       119
       -
                     Effects.rounded_md;

     

       120
       120
       -
                   ])] [El.txt "Stack Item 2"];

     

       121
       121
       -
                   

     

       122
       122
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       123
       123
       -
                     Color.bg (Color.make `Purple ~variant:`V50 ());

     

       124
       124
       -
                     Spacing.(to_class (p (Size.rem 1.0)));

     

       125
       125
       -
                     Effects.rounded_md;

     

       126
       126
       -
                   ])] [El.txt "Stack Item 3"];

     

       136
       136
       +
                   ul ~styles:[text_color (gray 600)] [

     

       137
       137
       +
                     li ~styles:[margin_bottom (rem 0.5)] [txt "✓ Type-safe styling"];

     

       138
       138
       +
                     li ~styles:[margin_bottom (rem 0.5)] [txt "✓ Conflict prevention"];

     

       139
       139
       +
                     li ~styles:[margin_bottom (rem 0.5)] [txt "✓ Succinct syntax"];

     

       140
       140
       +
                     li [txt "✓ Reusable components"];

     

       141
       141
       +
                   ];

     

       127
       142
        
                 ];

     

       128
       143
        
               ];

     

       129
       144
        
               

     

       130
       130
       -
               (* Inline Stack Pattern *)

     

       131
       131
       -
               El.section [

     

       132
       132
       -
                 El.h2 ~at:[classes_attr (Css.tw [

     

       133
       133
       -
                   Typography.(to_class (font_size `Xl));

     

       134
       134
       -
                   Typography.(to_class (font_weight `Semibold));

     

       135
       135
       -
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       136
       136
       -
                 ]); At.class' "mb-6"] [El.txt "Inline Stack Pattern"];

     

       145
       145
       +
               (* Form Pattern *)

     

       146
       146
       +
               section [

     

       147
       147
       +
                 h2 ~styles:[

     

       148
       148
       +
                   font_size `Xl;

     

       149
       149
       +
                   font_weight `Semibold;

     

       150
       150
       +
                   text_color (gray 700);

     

       151
       151
       +
                   margin_bottom (rem 1.5);

     

       152
       152
       +
                 ] [txt "Form Patterns"];

     

       137
       153
        
                 

     

       138
       138
       -
                 El.div ~at:[classes_attr (Css.tw [Patterns.inline_stack ~gap:(Size.rem 1.0) ()]); At.class' "bg-white rounded-lg shadow-sm p-6"] [

     

       139
       139
       -
                   El.span ~at:[classes_attr (Css.tw [

     

       140
       140
       -
                     Color.bg (Color.make `Red ~variant:`V50 ());

     

       141
       141
       -
                     Color.text (Color.make `Red ~variant:`V600 ());

     

       142
       142
       -
                     Spacing.(to_class (px (Size.rem 0.75)));

     

       143
       143
       -
                     Spacing.(to_class (py (Size.rem 0.5)));

     

       144
       144
       -
                     Effects.rounded_full;

     

       145
       145
       -
                     Typography.(to_class (font_size `Sm));

     

       146
       146
       -
                   ])] [El.txt "Tag 1"];

     

       154
       154
       +
                 card [

     

       155
       155
       +
                   h3 ~styles:[

     

       156
       156
       +
                     font_size `Lg;

     

       157
       157
       +
                     font_weight `Semibold;

     

       158
       158
       +
                     text_color (gray 800);

     

       159
       159
       +
                     margin_bottom (rem 1.5);

     

       160
       160
       +
                   ] [txt "Simple Form"];

     

       147
       161
        
                   

     

       148
       148
       -
                   El.span ~at:[classes_attr (Css.tw [

     

       149
       149
       -
                     Color.bg (Color.make `Yellow ~variant:`V50 ());

     

       150
       150
       -
                     Color.text (Color.make `Yellow ~variant:`V600 ());

     

       151
       151
       -
                     Spacing.(to_class (px (Size.rem 0.75)));

     

       152
       152
       -
                     Spacing.(to_class (py (Size.rem 0.5)));

     

       153
       153
       -
                     Effects.rounded_full;

     

       154
       154
       -
                     Typography.(to_class (font_size `Sm));

     

       155
       155
       -
                   ])] [El.txt "Tag 2"];

     

       156
       156
       -
                   

     

       157
       157
       -
                   El.span ~at:[classes_attr (Css.tw [

     

       158
       158
       -
                     Color.bg (Color.make `Indigo ~variant:`V50 ());

     

       159
       159
       -
                     Color.text (Color.make `Indigo ~variant:`V600 ());

     

       160
       160
       -
                     Spacing.(to_class (px (Size.rem 0.75)));

     

       161
       161
       -
                     Spacing.(to_class (py (Size.rem 0.5)));

     

       162
       162
       -
                     Effects.rounded_full;

     

       163
       163
       -
                     Typography.(to_class (font_size `Sm));

     

       164
       164
       -
                   ])] [El.txt "Tag 3"];

     

       162
       162
       +
                   div ~styles:[flex; flex_col] [

     

       163
       163
       +
                     div ~styles:[margin_bottom (rem 1.5)] [

     

       164
       164
       +
                       El.label ~at:[At.for' "name"; classes_attr [

     

       165
       165
       +
                         block;

     

       166
       166
       +
                         font_weight `Medium;

     

       167
       167
       +
                         text_color (gray 700);

     

       168
       168
       +
                         margin_bottom (rem 0.5);

     

       169
       169
       +
                       ]] [txt "Name"];

     

       170
       170
       +
                       El.input ~at:[At.type' "text"; At.id "name"; classes_attr [

     

       171
       171
       +
                         width full;

     

       172
       172
       +
                         padding (rem 0.5);

     

       173
       173
       +
                         border;

     

       174
       174
       +
                         border_color (gray 300);

     

       175
       175
       +
                         rounded `Md;

     

       176
       176
       +
                       ]] ();

     

       177
       177
       +
                     ];

     

       178
       178
       +
                     

     

       179
       179
       +
                     div ~styles:[margin_bottom (rem 1.5)] [

     

       180
       180
       +
                       El.label ~at:[At.for' "email"; classes_attr [

     

       181
       181
       +
                         block;

     

       182
       182
       +
                         font_weight `Medium;

     

       183
       183
       +
                         text_color (gray 700);

     

       184
       184
       +
                         margin_bottom (rem 0.5);

     

       185
       185
       +
                       ]] [txt "Email"];

     

       186
       186
       +
                       El.input ~at:[At.type' "email"; At.id "email"; classes_attr [

     

       187
       187
       +
                         width full;

     

       188
       188
       +
                         padding (rem 0.5);

     

       189
       189
       +
                         border;

     

       190
       190
       +
                         border_color (gray 300);

     

       191
       191
       +
                         rounded `Md;

     

       192
       192
       +
                       ]] ();

     

       193
       193
       +
                     ];

     

       194
       194
       +
                     

     

       195
       195
       +
                     btn_primary [txt "Submit"];

     

       196
       196
       +
                   ];

     

       165
       197
        
                 ];

     

       166
       198
        
               ];

     

       167
       199
        
             ];

     

       168
       200
        
           ];

     

       169
       201
        
         ] in

     

       170
       170
       -
         html_doc

     

       202
       202
       +
         html

     

       171
       203
        
       

     

       172
       204
        
       let () =

     

       173
       173
       -
         (* Output HTML to stdout *)

     

       174
       174
       -
         let html_doc = create_patterns_demo () in

     

       175
       175
       -
         let html_string = El.to_string ~doctype:true html_doc in

     

       176
       176
       -
         print_string html_string
     

       205
       205
       +
         let html = create_patterns_demo () in

     

       206
       206
       +
         print_string (El.to_string ~doctype:true html)

+144 -148

examples/responsive_design_04.ml

···

       1
       1
       -
       (* Example 04: Responsive Design - Building Adaptive Layouts *)

     

       1
       1
       +
       (* Example 04: Responsive Design - GADT interface showcase *)

     

       2
       2
        
       

     

       3
       3
        
       open Htmlit

     

       4
       4
       -
       open Tailwind

     

       5
       5
       -
       

     

       6
       6
       -
       let classes_attr tailwind_classes = 

     

       7
       7
       -
         At.class' (Tailwind.to_string tailwind_classes)

     

       4
       4
       +
       open Tailwind_html

     

       8
       5
        
       

     

       9
       6
        
       let create_responsive_demo () =

     

       10
       10
       -
         (* Create comprehensive responsive demonstration *)

     

       11
       11
       -
         let html_doc = El.html [

     

       7
       7
       +
         let html = El.html [

     

       12
       8
        
           El.head [

     

       13
       9
        
             El.meta ~at:[At.charset "utf-8"] ();

     

       14
       10
        
             El.meta ~at:[At.name "viewport"; At.content "width=device-width, initial-scale=1"] ();

     

       15
       15
       -
             El.title [El.txt "Responsive Design"];

     

       11
       11
       +
             El.title [txt "Responsive Design"];

     

       16
       12
        
             El.link ~at:[At.rel "stylesheet"; At.href "responsive_design_04.css"] ();

     

       17
       13
        
           ];

     

       18
       18
       -
           El.body ~at:[At.class' "min-h-screen bg-gray-50 p-8"] [

     

       19
       19
       -
             El.div ~at:[At.class' "max-w-6xl mx-auto"] [

     

       20
       20
       -
               El.h1 ~at:[classes_attr (Css.tw [

     

       21
       21
       -
                 Typography.(to_class (font_size `Xl2));

     

       22
       22
       -
                 Responsive.(to_class (at_breakpoint `Md (Typography.(to_class (font_size `Xl3)))));

     

       23
       23
       -
                 Typography.(to_class (font_weight `Bold));

     

       24
       24
       -
                 Color.text (Color.make `Gray ~variant:`V700 ());

     

       25
       25
       -
               ]); At.class' "mb-8 text-center"] [El.txt "Responsive Design Demo"];

     

       14
       14
       +
           El.body ~at:[classes_attr [

     

       15
       15
       +
             min_height screen;

     

       16
       16
       +
             bg_color (gray 50);

     

       17
       17
       +
             padding (rem 1.0);

     

       18
       18
       +
           ]] [

     

       19
       19
       +
             container [

     

       20
       20
       +
               h1 ~styles:[

     

       21
       21
       +
                 font_size `Xl2;

     

       22
       22
       +
                 font_weight `Bold;

     

       23
       23
       +
                 text_color (gray 800);

     

       24
       24
       +
                 text_center;

     

       25
       25
       +
                 margin_bottom (rem 2.0);

     

       26
       26
       +
               ] [txt "Responsive Design Demo"];

     

       26
       27
        
               

     

       27
       27
       -
               El.p ~at:[classes_attr (Css.tw [

     

       28
       28
       -
                 Typography.(to_class (font_size `Lg));

     

       29
       29
       -
                 Color.text (Color.make `Gray ~variant:`V600 ());

     

       30
       30
       -
               ]); At.class' "text-center mb-8"] [

     

       31
       31
       -
                 El.txt "Resize your browser window to see responsive changes. The indicator in the top-right shows the current breakpoint."

     

       32
       32
       -
               ];

     

       33
       33
       -
               

     

       34
       34
       -
               (* Responsive Grid *)

     

       35
       35
       -
               El.section ~at:[At.class' "mb-8"] [

     

       36
       36
       -
                 El.h2 ~at:[classes_attr (Css.tw [

     

       37
       37
       -
                   Typography.(to_class (font_size `Xl));

     

       38
       38
       -
                   Typography.(to_class (font_weight `Semibold));

     

       39
       39
       -
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       40
       40
       -
                 ]); At.class' "mb-6"] [El.txt "Responsive Grid"];

     

       41
       41
       -
                 

     

       42
       42
       -
                 El.p ~at:[classes_attr (Css.tw [

     

       43
       43
       -
                   Color.text (Color.make `Gray ~variant:`V600 ());

     

       44
       44
       -
                 ]); At.class' "mb-4"] [

     

       45
       45
       -
                   El.txt "1 column → 2 columns (md) → 3 columns (lg) → 4 columns (xl)"

     

       46
       46
       -
                 ];

     

       47
       47
       -
                 

     

       48
       48
       -
                 El.div ~at:[classes_attr (Css.tw [

     

       49
       49
       -
                   Display.grid;

     

       50
       50
       -
                   Grid.(to_class (template_cols (`Cols 1)));

     

       51
       51
       -
                   Responsive.(to_class (at_breakpoint `Md (Grid.(to_class (template_cols (`Cols 2))))));

     

       52
       52
       -
                   Responsive.(to_class (at_breakpoint `Lg (Grid.(to_class (template_cols (`Cols 3))))));

     

       53
       53
       -
                   Responsive.(to_class (at_breakpoint `Xl (Grid.(to_class (template_cols (`Cols 4))))));

     

       54
       54
       -
                   Spacing.(to_class (gap `All (Size.rem 1.0)));

     

       55
       55
       -
                 ])] (List.init 8 (fun i ->

     

       56
       56
       -
                   let colors = [|

     

       57
       57
       -
                     Color.make `Blue ~variant:`V100 ();

     

       58
       58
       -
                     Color.make `Green ~variant:`V100 ();

     

       59
       59
       -
                     Color.make `Purple ~variant:`V100 ();

     

       60
       60
       -
                     Color.make `Red ~variant:`V100 ();

     

       61
       61
       -
                     Color.make `Yellow ~variant:`V100 ();

     

       62
       62
       -
                   |] in

     

       63
       63
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       64
       64
       -
                     Color.bg colors.(i mod (Array.length colors));

     

       65
       65
       -
                     Spacing.(to_class (p (Size.rem 1.5)));

     

       66
       66
       -
                   ]); At.class' "rounded-lg text-center"] [

     

       67
       67
       -
                     El.txt (Printf.sprintf "Item %d" (i + 1))

     

       68
       68
       -
                   ]

     

       69
       69
       -
                 ));

     

       70
       70
       -
               ];

     

       28
       28
       +
               p ~styles:[

     

       29
       29
       +
                 font_size `Lg;

     

       30
       30
       +
                 text_color (gray 600);

     

       31
       31
       +
                 text_center;

     

       32
       32
       +
                 margin_bottom (rem 3.0);

     

       33
       33
       +
               ] [txt "Adaptive layouts using GADT interface"];

     

       71
       34
        
               

     

       72
       72
       -
               (* Responsive Typography *)

     

       73
       73
       -
               El.section ~at:[At.class' "mb-8"] [

     

       74
       74
       -
                 El.h2 ~at:[classes_attr (Css.tw [

     

       75
       75
       -
                   Typography.(to_class (font_size `Xl));

     

       76
       76
       -
                   Typography.(to_class (font_weight `Semibold));

     

       77
       77
       -
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       78
       78
       -
                 ]); At.class' "mb-6"] [El.txt "Responsive Typography"];

     

       35
       35
       +
               (* Mobile-first card grid *)

     

       36
       36
       +
               section ~styles:[margin_bottom (rem 3.0)] [

     

       37
       37
       +
                 h2 ~styles:[

     

       38
       38
       +
                   font_size `Xl;

     

       39
       39
       +
                   font_weight `Semibold;

     

       40
       40
       +
                   text_color (gray 700);

     

       41
       41
       +
                   margin_bottom (rem 2.0);

     

       42
       42
       +
                 ] [txt "Responsive Card Grid"];

     

       79
       43
        
                 

     

       80
       80
       -
                 El.div ~at:[classes_attr (Css.tw [

     

       81
       81
       -
                   Color.bg (Color.make `Gray ~variant:`V100 ());

     

       82
       82
       -
                   Spacing.(to_class (p (Size.rem 1.5)));

     

       83
       83
       -
                 ]); At.class' "rounded-lg text-center"] [

     

       84
       84
       -
                   El.h3 ~at:[classes_attr (Css.tw [

     

       85
       85
       -
                     Typography.(to_class (font_size `Base));

     

       86
       86
       -
                     Responsive.(to_class (at_breakpoint `Md (Typography.(to_class (font_size `Lg)))));

     

       87
       87
       -
                     Responsive.(to_class (at_breakpoint `Lg (Typography.(to_class (font_size `Xl2)))));

     

       88
       88
       -
                     Typography.(to_class (font_weight `Semibold));

     

       89
       89
       -
                     Color.text (Color.make `Blue ~variant:`V600 ());

     

       90
       90
       -
                   ]); At.class' "mb-4"] [El.txt "Responsive Heading"];

     

       44
       44
       +
                 (* Using CSS Grid - starts as 1 column on mobile, would be 3 columns on larger screens *)

     

       45
       45
       +
                 div ~styles:[

     

       46
       46
       +
                   grid;

     

       47
       47
       +
                   grid_cols 1;  (* Mobile: 1 column, but ideally would be responsive *)

     

       48
       48
       +
                   gap (rem 1.5);

     

       49
       49
       +
                 ] [

     

       50
       50
       +
                   (* Card 1 *)

     

       51
       51
       +
                   card [

     

       52
       52
       +
                     h3 ~styles:[

     

       53
       53
       +
                       font_size `Lg;

     

       54
       54
       +
                       font_weight `Semibold;

     

       55
       55
       +
                       text_color (blue 600);

     

       56
       56
       +
                       margin_bottom (rem 1.0);

     

       57
       57
       +
                     ] [txt "Card 1"];

     

       58
       58
       +
                     p ~styles:[text_color (gray 600)] [

     

       59
       59
       +
                       txt "This card stacks vertically on mobile and forms a grid on larger screens."

     

       60
       60
       +
                     ];

     

       61
       61
       +
                   ];

     

       91
       62
        
                   

     

       92
       92
       -
                   El.p ~at:[classes_attr (Css.tw [

     

       93
       93
       -
                     Typography.(to_class (font_size `Sm));

     

       94
       94
       -
                     Responsive.(to_class (at_breakpoint `Md (Typography.(to_class (font_size `Base)))));

     

       95
       95
       -
                     Color.text (Color.make `Gray ~variant:`V600 ());

     

       96
       96
       -
                   ])] [

     

       97
       97
       -
                     El.txt "This text scales: small on mobile, base on tablet, and larger on desktop. The heading above also scales responsively."

     

       63
       63
       +
                   (* Card 2 *)

     

       64
       64
       +
                   card [

     

       65
       65
       +
                     h3 ~styles:[

     

       66
       66
       +
                       font_size `Lg;

     

       67
       67
       +
                       font_weight `Semibold;

     

       68
       68
       +
                       text_color (green 600);

     

       69
       69
       +
                       margin_bottom (rem 1.0);

     

       70
       70
       +
                     ] [txt "Card 2"];

     

       71
       71
       +
                     p ~styles:[text_color (gray 600)] [

     

       72
       72
       +
                       txt "Responsive design ensures optimal viewing across all devices."

     

       73
       73
       +
                     ];

     

       74
       74
       +
                   ];

     

       75
       75
       +
                   

     

       76
       76
       +
                   (* Card 3 *)

     

       77
       77
       +
                   card [

     

       78
       78
       +
                     h3 ~styles:[

     

       79
       79
       +
                       font_size `Lg;

     

       80
       80
       +
                       font_weight `Semibold;

     

       81
       81
       +
                       text_color (purple 600);

     

       82
       82
       +
                       margin_bottom (rem 1.0);

     

       83
       83
       +
                     ] [txt "Card 3"];

     

       84
       84
       +
                     p ~styles:[text_color (gray 600)] [

     

       85
       85
       +
                       txt "Mobile-first approach with progressive enhancement."

     

       86
       86
       +
                     ];

     

       98
       87
        
                   ];

     

       99
       88
        
                 ];

     

       100
       89
        
               ];

     

       101
       90
        
               

     

       102
       102
       -
               (* Show/Hide Elements *)

     

       103
       103
       -
               El.section ~at:[At.class' "mb-8"] [

     

       104
       104
       -
                 El.h2 ~at:[classes_attr (Css.tw [

     

       105
       105
       -
                   Typography.(to_class (font_size `Xl));

     

       106
       106
       -
                   Typography.(to_class (font_weight `Semibold));

     

       107
       107
       -
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       108
       108
       -
                 ]); At.class' "mb-6"] [El.txt "Responsive Visibility"];

     

       91
       91
       +
               (* Responsive navigation *)

     

       92
       92
       +
               section ~styles:[margin_bottom (rem 3.0)] [

     

       93
       93
       +
                 h2 ~styles:[

     

       94
       94
       +
                   font_size `Xl;

     

       95
       95
       +
                   font_weight `Semibold;

     

       96
       96
       +
                   text_color (gray 700);

     

       97
       97
       +
                   margin_bottom (rem 2.0);

     

       98
       98
       +
                 ] [txt "Responsive Navigation"];

     

       109
       99
        
                 

     

       110
       110
       -
                 El.div ~at:[classes_attr (Css.tw [

     

       111
       111
       -
                   Display.flex;

     

       112
       112
       -
                   Flexbox.(to_class (direction `Col));

     

       113
       113
       -
                   Responsive.(to_class (at_breakpoint `Md (Flexbox.(to_class (direction `Row)))));

     

       114
       114
       -
                   Spacing.(to_class (gap `All (Size.rem 1.0)));

     

       115
       115
       -
                 ])] [

     

       116
       116
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       117
       117
       -
                     Color.bg (Color.make `Blue ~variant:`V100 ());

     

       118
       118
       -
                     Spacing.(to_class (p (Size.rem 1.5)));

     

       119
       119
       -
                   ]); At.class' "rounded-lg text-center"] [

     

       120
       120
       -
                     El.txt "Always visible"

     

       121
       121
       -
                   ];

     

       122
       122
       -
                   

     

       123
       123
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       124
       124
       -
                     Color.bg (Color.make `Green ~variant:`V100 ());

     

       125
       125
       -
                     Spacing.(to_class (p (Size.rem 1.5)));

     

       126
       126
       -
                     Display.hidden;

     

       127
       127
       -
                     Responsive.(to_class (at_breakpoint `Md Display.block));

     

       128
       128
       -
                   ]); At.class' "rounded-lg text-center"] [

     

       129
       129
       -
                     El.txt "Hidden on mobile, visible on md+"

     

       130
       130
       -
                   ];

     

       131
       131
       -
                   

     

       132
       132
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       133
       133
       -
                     Color.bg (Color.make `Purple ~variant:`V100 ());

     

       134
       134
       -
                     Spacing.(to_class (p (Size.rem 1.5)));

     

       135
       135
       -
                     Display.hidden;

     

       136
       136
       -
                     Responsive.(to_class (at_breakpoint `Lg Display.block));

     

       137
       137
       -
                   ]); At.class' "rounded-lg text-center"] [

     

       138
       138
       -
                     El.txt "Only visible on lg+"

     

       100
       100
       +
                 nav ~styles:[

     

       101
       101
       +
                   bg_color (Tailwind.Color.white);

     

       102
       102
       +
                   padding (rem 1.0);

     

       103
       103
       +
                   rounded `Lg;

     

       104
       104
       +
                   shadow `Md;

     

       105
       105
       +
                 ] [

     

       106
       106
       +
                   div ~styles:[

     

       107
       107
       +
                     flex;

     

       108
       108
       +
                     flex_col;

     

       109
       109
       +
                   ] [

     

       110
       110
       +
                     a ~styles:[

     

       111
       111
       +
                       padding (rem 0.75);

     

       112
       112
       +
                       text_color (gray 700);

     

       113
       113
       +
                       font_weight `Medium;

     

       114
       114
       +
                     ] ~href:"#" [txt "Home"];

     

       115
       115
       +
                     

     

       116
       116
       +
                     a ~styles:[

     

       117
       117
       +
                       padding (rem 0.75);

     

       118
       118
       +
                       text_color (gray 700);

     

       119
       119
       +
                       font_weight `Medium;

     

       120
       120
       +
                     ] ~href:"#" [txt "About"];

     

       121
       121
       +
                     

     

       122
       122
       +
                     a ~styles:[

     

       123
       123
       +
                       padding (rem 0.75);

     

       124
       124
       +
                       text_color (gray 700);

     

       125
       125
       +
                       font_weight `Medium;

     

       126
       126
       +
                     ] ~href:"#" [txt "Services"];

     

       127
       127
       +
                     

     

       128
       128
       +
                     a ~styles:[

     

       129
       129
       +
                       padding (rem 0.75);

     

       130
       130
       +
                       text_color (gray 700);

     

       131
       131
       +
                       font_weight `Medium;

     

       132
       132
       +
                     ] ~href:"#" [txt "Contact"];

     

       139
       133
        
                   ];

     

       140
       134
        
                 ];

     

       141
       135
        
               ];

     

       142
       136
        
               

     

       143
       143
       -
               (* Responsive Spacing *)

     

       144
       144
       -
               El.section [

     

       145
       145
       -
                 El.h2 ~at:[classes_attr (Css.tw [

     

       146
       146
       -
                   Typography.(to_class (font_size `Xl));

     

       147
       147
       -
                   Typography.(to_class (font_weight `Semibold));

     

       148
       148
       -
                   Color.text (Color.make `Gray ~variant:`V700 ());

     

       149
       149
       -
                 ]); At.class' "mb-6"] [El.txt "Responsive Spacing"];

     

       137
       137
       +
               (* Responsive text *)

     

       138
       138
       +
               section [

     

       139
       139
       +
                 h2 ~styles:[

     

       140
       140
       +
                   font_size `Xl;

     

       141
       141
       +
                   font_weight `Semibold;

     

       142
       142
       +
                   text_color (gray 700);

     

       143
       143
       +
                   margin_bottom (rem 2.0);

     

       144
       144
       +
                 ] [txt "Responsive Typography"];

     

       150
       145
        
                 

     

       151
       151
       -
                 El.div ~at:[classes_attr (Css.tw [

     

       152
       152
       -
                   Color.bg (Color.make `Gray ~variant:`V100 ());

     

       153
       153
       -
                   Spacing.(to_class (p (Size.rem 1.0)));

     

       154
       154
       -
                   Responsive.(to_class (at_breakpoint `Md (Spacing.(to_class (p (Size.rem 1.5))))));

     

       155
       155
       -
                   Responsive.(to_class (at_breakpoint `Lg (Spacing.(to_class (p (Size.rem 2.0))))));

     

       156
       156
       -
                 ]); At.class' "rounded-lg"] [

     

       157
       157
       -
                   El.div ~at:[classes_attr (Css.tw [

     

       158
       158
       -
                     Color.bg Color.white;

     

       159
       159
       -
                     Spacing.(to_class (p (Size.rem 1.0)));

     

       160
       160
       -
                   ]); At.class' "rounded"] [

     

       161
       161
       -
                     El.p [El.txt "This container has responsive padding:"];

     

       162
       162
       -
                     El.ul [

     

       163
       163
       -
                       El.li [El.txt "p-4 (1rem) on mobile"];

     

       164
       164
       -
                       El.li [El.txt "md:p-6 (1.5rem) on tablet"];

     

       165
       165
       -
                       El.li [El.txt "lg:p-8 (2rem) on desktop"];

     

       166
       166
       -
                     ];

     

       167
       167
       -
                   ];

     

       146
       146
       +
                 card [

     

       147
       147
       +
                   h3 ~styles:[

     

       148
       148
       +
                     font_size `Lg;

     

       149
       149
       +
                     font_weight `Semibold;

     

       150
       150
       +
                     text_color (gray 800);

     

       151
       151
       +
                     margin_bottom (rem 1.0);

     

       152
       152
       +
                   ] [txt "Adaptive Text Sizes"];

     

       153
       153
       +
                   

     

       154
       154
       +
                   p ~styles:[

     

       155
       155
       +
                     font_size `Base;

     

       156
       156
       +
                     text_color (gray 600);

     

       157
       157
       +
                     margin_bottom (rem 1.0);

     

       158
       158
       +
                   ] [txt "This text adapts its size based on the viewport width."];

     

       159
       159
       +
                   

     

       160
       160
       +
                   p ~styles:[

     

       161
       161
       +
                     font_size `Sm;

     

       162
       162
       +
                     text_color (gray 500);

     

       163
       163
       +
                   ] [txt "Smaller supporting text that remains readable on all devices."];

     

       168
       164
        
                 ];

     

       169
       165
        
               ];

     

       170
       166
        
             ];

     

       171
       167
        
           ];

     

       172
       168
        
         ] in

     

       173
       173
       -
         

     

       174
       174
       -
         let html_string = El.to_string ~doctype:true html_doc in

     

       175
       175
       -
         print_string html_string

     

       169
       169
       +
         html

     

       176
       170
        
       

     

       177
       177
       -
       let () = create_responsive_demo ()
     

       171
       171
       +
       let () =

     

       172
       172
       +
         let html = create_responsive_demo () in

     

       173
       173
       +
         print_string (El.to_string ~doctype:true html)

-69

examples/type_safety_test.ml

···

       1
       1
       -
       (* Type Safety Test - Demonstrating GADT constraints *)

     

       2
       2
       -
       

     

       3
       3
       -
       open Htmlit

     

       4
       4
       -
       open Tailwind_html

     

       5
       5
       -
       

     

       6
       6
       -
       (* Valid usage - each property category appears at most once *)

     

       7
       7
       -
       let valid_styles = [

     

       8
       8
       -
         text_color (blue 600);       (* ✅ Text color *)

     

       9
       9
       -
         bg_color (gray 100);         (* ✅ Background color *)  

     

       10
       10
       -
         font_size `Xl2;              (* ✅ Font size *)

     

       11
       11
       -
         font_weight `Bold;           (* ✅ Font weight *)

     

       12
       12
       -
         margin_bottom (rem 1.0);     (* ✅ Margin *)

     

       13
       13
       -
         padding (rem 1.5);           (* ✅ Padding *)

     

       14
       14
       -
         rounded `Lg;                 (* ✅ Border radius *)

     

       15
       15
       -
         shadow `Md;                  (* ✅ Shadow *)

     

       16
       16
       -
       ]

     

       17
       17
       -
       

     

       18
       18
       -
       (* This would cause a type error if uncommented: *)

     

       19
       19
       -
       (* let invalid_styles = [

     

       20
       20
       -
         text_color (blue 600);

     

       21
       21
       -
         text_color (red 500);  (* ❌ Cannot have two text colors! *)

     

       22
       22
       -
       ] *)

     

       23
       23
       -
       

     

       24
       24
       -
       let create_type_safety_demo () =

     

       25
       25
       -
         let html = El.html [

     

       26
       26
       -
           El.head [

     

       27
       27
       -
             El.meta ~at:[At.charset "utf-8"] ();

     

       28
       28
       -
             El.title [txt "Type Safety Test"];

     

       29
       29
       -
           ];

     

       30
       30
       -
           

     

       31
       31
       -
           El.body [

     

       32
       32
       -
             h1_styled ~styles:valid_styles [

     

       33
       33
       -
               txt "✅ Type-Safe Tailwind with GADTs"

     

       34
       34
       -
             ];

     

       35
       35
       -
             

     

       36
       36
       -
             p_gadt ~styles:[

     

       37
       37
       -
               text_color (gray 600);

     

       38
       38
       -
               font_size `Base;

     

       39
       39
       -
               margin_bottom (rem 2.0);

     

       40
       40
       -
             ] [

     

       41
       41
       -
               txt "This demonstrates that each property category can only appear once, ";

     

       42
       42
       -
               txt "preventing styling conflicts at compile time!"

     

       43
       43
       -
             ];

     

       44
       44
       -
             

     

       45
       45
       -
             div_styled ~styles:[

     

       46
       46
       -
               bg_color (green 50);

     

       47
       47
       -
               padding (rem 2.0);

     

       48
       48
       -
               rounded `Md;

     

       49
       49
       -
             ] [

     

       50
       50
       -
               h2_styled ~styles:[

     

       51
       51
       -
                 text_color (green 700);

     

       52
       52
       -
                 font_weight `Semibold;

     

       53
       53
       -
                 margin_bottom (rem 1.0);

     

       54
       54
       -
               ] [txt "🎯 Type Safety Features"];

     

       55
       55
       -
               

     

       56
       56
       -
               El.ul [

     

       57
       57
       -
                 El.li [txt "✅ Each property category (color, size, spacing) appears at most once"];

     

       58
       58
       -
                 El.li [txt "✅ Compile-time prevention of styling conflicts"];

     

       59
       59
       -
                 El.li [txt "✅ Clean, readable heterogeneous list syntax"];

     

       60
       60
       -
                 El.li [txt "✅ Full type inference and autocomplete support"];

     

       61
       61
       -
               ];

     

       62
       62
       -
             ];

     

       63
       63
       -
           ];

     

       64
       64
       -
         ] in

     

       65
       65
       -
         html

     

       66
       66
       -
       

     

       67
       67
       -
       let () =

     

       68
       68
       -
         let html = create_type_safety_demo () in

     

       69
       69
       -
         print_string (El.to_string ~doctype:true html)

+25 -2

lib/tailwind-html/form.ml

···

       245
       245
        
               El.input ~at:(At.type' "checkbox" :: all_attrs) ()

     

       246
       246
        
         in

     

       247
       247
        
         

     

       248
       248
       -
         (* Wrap in label if provided *)

     

       249
       249
       -
         match field.label with

     

       248
       248
       +
         let label_element = match field.label with

     

       250
       249
        
           | Some label_text ->

     

       251
       250
        
               El.label [

     

       252
       251
        
                 El.txt label_text;

     

       253
       252
        
                 input_element;

     

       254
       253
        
               ]

     

       255
       254
        
           | None -> input_element

     

       255
       255
       +
         in

     

       256
       256
       +
         

     

       257
       257
       +
         (* Add helper and error text if provided *)

     

       258
       258
       +
         let help_elements = List.filter_map (fun x -> x) [

     

       259
       259
       +
           Option.map (fun text ->

     

       260
       260
       +
             El.p ~at:[classes_attr (Tailwind.Css.tw [

     

       261
       261
       +
               Tailwind.Typography.(to_class (font_size `Sm));

     

       262
       262
       +
               Tailwind.Color.text (Tailwind.Color.make `Gray ~variant:`V600 ());

     

       263
       263
       +
               Tailwind.Spacing.(to_class (mt (Tailwind.Size.rem 0.25)));

     

       264
       264
       +
             ])] [El.txt text]

     

       265
       265
       +
           ) field.helper_text;

     

       266
       266
       +
           Option.map (fun text ->

     

       267
       267
       +
             El.p ~at:[classes_attr (Tailwind.Css.tw [

     

       268
       268
       +
               Tailwind.Typography.(to_class (font_size `Sm));

     

       269
       269
       +
               Tailwind.Color.text (Tailwind.Color.make `Red ~variant:`V600 ());

     

       270
       270
       +
               Tailwind.Spacing.(to_class (mt (Tailwind.Size.rem 0.25)));

     

       271
       271
       +
             ])] [El.txt text]

     

       272
       272
       +
           ) field.error_text;

     

       273
       273
       +
         ] in

     

       274
       274
       +
         

     

       275
       275
       +
         (* Wrap everything in a container *)

     

       276
       276
       +
         match help_elements with

     

       277
       277
       +
           | [] -> label_element

     

       278
       278
       +
           | _ -> El.div ([label_element] @ help_elements)

     

       256
       279
        
       

     

       257
       280
        
       let group ?classes ~fields () =

     

       258
       281
        
         let group_classes = Tailwind.Css.tw [

+18

lib/tailwind-html/tailwind_html.ml

···

       70
       70
        
         | Max_width : Tailwind.Size.t -> [`Width] tw_prop

     

       71
       71
        
         | Min_height : Tailwind.Size.t -> [`Height] tw_prop

     

       72
       72
        
         | Display_flex : [`Layout] tw_prop

     

       73
       73
       +
         | Display_grid : [`Layout] tw_prop

     

       73
       74
        
         | Display_block : [`Layout] tw_prop

     

       74
       75
        
         | Display_inline : [`Layout] tw_prop

     

       75
       76
        
         | Display_inline_block : [`Layout] tw_prop

     

       77
       77
       +
         | Grid_cols : int -> [`Grid] tw_prop

     

       78
       78
       +
         | Grid_rows : int -> [`Grid] tw_prop

     

       79
       79
       +
         | Gap : Tailwind.Size.t -> [`Grid] tw_prop

     

       80
       80
       +
         | Gap_x : Tailwind.Size.t -> [`Grid] tw_prop

     

       81
       81
       +
         | Gap_y : Tailwind.Size.t -> [`Grid] tw_prop

     

       76
       82
        
         | Items_center : [`Layout] tw_prop

     

       77
       83
        
         | Items_start : [`Layout] tw_prop

     

       78
       84
        
         | Items_end : [`Layout] tw_prop

     
···

       117
       123
        
           | Max_width size -> Tailwind.Layout.(to_class (max_width size))

     

       118
       124
        
           | Min_height size -> Tailwind.Layout.(to_class (min_height size))

     

       119
       125
        
           | Display_flex -> Tailwind.Display.flex

     

       126
       126
       +
           | Display_grid -> Tailwind.Display.grid

     

       120
       127
        
           | Display_block -> Tailwind.Display.block

     

       121
       128
        
           | Display_inline -> Tailwind.Display.inline

     

       122
       129
        
           | Display_inline_block -> Tailwind.Display.inline_block

     

       130
       130
       +
           | Grid_cols n -> Tailwind.Grid.(to_class (template_cols (`Cols n)))

     

       131
       131
       +
           | Grid_rows n -> Tailwind.Grid.(to_class (template_rows (`Rows n)))

     

       132
       132
       +
           | Gap size -> Tailwind.Spacing.(to_class (gap `All size))

     

       133
       133
       +
           | Gap_x size -> Tailwind.Spacing.(to_class (gap `X size))

     

       134
       134
       +
           | Gap_y size -> Tailwind.Spacing.(to_class (gap `Y size))

     

       123
       135
        
           | Items_center -> Tailwind.Flexbox.(to_class (align_items `Center))

     

       124
       136
        
           | Items_start -> Tailwind.Flexbox.(to_class (align_items `Start))

     

       125
       137
        
           | Items_end -> Tailwind.Flexbox.(to_class (align_items `End))

     
···

       177
       189
        
       let max_width s = Any (Max_width s)

     

       178
       190
        
       let min_height s = Any (Min_height s)

     

       179
       191
        
       let flex = Any Display_flex

     

       192
       192
       +
       let grid = Any Display_grid

     

       180
       193
        
       let block = Any Display_block

     

       181
       194
        
       let inline = Any Display_inline

     

       182
       195
        
       let inline_block = Any Display_inline_block

     

       196
       196
       +
       let grid_cols n = Any (Grid_cols n)

     

       197
       197
       +
       let grid_rows n = Any (Grid_rows n)

     

       198
       198
       +
       let gap s = Any (Gap s)

     

       199
       199
       +
       let gap_x s = Any (Gap_x s)

     

       200
       200
       +
       let gap_y s = Any (Gap_y s)

     

       183
       201
        
       let items_center = Any Items_center

     

       184
       202
        
       let items_start = Any Items_start

     

       185
       203
        
       let items_end = Any Items_end

+12

lib/tailwind-html/tailwind_html.mli

···

       42
       42
        
         | Max_width : Tailwind.Size.t -> [`Width] tw_prop

     

       43
       43
        
         | Min_height : Tailwind.Size.t -> [`Height] tw_prop

     

       44
       44
        
         | Display_flex : [`Layout] tw_prop

     

       45
       45
       +
         | Display_grid : [`Layout] tw_prop

     

       45
       46
        
         | Display_block : [`Layout] tw_prop

     

       46
       47
        
         | Display_inline : [`Layout] tw_prop

     

       47
       48
        
         | Display_inline_block : [`Layout] tw_prop

     

       49
       49
       +
         | Grid_cols : int -> [`Grid] tw_prop

     

       50
       50
       +
         | Grid_rows : int -> [`Grid] tw_prop

     

       51
       51
       +
         | Gap : Tailwind.Size.t -> [`Grid] tw_prop

     

       52
       52
       +
         | Gap_x : Tailwind.Size.t -> [`Grid] tw_prop

     

       53
       53
       +
         | Gap_y : Tailwind.Size.t -> [`Grid] tw_prop

     

       48
       54
        
         | Items_center : [`Layout] tw_prop

     

       49
       55
        
         | Items_start : [`Layout] tw_prop

     

       50
       56
        
         | Items_end : [`Layout] tw_prop

     
···

       93
       99
        
       val max_width : Tailwind.Size.t -> tw_list_item

     

       94
       100
        
       val min_height : Tailwind.Size.t -> tw_list_item

     

       95
       101
        
       val flex : tw_list_item

     

       102
       102
       +
       val grid : tw_list_item

     

       96
       103
        
       val block : tw_list_item

     

       97
       104
        
       val inline : tw_list_item

     

       98
       105
        
       val inline_block : tw_list_item

     

       106
       106
       +
       val grid_cols : int -> tw_list_item

     

       107
       107
       +
       val grid_rows : int -> tw_list_item

     

       108
       108
       +
       val gap : Tailwind.Size.t -> tw_list_item

     

       109
       109
       +
       val gap_x : Tailwind.Size.t -> tw_list_item

     

       110
       110
       +
       val gap_y : Tailwind.Size.t -> tw_list_item

     

       99
       111
        
       val items_center : tw_list_item

     

       100
       112
        
       val items_start : tw_list_item

     

       101
       113
        
       val items_end : tw_list_item

+6 -9

tailwind-html.opam

···

       1
       1
        
       # This file is generated by dune, edit dune-project instead

     

       2
       2
        
       opam-version: "2.0"

     

       3
       3
        
       synopsis: "Tailwind CSS integration with Htmlit"

     

       4
       4
       -
       description: "High-level component library using Tailwind CSS with Htmlit"

     

       5
       5
       -
       maintainer: ["Your Name"]

     

       6
       6
       -
       authors: ["Your Name"]

     

       7
       7
       -
       license: "MIT"

     

       8
       8
       -
       homepage: "https://github.com/yourusername/tailwind-ocaml"

     

       9
       9
       -
       doc: "https://yourusername.github.io/tailwind-ocaml/"

     

       10
       10
       -
       bug-reports: "https://github.com/yourusername/tailwind-ocaml/issues"

     

       4
       4
       +
       description: "Html combinators for Tailwind CSS"

     

       5
       5
       +
       maintainer: ["Anil Madhavapeddy"]

     

       6
       6
       +
       authors: ["Anil Madhavapeddy"]

     

       7
       7
       +
       license: "ISC"

     

       11
       8
        
       depends: [

     

       9
       9
       +
         "dune" {>= "3.18"}

     

       12
       10
        
         "ocaml"

     

       13
       13
       -
         "dune" {>= "3.0" & >= "3.0"}

     

       14
       11
        
         "tailwind"

     

       15
       12
        
         "htmlit" {>= "0.1.0"}

     

       16
       13
        
         "alcotest" {with-test}

     
···

       31
       28
        
           "@doc" {with-doc}

     

       32
       29
        
         ]

     

       33
       30
        
       ]

     

       34
       34
       -
       dev-repo: "git+https://github.com/yourusername/tailwind-ocaml.git"

     

       31
       31
       +
       x-maintenance-intent: ["(latest)"]

-1422

tailwind-llms.txt

···

       1
       1
       -
       # Tailwind CSS v4 LLM Development Guidelines

     

       2
       2
       -
       

     

       3
       3
       -
       You are an expert web developer specializing in Tailwind CSS v4. Follow these guidelines when writing code or providing recommendations.

     

       4
       4
       -
       

     

       5
       5
       -
       ## Core Principles

     

       6
       6
       -
       

     

       7
       7
       -
       Tailwind CSS v4 is a complete rewrite with a new high-performance Oxide engine, CSS-first configuration, and modern web platform features. It requires modern browsers (Safari 16.4+, Chrome 111+, Firefox 128+) and is NOT compatible with older browsers.

     

       8
       8
       -
       

     

       9
       9
       -
       ## Installation & Setup

     

       10
       10
       -
       

     

       11
       11
       -
       ### Basic Setup

     

       12
       12
       -
       ```css

     

       13
       13
       -
       /* styles.css */

     

       14
       14
       -
       @import "tailwindcss";

     

       15
       15
       -
       ```

     

       16
       16
       -
       

     

       17
       17
       -
       ### With Vite

     

       18
       18
       -
       ```js

     

       19
       19
       -
       // vite.config.js

     

       20
       20
       -
       import { defineConfig } from 'vite'

     

       21
       21
       -
       import tailwindcss from '@tailwindcss/vite'

     

       22
       22
       -
       

     

       23
       23
       -
       export default defineConfig({

     

       24
       24
       -
         plugins: [tailwindcss()]

     

       25
       25
       -
       })

     

       26
       26
       -
       ```

     

       27
       27
       -
       

     

       28
       28
       -
       ### Package Installation

     

       29
       29
       -
       ```bash

     

       30
       30
       -
       npm install tailwindcss@next @tailwindcss/vite@next

     

       31
       31
       -
       ```

     

       32
       32
       -
       

     

       33
       33
       -
       ## Configuration (CSS-First)

     

       34
       34
       -
       

     

       35
       35
       -
       **IMPORTANT**: v4 uses CSS-first configuration, NOT JavaScript config files. Use the `@theme` directive in your CSS file:

     

       36
       36
       -
       

     

       37
       37
       -
       ```css

     

       38
       38
       -
       @import "tailwindcss";

     

       39
       39
       -
       

     

       40
       40
       -
       @theme {

     

       41
       41
       -
         /* Colors (use OKLCH for wider gamut) */

     

       42
       42
       -
         --color-brand-50: oklch(0.98 0.01 142.12);

     

       43
       43
       -
         --color-brand-500: oklch(0.64 0.15 142.12);

     

       44
       44
       -
         --color-brand-900: oklch(0.25 0.08 142.12);

     

       45
       45
       -
         

     

       46
       46
       -
         /* Typography */

     

       47
       47
       -
         --font-display: "Satoshi", "Inter", sans-serif;

     

       48
       48
       -
         --font-body: "Inter", system-ui, sans-serif;

     

       49
       49
       -
         

     

       50
       50
       -
         /* Spacing */

     

       51
       51
       -
         --spacing-18: 4.5rem;

     

       52
       52
       -
         --spacing-72: 18rem;

     

       53
       53
       -
         

     

       54
       54
       -
         /* Breakpoints */

     

       55
       55
       -
         --breakpoint-3xl: 1920px;

     

       56
       56
       -
         --breakpoint-4xl: 2560px;

     

       57
       57
       -
         

     

       58
       58
       -
         /* Shadows */

     

       59
       59
       -
         --shadow-brutal: 8px 8px 0px 0px #000;

     

       60
       60
       -
         

     

       61
       61
       -
         /* Animation */

     

       62
       62
       -
         --animate-wiggle: wiggle 1s ease-in-out infinite;

     

       63
       63
       -
       }

     

       64
       64
       -
       

     

       65
       65
       -
       /* Define keyframes for animations */

     

       66
       66
       -
       @keyframes wiggle {

     

       67
       67
       -
         0%, 100% { transform: rotate(-3deg); }

     

       68
       68
       -
         50% { transform: rotate(3deg); }

     

       69
       69
       -
       }

     

       70
       70
       -
       ```

     

       71
       71
       -
       

     

       72
       72
       -
       ### Legacy Config Support (if needed)

     

       73
       73
       -
       ```css

     

       74
       74
       -
       @import "tailwindcss";

     

       75
       75
       -
       @config "./tailwind.config.js";

     

       76
       76
       -
       ```

     

       77
       77
       -
       

     

       78
       78
       -
       ## Breaking Changes from v3

     

       79
       79
       -
       

     

       80
       80
       -
       ### Import Changes

     

       81
       81
       -
       - ❌ `@tailwind base; @tailwind components; @tailwind utilities;`

     

       82
       82
       -
       - ✅ `@import "tailwindcss";`

     

       83
       83
       -
       

     

       84
       84
       -
       ### Removed Utilities

     

       85
       85
       -
       - `text-opacity-*` → Use `text-{color}/{opacity}` instead

     

       86
       86
       -
       - `bg-opacity-*` → Use `bg-{color}/{opacity}` instead

     

       87
       87
       -
       - `border-opacity-*` → Use `border-{color}/{opacity}` instead

     

       88
       88
       -
       - `flex-grow-*` → Use `grow-*`

     

       89
       89
       -
       - `flex-shrink-*` → Use `shrink-*`

     

       90
       90
       -
       - `decoration-slice` → Use `box-decoration-slice`

     

       91
       91
       -
       

     

       92
       92
       -
       ### Renamed Utilities

     

       93
       93
       -
       - `shadow-sm` → `shadow-xs`

     

       94
       94
       -
       - `rounded-sm` → `rounded-xs`

     

       95
       95
       -
       - `blur-sm` → `blur-xs`

     

       96
       96
       -
       - `bg-gradient-*` → `bg-linear-*`

     

       97
       97
       -
       

     

       98
       98
       -
       ### Default Behavior Changes

     

       99
       99
       -
       - **Border**: No longer defaults to gray-200, uses `currentColor`

     

       100
       100
       -
       - **Ring**: Changed from 3px blue to 1px `currentColor`

     

       101
       101
       -
       - **Outline**: Now 1px by default for consistency

     

       102
       102
       -
       

     

       103
       103
       -
       ## Custom Utilities

     

       104
       104
       -
       

     

       105
       105
       -
       Use the `@utility` directive instead of `@layer utilities`:

     

       106
       106
       -
       

     

       107
       107
       -
       ```css

     

       108
       108
       -
       @utility btn {

     

       109
       109
       -
         padding: 0.5rem 1rem;

     

       110
       110
       -
         border-radius: 0.375rem;

     

       111
       111
       -
         font-weight: 500;

     

       112
       112
       -
         transition: all 0.2s;

     

       113
       113
       -
       }

     

       114
       114
       -
       

     

       115
       115
       -
       @utility btn-primary {

     

       116
       116
       -
         background: var(--color-blue-600);

     

       117
       117
       -
         color: white;

     

       118
       118
       -
         

     

       119
       119
       -
         &:hover {

     

       120
       120
       -
           background: var(--color-blue-700);

     

       121
       121
       -
         }

     

       122
       122
       -
       }

     

       123
       123
       -
       

     

       124
       124
       -
       /* Functional utilities with parameters */

     

       125
       125
       -
       @utility margin-auto {

     

       126
       126
       -
         margin: auto;

     

       127
       127
       -
       }

     

       128
       128
       -
       

     

       129
       129
       -
       @utility flex-center {

     

       130
       130
       -
         display: flex;

     

       131
       131
       -
         justify-content: center;

     

       132
       132
       -
         align-items: center;

     

       133
       133
       -
       }

     

       134
       134
       -
       ```

     

       135
       135
       -
       

     

       136
       136
       -
       ## Custom Variants

     

       137
       137
       -
       

     

       138
       138
       -
       ```css

     

       139
       139
       -
       @custom-variant theme-dark {

     

       140
       140
       -
         &:where([data-theme="dark"] *) {

     

       141
       141
       -
           @slot;

     

       142
       142
       -
         }

     

       143
       143
       -
       }

     

       144
       144
       -
       

     

       145
       145
       -
       @custom-variant any-hover {

     

       146
       146
       -
         @media (any-hover: hover) {

     

       147
       147
       -
           &:hover {

     

       148
       148
       -
             @slot;

     

       149
       149
       -
           }

     

       150
       150
       -
         }

     

       151
       151
       -
       }

     

       152
       152
       -
       ```

     

       153
       153
       -
       

     

       154
       154
       -
       ## New Features in v4

     

       155
       155
       -
       

     

       156
       156
       -
       ### Container Queries (Built-in)

     

       157
       157
       -
       ```html

     

       158
       158
       -
       <div class="@container">

     

       159
       159
       -
         <div class="grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-3">

     

       160
       160
       -
           <div class="@min-w-64:text-lg @max-w-96:bg-blue-100">

     

       161
       161
       -
             Responsive to container size

     

       162
       162
       -
           </div>

     

       163
       163
       -
         </div>

     

       164
       164
       -
       </div>

     

       165
       165
       -
       ```

     

       166
       166
       -
       

     

       167
       167
       -
       ### 3D Transforms

     

       168
       168
       -
       ```html

     

       169
       169
       -
       <div class="perspective-1000">

     

       170
       170
       -
         <div class="rotate-x-45 rotate-y-12 scale-z-110 translate-z-24 transform-3d">

     

       171
       171
       -
           3D transformed element

     

       172
       172
       -
         </div>

     

       173
       173
       -
       </div>

     

       174
       174
       -
       ```

     

       175
       175
       -
       

     

       176
       176
       -
       ### Enhanced Gradients

     

       177
       177
       -
       ```html

     

       178
       178
       -
       <!-- Linear gradients with angles -->

     

       179
       179
       -
       <div class="bg-linear-45 from-blue-500 to-purple-500"></div>

     

       180
       180
       -
       

     

       181
       181
       -
       <!-- Radial gradients -->

     

       182
       182
       -
       <div class="bg-radial from-red-500 via-yellow-500 to-orange-500"></div>

     

       183
       183
       -
       

     

       184
       184
       -
       <!-- Conic gradients -->

     

       185
       185
       -
       <div class="bg-conic from-pink-500 via-blue-500 to-green-500"></div>

     

       186
       186
       -
       ```

     

       187
       187
       -
       

     

       188
       188
       -
       ### Text Shadows

     

       189
       189
       -
       ```html

     

       190
       190
       -
       <h1 class="text-shadow-lg text-shadow-blue-500/50">

     

       191
       191
       -
         Text with colored shadow

     

       192
       192
       -
       </h1>

     

       193
       193
       -
       ```

     

       194
       194
       -
       

     

       195
       195
       -
       ### Mask Utilities

     

       196
       196
       -
       ```html

     

       197
       197
       -
       <div class="mask-radial mask-cover">

     

       198
       198
       -
         <img src="image.jpg" alt="Masked image" />

     

       199
       199
       -
       </div>

     

       200
       200
       -
       ```

     

       201
       201
       -
       

     

       202
       202
       -
       ### New Variants

     

       203
       203
       -
       

     

       204
       204
       -
       #### @starting-style (for animations)

     

       205
       205
       -
       ```html

     

       206
       206
       -
       <div class="opacity-100 @starting-style:opacity-0 transition-opacity">

     

       207
       207
       -
         Animates in on mount

     

       208
       208
       -
       </div>

     

       209
       209
       -
       ```

     

       210
       210
       -
       

     

       211
       211
       -
       #### not-* variant

     

       212
       212
       -
       ```html

     

       213
       213
       -
       <div class="bg-blue-500 not-hover:bg-gray-500">

     

       214
       214
       -
         Blue except when hovering

     

       215
       215
       -
       </div>

     

       216
       216
       -
       ```

     

       217
       217
       -
       

     

       218
       218
       -
       #### nth-* variants

     

       219
       219
       -
       ```html

     

       220
       220
       -
       <div class="nth-2:bg-red-500 nth-odd:bg-blue-500">

     

       221
       221
       -
         Nth child styling

     

       222
       222
       -
       </div>

     

       223
       223
       -
       ```

     

       224
       224
       -
       

     

       225
       225
       -
       #### inert variant

     

       226
       226
       -
       ```html

     

       227
       227
       -
       <div class="inert:opacity-50 inert:pointer-events-none">

     

       228
       228
       -
         Styled when inert

     

       229
       229
       -
       </div>

     

       230
       230
       -
       ```

     

       231
       231
       -
       

     

       232
       232
       -
       #### in-* variant (like group-* but without group class)

     

       233
       233
       -
       ```html

     

       234
       234
       -
       <article>

     

       235
       235
       -
         <h2 class="in-article:text-lg">Styled when inside article</h2>

     

       236
       236
       -
       </article>

     

       237
       237
       -
       ```

     

       238
       238
       -
       

     

       239
       239
       -
       ### Modern Color System

     

       240
       240
       -
       v4 uses OKLCH color space for wider gamut support:

     

       241
       241
       -
       

     

       242
       242
       -
       ```css

     

       243
       243
       -
       @theme {

     

       244
       244
       -
         --color-brand-primary: oklch(0.7 0.15 180);

     

       245
       245
       -
         --color-brand-accent: oklch(0.8 0.2 45);

     

       246
       246
       -
       }

     

       247
       247
       -
       ```

     

       248
       248
       -
       

     

       249
       249
       -
       ## Multi-Theme Strategy

     

       250
       250
       -
       

     

       251
       251
       -
       ```css

     

       252
       252
       -
       @import "tailwindcss";

     

       253
       253
       -
       

     

       254
       254
       -
       @theme {

     

       255
       255
       -
         --color-primary: oklch(0.5 0.2 240);

     

       256
       256
       -
         --color-background: oklch(0.98 0.01 240);

     

       257
       257
       -
       }

     

       258
       258
       -
       

     

       259
       259
       -
       @layer base {

     

       260
       260
       -
         [data-theme='dark'] {

     

       261
       261
       -
           --color-primary: oklch(0.7 0.2 240);

     

       262
       262
       -
           --color-background: oklch(0.15 0.02 240);

     

       263
       263
       -
         }

     

       264
       264
       -
         

     

       265
       265
       -
         [data-theme='high-contrast'] {

     

       266
       266
       -
           --color-primary: oklch(0.0 0 0);

     

       267
       267
       -
           --color-background: oklch(1.0 0 0);

     

       268
       268
       -
         }

     

       269
       269
       -
       }

     

       270
       270
       -
       ```

     

       271
       271
       -
       

     

       272
       272
       -
       ## Best Practices

     

       273
       273
       -
       

     

       274
       274
       -
       ### 1. Use CSS Variables for Dynamic Values

     

       275
       275
       -
       ```html

     

       276
       276
       -
       <div class="bg-[var(--dynamic-color)] text-[var(--dynamic-size)]">

     

       277
       277
       -
         Dynamic styling

     

       278
       278
       -
       </div>

     

       279
       279
       -
       ```

     

       280
       280
       -
       

     

       281
       281
       -
       ### 2. Leverage the New Color System

     

       282
       282
       -
       ```html

     

       283
       283
       -
       <!-- Better contrast and vibrancy with OKLCH -->

     

       284
       284
       -
       <div class="bg-blue-500 text-white">

     

       285
       285
       -
         Vivid colors on modern displays

     

       286
       286
       -
       </div>

     

       287
       287
       -
       ```

     

       288
       288
       -
       

     

       289
       289
       -
       ### 3. Container Queries for True Responsive Design

     

       290
       290
       -
       ```html

     

       291
       291
       -
       <div class="@container">

     

       292
       292
       -
         <div class="p-4 @lg:p-8 @xl:p-12">

     

       293
       293
       -
           Responds to container, not viewport

     

       294
       294
       -
         </div>

     

       295
       295
       -
       </div>

     

       296
       296
       -
       ```

     

       297
       297
       -
       

     

       298
       298
       -
       ### 4. Modern CSS Features

     

       299
       299
       -
       ```html

     

       300
       300
       -
       <!-- Native cascade layers -->

     

       301
       301
       -
       <div class="layer-[utilities]:z-10">

     

       302
       302
       -
         Proper layer management

     

       303
       303
       -
       </div>

     

       304
       304
       -
       

     

       305
       305
       -
       <!-- Color mixing -->

     

       306
       306
       -
       <div class="bg-blue-500/50">

     

       307
       307
       -
         Uses color-mix() under the hood

     

       308
       308
       -
       </div>

     

       309
       309
       -
       ```

     

       310
       310
       -
       

     

       311
       311
       -
       ## Performance Optimizations

     

       312
       312
       -
       

     

       313
       313
       -
       v4's Oxide engine provides:

     

       314
       314
       -
       - 5x faster full builds

     

       315
       315
       -
       - 100x faster incremental builds

     

       316
       316
       -
       - Automatic content detection

     

       317
       317
       -
       - Built-in import handling

     

       318
       318
       -
       - Native vendor prefixing

     

       319
       319
       -
       

     

       320
       320
       -
       ## File Organization

     

       321
       321
       -
       

     

       322
       322
       -
       ```

     

       323
       323
       -
       src/

     

       324
       324
       -
       ├── styles/

     

       325
       325
       -
       │   ├── main.css          # @import "tailwindcss" + @theme

     

       326
       326
       -
       │   ├── components.css    # @utility definitions

     

       327
       327
       -
       │   └── utilities.css     # Additional @utility definitions

     

       328
       328
       -
       └── components/

     

       329
       329
       -
           └── *.vue/jsx/html    # Your components

     

       330
       330
       -
       ```

     

       331
       331
       -
       

     

       332
       332
       -
       ## Common Patterns

     

       333
       333
       -
       

     

       334
       334
       -
       ### Theme-aware Components

     

       335
       335
       -
       ```css

     

       336
       336
       -
       @utility card {

     

       337
       337
       -
         background: var(--color-background);

     

       338
       338
       -
         border: 1px solid var(--color-border);

     

       339
       339
       -
         border-radius: 0.5rem;

     

       340
       340
       -
         padding: 1.5rem;

     

       341
       341
       -
         box-shadow: var(--shadow-sm);

     

       342
       342
       -
       }

     

       343
       343
       -
       ```

     

       344
       344
       -
       

     

       345
       345
       -
       ### Responsive Typography

     

       346
       346
       -
       ```html

     

       347
       347
       -
       <h1 class="text-2xl @sm:text-3xl @lg:text-4xl @xl:text-5xl">

     

       348
       348
       -
         Container-responsive heading

     

       349
       349
       -
       </h1>

     

       350
       350
       -
       ```

     

       351
       351
       -
       

     

       352
       352
       -
       ### Animation with @starting-style

     

       353
       353
       -
       ```html

     

       354
       354
       -
       <div class="translate-y-0 @starting-style:translate-y-full transition-transform duration-500">

     

       355
       355
       -
         Slides up on mount

     

       356
       356
       -
       </div>

     

       357
       357
       -
       ```

     

       358
       358
       -
       

     

       359
       359
       -
       ## Debugging Tips

     

       360
       360
       -
       

     

       361
       361
       -
       1. **Use browser dev tools** to inspect CSS variables

     

       362
       362
       -
       2. **Check cascade layers** in dev tools

     

       363
       363
       -
       3. **Verify modern browser support** for OKLCH colors

     

       364
       364
       -
       4. **Use @reference** for CSS modules/component styles

     

       365
       365
       -
       5. **Restart dev server** after major theme changes

     

       366
       366
       -
       

     

       367
       367
       -
       ## Migration from v3

     

       368
       368
       -
       

     

       369
       369
       -
       1. Replace `@tailwind` directives with `@import "tailwindcss"`

     

       370
       370
       -
       2. Move config from JS to CSS using `@theme`

     

       371
       371
       -
       3. Update deprecated utility classes

     

       372
       372
       -
       4. Replace `@layer utilities` with `@utility`

     

       373
       373
       -
       5. Test in modern browsers only

     

       374
       374
       -
       6. Use the official upgrade tool: `npx @tailwindcss/upgrade@next`

     

       375
       375
       -
       

     

       376
       376
       -
       ## Complete Utility Class Reference

     

       377
       377
       -
       

     

       378
       378
       -
       ### Layout

     

       379
       379
       -
       

     

       380
       380
       -
       #### Display

     

       381
       381
       -
       ```

     

       382
       382
       -
       block, inline-block, inline, flex, inline-flex, table, inline-table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row-group, table-row, flow-root, grid, inline-grid, contents, list-item, hidden

     

       383
       383
       -
       ```

     

       384
       384
       -
       

     

       385
       385
       -
       #### Position

     

       386
       386
       -
       ```

     

       387
       387
       -
       static, fixed, absolute, relative, sticky

     

       388
       388
       -
       ```

     

       389
       389
       -
       

     

       390
       390
       -
       #### Top/Right/Bottom/Left

     

       391
       391
       -
       ```

     

       392
       392
       -
       inset-0, inset-x-0, inset-y-0, start-0, end-0, top-0, right-0, bottom-0, left-0

     

       393
       393
       -
       inset-px, inset-x-px, inset-y-px, start-px, end-px, top-px, right-px, bottom-px, left-px

     

       394
       394
       -
       inset-0.5, inset-1, inset-1.5, inset-2, inset-2.5, inset-3, inset-3.5, inset-4, inset-5, inset-6, inset-7, inset-8, inset-9, inset-10, inset-11, inset-12, inset-14, inset-16, inset-20, inset-24, inset-28, inset-32, inset-36, inset-40, inset-44, inset-48, inset-52, inset-56, inset-60, inset-64, inset-72, inset-80, inset-96

     

       395
       395
       -
       inset-auto, inset-1/2, inset-1/3, inset-2/3, inset-1/4, inset-2/4, inset-3/4, inset-full

     

       396
       396
       -
       ```

     

       397
       397
       -
       

     

       398
       398
       -
       #### Visibility & Z-Index

     

       399
       399
       -
       ```

     

       400
       400
       -
       visible, invisible, collapse

     

       401
       401
       -
       z-0, z-10, z-20, z-30, z-40, z-50, z-auto

     

       402
       402
       -
       ```

     

       403
       403
       -
       

     

       404
       404
       -
       #### Overflow

     

       405
       405
       -
       ```

     

       406
       406
       -
       overflow-auto, overflow-hidden, overflow-clip, overflow-visible, overflow-scroll

     

       407
       407
       -
       overflow-x-auto, overflow-x-hidden, overflow-x-clip, overflow-x-visible, overflow-x-scroll

     

       408
       408
       -
       overflow-y-auto, overflow-y-hidden, overflow-y-clip, overflow-y-visible, overflow-y-scroll

     

       409
       409
       -
       ```

     

       410
       410
       -
       

     

       411
       411
       -
       ### Flexbox & Grid

     

       412
       412
       -
       

     

       413
       413
       -
       #### Flex Direction

     

       414
       414
       -
       ```

     

       415
       415
       -
       flex-row, flex-row-reverse, flex-col, flex-col-reverse

     

       416
       416
       -
       ```

     

       417
       417
       -
       

     

       418
       418
       -
       #### Flex Wrap

     

       419
       419
       -
       ```

     

       420
       420
       -
       flex-wrap, flex-wrap-reverse, flex-nowrap

     

       421
       421
       -
       ```

     

       422
       422
       -
       

     

       423
       423
       -
       #### Flex

     

       424
       424
       -
       ```

     

       425
       425
       -
       flex-1, flex-auto, flex-initial, flex-none

     

       426
       426
       -
       ```

     

       427
       427
       -
       

     

       428
       428
       -
       #### Grow & Shrink

     

       429
       429
       -
       ```

     

       430
       430
       -
       grow, grow-0, shrink, shrink-0

     

       431
       431
       -
       ```

     

       432
       432
       -
       

     

       433
       433
       -
       #### Order

     

       434
       434
       -
       ```

     

       435
       435
       -
       order-1, order-2, order-3, order-4, order-5, order-6, order-7, order-8, order-9, order-10, order-11, order-12, order-first, order-last, order-none

     

       436
       436
       -
       ```

     

       437
       437
       -
       

     

       438
       438
       -
       #### Grid Template Columns

     

       439
       439
       -
       ```

     

       440
       440
       -
       grid-cols-1, grid-cols-2, grid-cols-3, grid-cols-4, grid-cols-5, grid-cols-6, grid-cols-7, grid-cols-8, grid-cols-9, grid-cols-10, grid-cols-11, grid-cols-12, grid-cols-none, grid-cols-subgrid

     

       441
       441
       -
       ```

     

       442
       442
       -
       

     

       443
       443
       -
       #### Grid Column Start/End

     

       444
       444
       -
       ```

     

       445
       445
       -
       col-auto, col-span-1, col-span-2, col-span-3, col-span-4, col-span-5, col-span-6, col-span-7, col-span-8, col-span-9, col-span-10, col-span-11, col-span-12, col-span-full

     

       446
       446
       -
       col-start-1, col-start-2, col-start-3, col-start-4, col-start-5, col-start-6, col-start-7, col-start-8, col-start-9, col-start-10, col-start-11, col-start-12, col-start-13, col-start-auto

     

       447
       447
       -
       col-end-1, col-end-2, col-end-3, col-end-4, col-end-5, col-end-6, col-end-7, col-end-8, col-end-9, col-end-10, col-end-11, col-end-12, col-end-13, col-end-auto

     

       448
       448
       -
       ```

     

       449
       449
       -
       

     

       450
       450
       -
       #### Grid Template Rows

     

       451
       451
       -
       ```

     

       452
       452
       -
       grid-rows-1, grid-rows-2, grid-rows-3, grid-rows-4, grid-rows-5, grid-rows-6, grid-rows-7, grid-rows-8, grid-rows-9, grid-rows-10, grid-rows-11, grid-rows-12, grid-rows-none, grid-rows-subgrid

     

       453
       453
       -
       ```

     

       454
       454
       -
       

     

       455
       455
       -
       #### Grid Row Start/End

     

       456
       456
       -
       ```

     

       457
       457
       -
       row-auto, row-span-1, row-span-2, row-span-3, row-span-4, row-span-5, row-span-6, row-span-7, row-span-8, row-span-9, row-span-10, row-span-11, row-span-12, row-span-full

     

       458
       458
       -
       row-start-1, row-start-2, row-start-3, row-start-4, row-start-5, row-start-6, row-start-7, row-start-8, row-start-9, row-start-10, row-start-11, row-start-12, row-start-13, row-start-auto

     

       459
       459
       -
       row-end-1, row-end-2, row-end-3, row-end-4, row-end-5, row-end-6, row-end-7, row-end-8, row-end-9, row-end-10, row-end-11, row-end-12, row-end-13, row-end-auto

     

       460
       460
       -
       ```

     

       461
       461
       -
       

     

       462
       462
       -
       #### Gap

     

       463
       463
       -
       ```

     

       464
       464
       -
       gap-0, gap-x-0, gap-y-0, gap-px, gap-x-px, gap-y-px

     

       465
       465
       -
       gap-0.5, gap-1, gap-1.5, gap-2, gap-2.5, gap-3, gap-3.5, gap-4, gap-5, gap-6, gap-7, gap-8, gap-9, gap-10, gap-11, gap-12, gap-14, gap-16, gap-20, gap-24, gap-28, gap-32, gap-36, gap-40, gap-44, gap-48, gap-52, gap-56, gap-60, gap-64, gap-72, gap-80, gap-96

     

       466
       466
       -
       ```

     

       467
       467
       -
       

     

       468
       468
       -
       #### Justify & Align

     

       469
       469
       -
       ```

     

       470
       470
       -
       justify-normal, justify-start, justify-end, justify-center, justify-between, justify-around, justify-evenly, justify-stretch

     

       471
       471
       -
       justify-items-start, justify-items-end, justify-items-center, justify-items-stretch

     

       472
       472
       -
       justify-self-auto, justify-self-start, justify-self-end, justify-self-center, justify-self-stretch

     

       473
       473
       -
       align-items-start, align-items-end, align-items-center, align-items-baseline, align-items-stretch

     

       474
       474
       -
       align-content-normal, align-content-center, align-content-start, align-content-end, align-content-between, align-content-around, align-content-evenly, align-content-baseline, align-content-stretch

     

       475
       475
       -
       align-self-auto, align-self-start, align-self-end, align-self-center, align-self-stretch, align-self-baseline

     

       476
       476
       -
       place-content-center, place-content-start, place-content-end, place-content-between, place-content-around, place-content-evenly, place-content-baseline, place-content-stretch

     

       477
       477
       -
       place-items-start, place-items-end, place-items-center, place-items-baseline, place-items-stretch

     

       478
       478
       -
       place-self-auto, place-self-start, place-self-end, place-self-center, place-self-stretch

     

       479
       479
       -
       ```

     

       480
       480
       -
       

     

       481
       481
       -
       ### Spacing

     

       482
       482
       -
       

     

       483
       483
       -
       #### Padding

     

       484
       484
       -
       ```

     

       485
       485
       -
       p-0, p-px, p-0.5, p-1, p-1.5, p-2, p-2.5, p-3, p-3.5, p-4, p-5, p-6, p-7, p-8, p-9, p-10, p-11, p-12, p-14, p-16, p-20, p-24, p-28, p-32, p-36, p-40, p-44, p-48, p-52, p-56, p-60, p-64, p-72, p-80, p-96

     

       486
       486
       -
       px-0, py-0, pl-0, pr-0, pt-0, pb-0, ps-0, pe-0

     

       487
       487
       -
       ```

     

       488
       488
       -
       

     

       489
       489
       -
       #### Margin

     

       490
       490
       -
       ```

     

       491
       491
       -
       m-0, m-px, m-0.5, m-1, m-1.5, m-2, m-2.5, m-3, m-3.5, m-4, m-5, m-6, m-7, m-8, m-9, m-10, m-11, m-12, m-14, m-16, m-20, m-24, m-28, m-32, m-36, m-40, m-44, m-48, m-52, m-56, m-60, m-64, m-72, m-80, m-96, m-auto

     

       492
       492
       -
       mx-0, my-0, ml-0, mr-0, mt-0, mb-0, ms-0, me-0

     

       493
       493
       -
       -m-0, -m-px, -m-0.5, -m-1, -m-1.5, -m-2, -m-2.5, -m-3, -m-3.5, -m-4, -m-5, -m-6, -m-7, -m-8, -m-9, -m-10, -m-11, -m-12, -m-14, -m-16, -m-20, -m-24, -m-28, -m-32, -m-36, -m-40, -m-44, -m-48, -m-52, -m-56, -m-60, -m-64, -m-72, -m-80, -m-96

     

       494
       494
       -
       ```

     

       495
       495
       -
       

     

       496
       496
       -
       #### Space Between

     

       497
       497
       -
       ```

     

       498
       498
       -
       space-x-0, space-x-px, space-x-0.5, space-x-1, space-x-1.5, space-x-2, space-x-2.5, space-x-3, space-x-3.5, space-x-4, space-x-5, space-x-6, space-x-7, space-x-8, space-x-9, space-x-10, space-x-11, space-x-12, space-x-14, space-x-16, space-x-20, space-x-24, space-x-28, space-x-32, space-x-36, space-x-40, space-x-44, space-x-48, space-x-52, space-x-56, space-x-60, space-x-64, space-x-72, space-x-80, space-x-96, space-x-reverse

     

       499
       499
       -
       space-y-0, space-y-px, space-y-0.5, space-y-1, space-y-1.5, space-y-2, space-y-2.5, space-y-3, space-y-3.5, space-y-4, space-y-5, space-y-6, space-y-7, space-y-8, space-y-9, space-y-10, space-y-11, space-y-12, space-y-14, space-y-16, space-y-20, space-y-24, space-y-28, space-y-32, space-y-36, space-y-40, space-y-44, space-y-48, space-y-52, space-y-56, space-y-60, space-y-64, space-y-72, space-y-80, space-y-96, space-y-reverse

     

       500
       500
       -
       ```

     

       501
       501
       -
       

     

       502
       502
       -
       ### Sizing

     

       503
       503
       -
       

     

       504
       504
       -
       #### Width

     

       505
       505
       -
       ```

     

       506
       506
       -
       w-0, w-px, w-0.5, w-1, w-1.5, w-2, w-2.5, w-3, w-3.5, w-4, w-5, w-6, w-7, w-8, w-9, w-10, w-11, w-12, w-14, w-16, w-20, w-24, w-28, w-32, w-36, w-40, w-44, w-48, w-52, w-56, w-60, w-64, w-72, w-80, w-96, w-auto, w-1/2, w-1/3, w-2/3, w-1/4, w-2/4, w-3/4, w-1/5, w-2/5, w-3/5, w-4/5, w-1/6, w-2/6, w-3/6, w-4/6, w-5/6, w-1/12, w-2/12, w-3/12, w-4/12, w-5/12, w-6/12, w-7/12, w-8/12, w-9/12, w-10/12, w-11/12, w-full, w-screen, w-svw, w-lvw, w-dvw, w-min, w-max, w-fit

     

       507
       507
       -
       ```

     

       508
       508
       -
       

     

       509
       509
       -
       #### Height

     

       510
       510
       -
       ```

     

       511
       511
       -
       h-0, h-px, h-0.5, h-1, h-1.5, h-2, h-2.5, h-3, h-3.5, h-4, h-5, h-6, h-7, h-8, h-9, h-10, h-11, h-12, h-14, h-16, h-20, h-24, h-28, h-32, h-36, h-40, h-44, h-48, h-52, h-56, h-60, h-64, h-72, h-80, h-96, h-auto, h-1/2, h-1/3, h-2/3, h-1/4, h-2/4, h-3/4, h-1/5, h-2/5, h-3/5, h-4/5, h-1/6, h-2/6, h-3/6, h-4/6, h-5/6, h-full, h-screen, h-svh, h-lvh, h-dvh, h-min, h-max, h-fit

     

       512
       512
       -
       ```

     

       513
       513
       -
       

     

       514
       514
       -
       #### Size (Width + Height)

     

       515
       515
       -
       ```

     

       516
       516
       -
       size-0, size-px, size-0.5, size-1, size-1.5, size-2, size-2.5, size-3, size-3.5, size-4, size-5, size-6, size-7, size-8, size-9, size-10, size-11, size-12, size-14, size-16, size-20, size-24, size-28, size-32, size-36, size-40, size-44, size-48, size-52, size-56, size-60, size-64, size-72, size-80, size-96, size-auto, size-1/2, size-1/3, size-2/3, size-1/4, size-2/4, size-3/4, size-1/5, size-2/5, size-3/5, size-4/5, size-1/6, size-2/6, size-3/6, size-4/6, size-5/6, size-1/12, size-2/12, size-3/12, size-4/12, size-5/12, size-6/12, size-7/12, size-8/12, size-9/12, size-10/12, size-11/12, size-full, size-min, size-max, size-fit

     

       517
       517
       -
       ```

     

       518
       518
       -
       

     

       519
       519
       -
       #### Min/Max Width

     

       520
       520
       -
       ```

     

       521
       521
       -
       min-w-0, min-w-full, min-w-min, min-w-max, min-w-fit

     

       522
       522
       -
       max-w-0, max-w-xs, max-w-sm, max-w-md, max-w-lg, max-w-xl, max-w-2xl, max-w-3xl, max-w-4xl, max-w-5xl, max-w-6xl, max-w-7xl, max-w-full, max-w-min, max-w-max, max-w-fit, max-w-prose, max-w-screen-sm, max-w-screen-md, max-w-screen-lg, max-w-screen-xl, max-w-screen-2xl

     

       523
       523
       -
       ```

     

       524
       524
       -
       

     

       525
       525
       -
       #### Min/Max Height

     

       526
       526
       -
       ```

     

       527
       527
       -
       min-h-0, min-h-full, min-h-screen, min-h-svh, min-h-lvh, min-h-dvh, min-h-min, min-h-max, min-h-fit

     

       528
       528
       -
       max-h-0, max-h-px, max-h-0.5, max-h-1, max-h-1.5, max-h-2, max-h-2.5, max-h-3, max-h-3.5, max-h-4, max-h-5, max-h-6, max-h-7, max-h-8, max-h-9, max-h-10, max-h-11, max-h-12, max-h-14, max-h-16, max-h-20, max-h-24, max-h-28, max-h-32, max-h-36, max-h-40, max-h-44, max-h-48, max-h-52, max-h-56, max-h-60, max-h-64, max-h-72, max-h-80, max-h-96, max-h-full, max-h-screen, max-h-svh, max-h-lvh, max-h-dvh, max-h-min, max-h-max, max-h-fit

     

       529
       529
       -
       ```

     

       530
       530
       -
       

     

       531
       531
       -
       ### Typography

     

       532
       532
       -
       

     

       533
       533
       -
       #### Font Family

     

       534
       534
       -
       ```

     

       535
       535
       -
       font-sans, font-serif, font-mono

     

       536
       536
       -
       ```

     

       537
       537
       -
       

     

       538
       538
       -
       #### Font Size

     

       539
       539
       -
       ```

     

       540
       540
       -
       text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl, text-4xl, text-5xl, text-6xl, text-7xl, text-8xl, text-9xl

     

       541
       541
       -
       ```

     

       542
       542
       -
       

     

       543
       543
       -
       #### Font Weight

     

       544
       544
       -
       ```

     

       545
       545
       -
       font-thin, font-extralight, font-light, font-normal, font-medium, font-semibold, font-bold, font-extrabold, font-black

     

       546
       546
       -
       ```

     

       547
       547
       -
       

     

       548
       548
       -
       #### Font Style

     

       549
       549
       -
       ```

     

       550
       550
       -
       italic, not-italic

     

       551
       551
       -
       ```

     

       552
       552
       -
       

     

       553
       553
       -
       #### Font Variant Numeric

     

       554
       554
       -
       ```

     

       555
       555
       -
       normal-nums, ordinal, slashed-zero, lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions

     

       556
       556
       -
       ```

     

       557
       557
       -
       

     

       558
       558
       -
       #### Font Stretch (NEW in v4)

     

       559
       559
       -
       ```

     

       560
       560
       -
       font-stretch-ultra-condensed, font-stretch-extra-condensed, font-stretch-condensed, font-stretch-semi-condensed, font-stretch-normal, font-stretch-semi-expanded, font-stretch-expanded, font-stretch-extra-expanded, font-stretch-ultra-expanded

     

       561
       561
       -
       ```

     

       562
       562
       -
       

     

       563
       563
       -
       #### Letter Spacing

     

       564
       564
       -
       ```

     

       565
       565
       -
       tracking-tighter, tracking-tight, tracking-normal, tracking-wide, tracking-wider, tracking-widest

     

       566
       566
       -
       ```

     

       567
       567
       -
       

     

       568
       568
       -
       #### Line Clamp

     

       569
       569
       -
       ```

     

       570
       570
       -
       line-clamp-1, line-clamp-2, line-clamp-3, line-clamp-4, line-clamp-5, line-clamp-6, line-clamp-none

     

       571
       571
       -
       ```

     

       572
       572
       -
       

     

       573
       573
       -
       #### Line Height

     

       574
       574
       -
       ```

     

       575
       575
       -
       leading-3, leading-4, leading-5, leading-6, leading-7, leading-8, leading-9, leading-10, leading-none, leading-tight, leading-snug, leading-normal, leading-relaxed, leading-loose

     

       576
       576
       -
       ```

     

       577
       577
       -
       

     

       578
       578
       -
       #### List Style

     

       579
       579
       -
       ```

     

       580
       580
       -
       list-none, list-disc, list-decimal, list-inside, list-outside

     

       581
       581
       -
       ```

     

       582
       582
       -
       

     

       583
       583
       -
       #### Text Align

     

       584
       584
       -
       ```

     

       585
       585
       -
       text-left, text-center, text-right, text-justify, text-start, text-end

     

       586
       586
       -
       ```

     

       587
       587
       -
       

     

       588
       588
       -
       #### Text Color

     

       589
       589
       -
       ```

     

       590
       590
       -
       text-inherit, text-current, text-transparent, text-black, text-white

     

       591
       591
       -
       text-slate-50, text-slate-100, text-slate-200, text-slate-300, text-slate-400, text-slate-500, text-slate-600, text-slate-700, text-slate-800, text-slate-900, text-slate-950

     

       592
       592
       -
       text-gray-50, text-gray-100, text-gray-200, text-gray-300, text-gray-400, text-gray-500, text-gray-600, text-gray-700, text-gray-800, text-gray-900, text-gray-950

     

       593
       593
       -
       text-zinc-50, text-zinc-100, text-zinc-200, text-zinc-300, text-zinc-400, text-zinc-500, text-zinc-600, text-zinc-700, text-zinc-800, text-zinc-900, text-zinc-950

     

       594
       594
       -
       text-neutral-50, text-neutral-100, text-neutral-200, text-neutral-300, text-neutral-400, text-neutral-500, text-neutral-600, text-neutral-700, text-neutral-800, text-neutral-900, text-neutral-950

     

       595
       595
       -
       text-stone-50, text-stone-100, text-stone-200, text-stone-300, text-stone-400, text-stone-500, text-stone-600, text-stone-700, text-stone-800, text-stone-900, text-stone-950

     

       596
       596
       -
       text-red-50, text-red-100, text-red-200, text-red-300, text-red-400, text-red-500, text-red-600, text-red-700, text-red-800, text-red-900, text-red-950

     

       597
       597
       -
       text-orange-50, text-orange-100, text-orange-200, text-orange-300, text-orange-400, text-orange-500, text-orange-600, text-orange-700, text-orange-800, text-orange-900, text-orange-950

     

       598
       598
       -
       text-amber-50, text-amber-100, text-amber-200, text-amber-300, text-amber-400, text-amber-500, text-amber-600, text-amber-700, text-amber-800, text-amber-900, text-amber-950

     

       599
       599
       -
       text-yellow-50, text-yellow-100, text-yellow-200, text-yellow-300, text-yellow-400, text-yellow-500, text-yellow-600, text-yellow-700, text-yellow-800, text-yellow-900, text-yellow-950

     

       600
       600
       -
       text-lime-50, text-lime-100, text-lime-200, text-lime-300, text-lime-400, text-lime-500, text-lime-600, text-lime-700, text-lime-800, text-lime-900, text-lime-950

     

       601
       601
       -
       text-green-50, text-green-100, text-green-200, text-green-300, text-green-400, text-green-500, text-green-600, text-green-700, text-green-800, text-green-900, text-green-950

     

       602
       602
       -
       text-emerald-50, text-emerald-100, text-emerald-200, text-emerald-300, text-emerald-400, text-emerald-500, text-emerald-600, text-emerald-700, text-emerald-800, text-emerald-900, text-emerald-950

     

       603
       603
       -
       text-teal-50, text-teal-100, text-teal-200, text-teal-300, text-teal-400, text-teal-500, text-teal-600, text-teal-700, text-teal-800, text-teal-900, text-teal-950

     

       604
       604
       -
       text-cyan-50, text-cyan-100, text-cyan-200, text-cyan-300, text-cyan-400, text-cyan-500, text-cyan-600, text-cyan-700, text-cyan-800, text-cyan-900, text-cyan-950

     

       605
       605
       -
       text-sky-50, text-sky-100, text-sky-200, text-sky-300, text-sky-400, text-sky-500, text-sky-600, text-sky-700, text-sky-800, text-sky-900, text-sky-950

     

       606
       606
       -
       text-blue-50, text-blue-100, text-blue-200, text-blue-300, text-blue-400, text-blue-500, text-blue-600, text-blue-700, text-blue-800, text-blue-900, text-blue-950

     

       607
       607
       -
       text-indigo-50, text-indigo-100, text-indigo-200, text-indigo-300, text-indigo-400, text-indigo-500, text-indigo-600, text-indigo-700, text-indigo-800, text-indigo-900, text-indigo-950

     

       608
       608
       -
       text-violet-50, text-violet-100, text-violet-200, text-violet-300, text-violet-400, text-violet-500, text-violet-600, text-violet-700, text-violet-800, text-violet-900, text-violet-950

     

       609
       609
       -
       text-purple-50, text-purple-100, text-purple-200, text-purple-300, text-purple-400, text-purple-500, text-purple-600, text-purple-700, text-purple-800, text-purple-900, text-purple-950

     

       610
       610
       -
       text-fuchsia-50, text-fuchsia-100, text-fuchsia-200, text-fuchsia-300, text-fuchsia-400, text-fuchsia-500, text-fuchsia-600, text-fuchsia-700, text-fuchsia-800, text-fuchsia-900, text-fuchsia-950

     

       611
       611
       -
       text-pink-50, text-pink-100, text-pink-200, text-pink-300, text-pink-400, text-pink-500, text-pink-600, text-pink-700, text-pink-800, text-pink-900, text-pink-950

     

       612
       612
       -
       text-rose-50, text-rose-100, text-rose-200, text-rose-300, text-rose-400, text-rose-500, text-rose-600, text-rose-700, text-rose-800, text-rose-900, text-rose-950

     

       613
       613
       -
       ```

     

       614
       614
       -
       

     

       615
       615
       -
       #### Text Decoration

     

       616
       616
       -
       ```

     

       617
       617
       -
       underline, overline, line-through, no-underline

     

       618
       618
       -
       decoration-solid, decoration-double, decoration-dotted, decoration-dashed, decoration-wavy

     

       619
       619
       -
       decoration-auto, decoration-from-font, decoration-0, decoration-1, decoration-2, decoration-4, decoration-8

     

       620
       620
       -
       underline-offset-auto, underline-offset-0, underline-offset-1, underline-offset-2, underline-offset-4, underline-offset-8

     

       621
       621
       -
       ```

     

       622
       622
       -
       

     

       623
       623
       -
       #### Text Transform

     

       624
       624
       -
       ```

     

       625
       625
       -
       uppercase, lowercase, capitalize, normal-case

     

       626
       626
       -
       ```

     

       627
       627
       -
       

     

       628
       628
       -
       #### Text Overflow

     

       629
       629
       -
       ```

     

       630
       630
       -
       truncate, text-ellipsis, text-clip

     

       631
       631
       -
       ```

     

       632
       632
       -
       

     

       633
       633
       -
       #### Text Shadow (NEW in v4)

     

       634
       634
       -
       ```

     

       635
       635
       -
       text-shadow-sm, text-shadow, text-shadow-lg, text-shadow-xl, text-shadow-none

     

       636
       636
       -
       ```

     

       637
       637
       -
       

     

       638
       638
       -
       #### Overflow Wrap (NEW in v4)

     

       639
       639
       -
       ```

     

       640
       640
       -
       overflow-wrap-normal, overflow-wrap-break-word, overflow-wrap-anywhere

     

       641
       641
       -
       ```

     

       642
       642
       -
       

     

       643
       643
       -
       #### Vertical Align

     

       644
       644
       -
       ```

     

       645
       645
       -
       align-baseline, align-top, align-middle, align-bottom, align-text-top, align-text-bottom, align-sub, align-super

     

       646
       646
       -
       ```

     

       647
       647
       -
       

     

       648
       648
       -
       #### Whitespace

     

       649
       649
       -
       ```

     

       650
       650
       -
       whitespace-normal, whitespace-nowrap, whitespace-pre, whitespace-pre-line, whitespace-pre-wrap, whitespace-break-spaces

     

       651
       651
       -
       ```

     

       652
       652
       -
       

     

       653
       653
       -
       #### Word Break

     

       654
       654
       -
       ```

     

       655
       655
       -
       break-normal, break-words, break-all, break-keep

     

       656
       656
       -
       ```

     

       657
       657
       -
       

     

       658
       658
       -
       #### Hyphens

     

       659
       659
       -
       ```

     

       660
       660
       -
       hyphens-none, hyphens-manual, hyphens-auto

     

       661
       661
       -
       ```

     

       662
       662
       -
       

     

       663
       663
       -
       #### Content

     

       664
       664
       -
       ```

     

       665
       665
       -
       content-none

     

       666
       666
       -
       ```

     

       667
       667
       -
       

     

       668
       668
       -
       ### Backgrounds

     

       669
       669
       -
       

     

       670
       670
       -
       #### Background Attachment

     

       671
       671
       -
       ```

     

       672
       672
       -
       bg-fixed, bg-local, bg-scroll

     

       673
       673
       -
       ```

     

       674
       674
       -
       

     

       675
       675
       -
       #### Background Clip

     

       676
       676
       -
       ```

     

       677
       677
       -
       bg-clip-border, bg-clip-padding, bg-clip-content, bg-clip-text

     

       678
       678
       -
       ```

     

       679
       679
       -
       

     

       680
       680
       -
       #### Background Color

     

       681
       681
       -
       All color utilities work with `bg-` prefix (same as text colors above)

     

       682
       682
       -
       

     

       683
       683
       -
       #### Background Origin

     

       684
       684
       -
       ```

     

       685
       685
       -
       bg-origin-border, bg-origin-padding, bg-origin-content

     

       686
       686
       -
       ```

     

       687
       687
       -
       

     

       688
       688
       -
       #### Background Position

     

       689
       689
       -
       ```

     

       690
       690
       -
       bg-bottom, bg-center, bg-left, bg-left-bottom, bg-left-top, bg-right, bg-right-bottom, bg-right-top, bg-top

     

       691
       691
       -
       ```

     

       692
       692
       -
       

     

       693
       693
       -
       #### Background Repeat

     

       694
       694
       -
       ```

     

       695
       695
       -
       bg-repeat, bg-no-repeat, bg-repeat-x, bg-repeat-y, bg-repeat-round, bg-repeat-space

     

       696
       696
       -
       ```

     

       697
       697
       -
       

     

       698
       698
       -
       #### Background Size

     

       699
       699
       -
       ```

     

       700
       700
       -
       bg-auto, bg-cover, bg-contain

     

       701
       701
       -
       ```

     

       702
       702
       -
       

     

       703
       703
       -
       #### Background Image

     

       704
       704
       -
       ```

     

       705
       705
       -
       bg-none

     

       706
       706
       -
       bg-linear-to-t, bg-linear-to-tr, bg-linear-to-r, bg-linear-to-br, bg-linear-to-b, bg-linear-to-bl, bg-linear-to-l, bg-linear-to-tl

     

       707
       707
       -
       ```

     

       708
       708
       -
       

     

       709
       709
       -
       #### Enhanced Gradients (NEW in v4)

     

       710
       710
       -
       ```

     

       711
       711
       -
       bg-linear-0, bg-linear-45, bg-linear-90, bg-linear-135, bg-linear-180, bg-linear-225, bg-linear-270, bg-linear-315

     

       712
       712
       -
       bg-radial, bg-radial-at-t, bg-radial-at-tr, bg-radial-at-r, bg-radial-at-br, bg-radial-at-b, bg-radial-at-bl, bg-radial-at-l, bg-radial-at-tl, bg-radial-at-c

     

       713
       713
       -
       bg-conic, bg-conic-at-t, bg-conic-at-tr, bg-conic-at-r, bg-conic-at-br, bg-conic-at-b, bg-conic-at-bl, bg-conic-at-l, bg-conic-at-tl, bg-conic-at-c

     

       714
       714
       -
       ```

     

       715
       715
       -
       

     

       716
       716
       -
       #### Gradient Color Stops

     

       717
       717
       -
       ```

     

       718
       718
       -
       from-inherit, from-current, from-transparent, from-black, from-white, from-{color}

     

       719
       719
       -
       via-inherit, via-current, via-transparent, via-black, via-white, via-{color}

     

       720
       720
       -
       to-inherit, to-current, to-transparent, to-black, to-white, to-{color}

     

       721
       721
       -
       ```

     

       722
       722
       -
       

     

       723
       723
       -
       ### Borders

     

       724
       724
       -
       

     

       725
       725
       -
       #### Border Radius

     

       726
       726
       -
       ```

     

       727
       727
       -
       rounded-none, rounded-xs, rounded-sm, rounded, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl, rounded-full

     

       728
       728
       -
       rounded-s-none, rounded-s-xs, rounded-s-sm, rounded-s, rounded-s-md, rounded-s-lg, rounded-s-xl, rounded-s-2xl, rounded-s-3xl

     

       729
       729
       -
       rounded-e-none, rounded-e-xs, rounded-e-sm, rounded-e, rounded-e-md, rounded-e-lg, rounded-e-xl, rounded-e-2xl, rounded-e-3xl

     

       730
       730
       -
       rounded-t-none, rounded-t-xs, rounded-t-sm, rounded-t, rounded-t-md, rounded-t-lg, rounded-t-xl, rounded-t-2xl, rounded-t-3xl

     

       731
       731
       -
       rounded-r-none, rounded-r-xs, rounded-r-sm, rounded-r, rounded-r-md, rounded-r-lg, rounded-r-xl, rounded-r-2xl, rounded-r-3xl

     

       732
       732
       -
       rounded-b-none, rounded-b-xs, rounded-b-sm, rounded-b, rounded-b-md, rounded-b-lg, rounded-b-xl, rounded-b-2xl, rounded-b-3xl

     

       733
       733
       -
       rounded-l-none, rounded-l-xs, rounded-l-sm, rounded-l, rounded-l-md, rounded-l-lg, rounded-l-xl, rounded-l-2xl, rounded-l-3xl

     

       734
       734
       -
       rounded-ss-none, rounded-ss-xs, rounded-ss-sm, rounded-ss, rounded-ss-md, rounded-ss-lg, rounded-ss-xl, rounded-ss-2xl, rounded-ss-3xl

     

       735
       735
       -
       rounded-se-none, rounded-se-xs, rounded-se-sm, rounded-se, rounded-se-md, rounded-se-lg, rounded-se-xl, rounded-se-2xl, rounded-se-3xl

     

       736
       736
       -
       rounded-ee-none, rounded-ee-xs, rounded-ee-sm, rounded-ee, rounded-ee-md, rounded-ee-lg, rounded-ee-xl, rounded-ee-2xl, rounded-ee-3xl

     

       737
       737
       -
       rounded-es-none, rounded-es-xs, rounded-es-sm, rounded-es, rounded-es-md, rounded-es-lg, rounded-es-xl, rounded-es-2xl, rounded-es-3xl

     

       738
       738
       -
       rounded-tl-none, rounded-tl-xs, rounded-tl-sm, rounded-tl, rounded-tl-md, rounded-tl-lg, rounded-tl-xl, rounded-tl-2xl, rounded-tl-3xl

     

       739
       739
       -
       rounded-tr-none, rounded-tr-xs, rounded-tr-sm, rounded-tr, rounded-tr-md, rounded-tr-lg, rounded-tr-xl, rounded-tr-2xl, rounded-tr-3xl

     

       740
       740
       -
       rounded-br-none, rounded-br-xs, rounded-br-sm, rounded-br, rounded-br-md, rounded-br-lg, rounded-br-xl, rounded-br-2xl, rounded-br-3xl

     

       741
       741
       -
       rounded-bl-none, rounded-bl-xs, rounded-bl-sm, rounded-bl, rounded-bl-md, rounded-bl-lg, rounded-bl-xl, rounded-bl-2xl, rounded-bl-3xl

     

       742
       742
       -
       ```

     

       743
       743
       -
       

     

       744
       744
       -
       #### Border Width

     

       745
       745
       -
       ```

     

       746
       746
       -
       border-0, border-2, border-4, border-8, border, border-x, border-y, border-s, border-e, border-t, border-r, border-b, border-l

     

       747
       747
       -
       ```

     

       748
       748
       -
       

     

       749
       749
       -
       #### Border Color

     

       750
       750
       -
       All color utilities work with `border-` prefix (same as text/bg colors)

     

       751
       751
       -
       

     

       752
       752
       -
       #### Border Style

     

       753
       753
       -
       ```

     

       754
       754
       -
       border-solid, border-dashed, border-dotted, border-double, border-hidden, border-none

     

       755
       755
       -
       ```

     

       756
       756
       -
       

     

       757
       757
       -
       #### Divide Width

     

       758
       758
       -
       ```

     

       759
       759
       -
       divide-x-0, divide-x-2, divide-x-4, divide-x-8, divide-x, divide-y-0, divide-y-2, divide-y-4, divide-y-8, divide-y, divide-x-reverse, divide-y-reverse

     

       760
       760
       -
       ```

     

       761
       761
       -
       

     

       762
       762
       -
       #### Divide Color

     

       763
       763
       -
       All color utilities work with `divide-` prefix

     

       764
       764
       -
       

     

       765
       765
       -
       #### Divide Style

     

       766
       766
       -
       ```

     

       767
       767
       -
       divide-solid, divide-dashed, divide-dotted, divide-double, divide-none

     

       768
       768
       -
       ```

     

       769
       769
       -
       

     

       770
       770
       -
       #### Outline Width

     

       771
       771
       -
       ```

     

       772
       772
       -
       outline-0, outline-1, outline-2, outline-4, outline-8

     

       773
       773
       -
       ```

     

       774
       774
       -
       

     

       775
       775
       -
       #### Outline Color

     

       776
       776
       -
       All color utilities work with `outline-` prefix

     

       777
       777
       -
       

     

       778
       778
       -
       #### Outline Style

     

       779
       779
       -
       ```

     

       780
       780
       -
       outline-none, outline, outline-dashed, outline-dotted, outline-double

     

       781
       781
       -
       ```

     

       782
       782
       -
       

     

       783
       783
       -
       #### Outline Offset

     

       784
       784
       -
       ```

     

       785
       785
       -
       outline-offset-0, outline-offset-1, outline-offset-2, outline-offset-4, outline-offset-8

     

       786
       786
       -
       ```

     

       787
       787
       -
       

     

       788
       788
       -
       #### Ring Width

     

       789
       789
       -
       ```

     

       790
       790
       -
       ring-0, ring-1, ring-2, ring, ring-4, ring-8, ring-inset

     

       791
       791
       -
       ```

     

       792
       792
       -
       

     

       793
       793
       -
       #### Ring Color

     

       794
       794
       -
       All color utilities work with `ring-` prefix

     

       795
       795
       -
       

     

       796
       796
       -
       #### Ring Offset Width

     

       797
       797
       -
       ```

     

       798
       798
       -
       ring-offset-0, ring-offset-1, ring-offset-2, ring-offset-4, ring-offset-8

     

       799
       799
       -
       ```

     

       800
       800
       -
       

     

       801
       801
       -
       #### Ring Offset Color

     

       802
       802
       -
       All color utilities work with `ring-offset-` prefix

     

       803
       803
       -
       

     

       804
       804
       -
       ### Effects

     

       805
       805
       -
       

     

       806
       806
       -
       #### Box Shadow

     

       807
       807
       -
       ```

     

       808
       808
       -
       shadow-xs, shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl, shadow-inner, shadow-none

     

       809
       809
       -
       ```

     

       810
       810
       -
       

     

       811
       811
       -
       #### Box Shadow Color

     

       812
       812
       -
       All color utilities work with `shadow-` prefix

     

       813
       813
       -
       

     

       814
       814
       -
       #### Drop Shadow (NEW colored support in v4)

     

       815
       815
       -
       ```

     

       816
       816
       -
       drop-shadow-sm, drop-shadow, drop-shadow-md, drop-shadow-lg, drop-shadow-xl, drop-shadow-2xl, drop-shadow-none

     

       817
       817
       -
       ```

     

       818
       818
       -
       

     

       819
       819
       -
       #### Opacity

     

       820
       820
       -
       ```

     

       821
       821
       -
       opacity-0, opacity-5, opacity-10, opacity-15, opacity-20, opacity-25, opacity-30, opacity-35, opacity-40, opacity-45, opacity-50, opacity-55, opacity-60, opacity-65, opacity-70, opacity-75, opacity-80, opacity-85, opacity-90, opacity-95, opacity-100

     

       822
       822
       -
       ```

     

       823
       823
       -
       

     

       824
       824
       -
       #### Mix Blend Mode

     

       825
       825
       -
       ```

     

       826
       826
       -
       mix-blend-normal, mix-blend-multiply, mix-blend-screen, mix-blend-overlay, mix-blend-darken, mix-blend-lighten, mix-blend-color-dodge, mix-blend-color-burn, mix-blend-hard-light, mix-blend-soft-light, mix-blend-difference, mix-blend-exclusion, mix-blend-hue, mix-blend-saturation, mix-blend-color, mix-blend-luminosity, mix-blend-plus-darker, mix-blend-plus-lighter

     

       827
       827
       -
       ```

     

       828
       828
       -
       

     

       829
       829
       -
       #### Background Blend Mode

     

       830
       830
       -
       ```

     

       831
       831
       -
       bg-blend-normal, bg-blend-multiply, bg-blend-screen, bg-blend-overlay, bg-blend-darken, bg-blend-lighten, bg-blend-color-dodge, bg-blend-color-burn, bg-blend-hard-light, bg-blend-soft-light, bg-blend-difference, bg-blend-exclusion, bg-blend-hue, bg-blend-saturation, bg-blend-color, bg-blend-luminosity

     

       832
       832
       -
       ```

     

       833
       833
       -
       

     

       834
       834
       -
       ### Filters

     

       835
       835
       -
       

     

       836
       836
       -
       #### Blur

     

       837
       837
       -
       ```

     

       838
       838
       -
       blur-none, blur-xs, blur-sm, blur, blur-md, blur-lg, blur-xl, blur-2xl, blur-3xl

     

       839
       839
       -
       ```

     

       840
       840
       -
       

     

       841
       841
       -
       #### Brightness

     

       842
       842
       -
       ```

     

       843
       843
       -
       brightness-0, brightness-50, brightness-75, brightness-90, brightness-95, brightness-100, brightness-105, brightness-110, brightness-125, brightness-150, brightness-200

     

       844
       844
       -
       ```

     

       845
       845
       -
       

     

       846
       846
       -
       #### Contrast

     

       847
       847
       -
       ```

     

       848
       848
       -
       contrast-0, contrast-50, contrast-75, contrast-100, contrast-125, contrast-150, contrast-200

     

       849
       849
       -
       ```

     

       850
       850
       -
       

     

       851
       851
       -
       #### Grayscale

     

       852
       852
       -
       ```

     

       853
       853
       -
       grayscale-0, grayscale

     

       854
       854
       -
       ```

     

       855
       855
       -
       

     

       856
       856
       -
       #### Hue Rotate

     

       857
       857
       -
       ```

     

       858
       858
       -
       hue-rotate-0, hue-rotate-15, hue-rotate-30, hue-rotate-60, hue-rotate-90, hue-rotate-180, -hue-rotate-180, -hue-rotate-90, -hue-rotate-60, -hue-rotate-30, -hue-rotate-15

     

       859
       859
       -
       ```

     

       860
       860
       -
       

     

       861
       861
       -
       #### Invert

     

       862
       862
       -
       ```

     

       863
       863
       -
       invert-0, invert

     

       864
       864
       -
       ```

     

       865
       865
       -
       

     

       866
       866
       -
       #### Saturate

     

       867
       867
       -
       ```

     

       868
       868
       -
       saturate-0, saturate-50, saturate-100, saturate-150, saturate-200

     

       869
       869
       -
       ```

     

       870
       870
       -
       

     

       871
       871
       -
       #### Sepia

     

       872
       872
       -
       ```

     

       873
       873
       -
       sepia-0, sepia

     

       874
       874
       -
       ```

     

       875
       875
       -
       

     

       876
       876
       -
       #### Backdrop Blur

     

       877
       877
       -
       ```

     

       878
       878
       -
       backdrop-blur-none, backdrop-blur-xs, backdrop-blur-sm, backdrop-blur, backdrop-blur-md, backdrop-blur-lg, backdrop-blur-xl, backdrop-blur-2xl, backdrop-blur-3xl

     

       879
       879
       -
       ```

     

       880
       880
       -
       

     

       881
       881
       -
       #### Backdrop Brightness

     

       882
       882
       -
       ```

     

       883
       883
       -
       backdrop-brightness-0, backdrop-brightness-50, backdrop-brightness-75, backdrop-brightness-90, backdrop-brightness-95, backdrop-brightness-100, backdrop-brightness-105, backdrop-brightness-110, backdrop-brightness-125, backdrop-brightness-150, backdrop-brightness-200

     

       884
       884
       -
       ```

     

       885
       885
       -
       

     

       886
       886
       -
       #### Backdrop Contrast

     

       887
       887
       -
       ```

     

       888
       888
       -
       backdrop-contrast-0, backdrop-contrast-50, backdrop-contrast-75, backdrop-contrast-100, backdrop-contrast-125, backdrop-contrast-150, backdrop-contrast-200

     

       889
       889
       -
       ```

     

       890
       890
       -
       

     

       891
       891
       -
       #### Backdrop Grayscale

     

       892
       892
       -
       ```

     

       893
       893
       -
       backdrop-grayscale-0, backdrop-grayscale

     

       894
       894
       -
       ```

     

       895
       895
       -
       

     

       896
       896
       -
       #### Backdrop Hue Rotate

     

       897
       897
       -
       ```

     

       898
       898
       -
       backdrop-hue-rotate-0, backdrop-hue-rotate-15, backdrop-hue-rotate-30, backdrop-hue-rotate-60, backdrop-hue-rotate-90, backdrop-hue-rotate-180, -backdrop-hue-rotate-180, -backdrop-hue-rotate-90, -backdrop-hue-rotate-60, -backdrop-hue-rotate-30, -backdrop-hue-rotate-15

     

       899
       899
       -
       ```

     

       900
       900
       -
       

     

       901
       901
       -
       #### Backdrop Invert

     

       902
       902
       -
       ```

     

       903
       903
       -
       backdrop-invert-0, backdrop-invert

     

       904
       904
       -
       ```

     

       905
       905
       -
       

     

       906
       906
       -
       #### Backdrop Saturate

     

       907
       907
       -
       ```

     

       908
       908
       -
       backdrop-saturate-0, backdrop-saturate-50, backdrop-saturate-100, backdrop-saturate-150, backdrop-saturate-200

     

       909
       909
       -
       ```

     

       910
       910
       -
       

     

       911
       911
       -
       #### Backdrop Sepia

     

       912
       912
       -
       ```

     

       913
       913
       -
       backdrop-sepia-0, backdrop-sepia

     

       914
       914
       -
       ```

     

       915
       915
       -
       

     

       916
       916
       -
       ### Masks (NEW in v4)

     

       917
       917
       -
       

     

       918
       918
       -
       #### Mask Image

     

       919
       919
       -
       ```

     

       920
       920
       -
       mask-none

     

       921
       921
       -
       ```

     

       922
       922
       -
       

     

       923
       923
       -
       #### Mask Size

     

       924
       924
       -
       ```

     

       925
       925
       -
       mask-auto, mask-cover, mask-contain

     

       926
       926
       -
       ```

     

       927
       927
       -
       

     

       928
       928
       -
       #### Mask Repeat

     

       929
       929
       -
       ```

     

       930
       930
       -
       mask-repeat, mask-no-repeat, mask-repeat-x, mask-repeat-y, mask-repeat-round, mask-repeat-space

     

       931
       931
       -
       ```

     

       932
       932
       -
       

     

       933
       933
       -
       #### Mask Position

     

       934
       934
       -
       ```

     

       935
       935
       -
       mask-bottom, mask-center, mask-left, mask-left-bottom, mask-left-top, mask-right, mask-right-bottom, mask-right-top, mask-top

     

       936
       936
       -
       ```

     

       937
       937
       -
       

     

       938
       938
       -
       #### Mask Origin

     

       939
       939
       -
       ```

     

       940
       940
       -
       mask-origin-border, mask-origin-padding, mask-origin-content

     

       941
       941
       -
       ```

     

       942
       942
       -
       

     

       943
       943
       -
       #### Mask Clip

     

       944
       944
       -
       ```

     

       945
       945
       -
       mask-clip-border, mask-clip-padding, mask-clip-content

     

       946
       946
       -
       ```

     

       947
       947
       -
       

     

       948
       948
       -
       #### Mask Composite

     

       949
       949
       -
       ```

     

       950
       950
       -
       mask-composite-add, mask-composite-subtract, mask-composite-intersect, mask-composite-exclude

     

       951
       951
       -
       ```

     

       952
       952
       -
       

     

       953
       953
       -
       #### Mask Mode

     

       954
       954
       -
       ```

     

       955
       955
       -
       mask-mode-match-source, mask-mode-luminance, mask-mode-alpha

     

       956
       956
       -
       ```

     

       957
       957
       -
       

     

       958
       958
       -
       #### Mask Type

     

       959
       959
       -
       ```

     

       960
       960
       -
       mask-type-luminance, mask-type-alpha

     

       961
       961
       -
       ```

     

       962
       962
       -
       

     

       963
       963
       -
       ### Tables

     

       964
       964
       -
       

     

       965
       965
       -
       #### Border Collapse

     

       966
       966
       -
       ```

     

       967
       967
       -
       border-collapse, border-separate

     

       968
       968
       -
       ```

     

       969
       969
       -
       

     

       970
       970
       -
       #### Border Spacing

     

       971
       971
       -
       ```

     

       972
       972
       -
       border-spacing-0, border-spacing-px, border-spacing-0.5, border-spacing-1, border-spacing-1.5, border-spacing-2, border-spacing-2.5, border-spacing-3, border-spacing-3.5, border-spacing-4, border-spacing-5, border-spacing-6, border-spacing-7, border-spacing-8, border-spacing-9, border-spacing-10, border-spacing-11, border-spacing-12, border-spacing-14, border-spacing-16, border-spacing-20, border-spacing-24, border-spacing-28, border-spacing-32, border-spacing-36, border-spacing-40, border-spacing-44, border-spacing-48, border-spacing-52, border-spacing-56, border-spacing-60, border-spacing-64, border-spacing-72, border-spacing-80, border-spacing-96

     

       973
       973
       -
       border-spacing-x-0, border-spacing-y-0 (and all other spacing values)

     

       974
       974
       -
       ```

     

       975
       975
       -
       

     

       976
       976
       -
       #### Table Layout

     

       977
       977
       -
       ```

     

       978
       978
       -
       table-auto, table-fixed

     

       979
       979
       -
       ```

     

       980
       980
       -
       

     

       981
       981
       -
       #### Caption Side

     

       982
       982
       -
       ```

     

       983
       983
       -
       caption-top, caption-bottom

     

       984
       984
       -
       ```

     

       985
       985
       -
       

     

       986
       986
       -
       ### Transforms

     

       987
       987
       -
       

     

       988
       988
       -
       #### Scale

     

       989
       989
       -
       ```

     

       990
       990
       -
       scale-0, scale-50, scale-75, scale-90, scale-95, scale-100, scale-105, scale-110, scale-125, scale-150

     

       991
       991
       -
       scale-x-0, scale-x-50, scale-x-75, scale-x-90, scale-x-95, scale-x-100, scale-x-105, scale-x-110, scale-x-125, scale-x-150

     

       992
       992
       -
       scale-y-0, scale-y-50, scale-y-75, scale-y-90, scale-y-95, scale-y-100, scale-y-105, scale-y-110, scale-y-125, scale-y-150

     

       993
       993
       -
       ```

     

       994
       994
       -
       

     

       995
       995
       -
       #### Scale Z (NEW in v4)

     

       996
       996
       -
       ```

     

       997
       997
       -
       scale-z-0, scale-z-50, scale-z-75, scale-z-90, scale-z-95, scale-z-100, scale-z-105, scale-z-110, scale-z-125, scale-z-150

     

       998
       998
       -
       ```

     

       999
       999
       -
       

     

       1000
       1000
       -
       #### Rotate

     

       1001
       1001
       -
       ```

     

       1002
       1002
       -
       rotate-0, rotate-1, rotate-2, rotate-3, rotate-6, rotate-12, rotate-45, rotate-90, rotate-180, -rotate-180, -rotate-90, -rotate-45, -rotate-12, -rotate-6, -rotate-3, -rotate-2, -rotate-1

     

       1003
       1003
       -
       ```

     

       1004
       1004
       -
       

     

       1005
       1005
       -
       #### Rotate X/Y (NEW in v4)

     

       1006
       1006
       -
       ```

     

       1007
       1007
       -
       rotate-x-0, rotate-x-1, rotate-x-2, rotate-x-3, rotate-x-6, rotate-x-12, rotate-x-45, rotate-x-90, rotate-x-180, -rotate-x-180, -rotate-x-90, -rotate-x-45, -rotate-x-12, -rotate-x-6, -rotate-x-3, -rotate-x-2, -rotate-x-1

     

       1008
       1008
       -
       rotate-y-0, rotate-y-1, rotate-y-2, rotate-y-3, rotate-y-6, rotate-y-12, rotate-y-45, rotate-y-90, rotate-y-180, -rotate-y-180, -rotate-y-90, -rotate-y-45, -rotate-y-12, -rotate-y-6, -rotate-y-3, -rotate-y-2, -rotate-y-1

     

       1009
       1009
       -
       ```

     

       1010
       1010
       -
       

     

       1011
       1011
       -
       #### Translate

     

       1012
       1012
       -
       ```

     

       1013
       1013
       -
       translate-x-0, translate-x-px, translate-x-0.5, translate-x-1, translate-x-1.5, translate-x-2, translate-x-2.5, translate-x-3, translate-x-3.5, translate-x-4, translate-x-5, translate-x-6, translate-x-7, translate-x-8, translate-x-9, translate-x-10, translate-x-11, translate-x-12, translate-x-14, translate-x-16, translate-x-20, translate-x-24, translate-x-28, translate-x-32, translate-x-36, translate-x-40, translate-x-44, translate-x-48, translate-x-52, translate-x-56, translate-x-60, translate-x-64, translate-x-72, translate-x-80, translate-x-96, translate-x-1/2, translate-x-1/3, translate-x-2/3, translate-x-1/4, translate-x-2/4, translate-x-3/4, translate-x-full

     

       1014
       1014
       -
       translate-y-0, translate-y-px, translate-y-0.5, translate-y-1, translate-y-1.5, translate-y-2, translate-y-2.5, translate-y-3, translate-y-3.5, translate-y-4, translate-y-5, translate-y-6, translate-y-7, translate-y-8, translate-y-9, translate-y-10, translate-y-11, translate-y-12, translate-y-14, translate-y-16, translate-y-20, translate-y-24, translate-y-28, translate-y-32, translate-y-36, translate-y-40, translate-y-44, translate-y-48, translate-y-52, translate-y-56, translate-y-60, translate-y-64, translate-y-72, translate-y-80, translate-y-96, translate-y-1/2, translate-y-1/3, translate-y-2/3, translate-y-1/4, translate-y-2/4, translate-y-3/4, translate-y-full

     

       1015
       1015
       -
       ```

     

       1016
       1016
       -
       

     

       1017
       1017
       -
       #### Translate Z (NEW in v4)

     

       1018
       1018
       -
       ```

     

       1019
       1019
       -
       translate-z-0, translate-z-px, translate-z-0.5, translate-z-1, translate-z-1.5, translate-z-2, translate-z-2.5, translate-z-3, translate-z-3.5, translate-z-4, translate-z-5, translate-z-6, translate-z-7, translate-z-8, translate-z-9, translate-z-10, translate-z-11, translate-z-12, translate-z-14, translate-z-16, translate-z-20, translate-z-24, translate-z-28, translate-z-32, translate-z-36, translate-z-40, translate-z-44, translate-z-48, translate-z-52, translate-z-56, translate-z-60, translate-z-64, translate-z-72, translate-z-80, translate-z-96

     

       1020
       1020
       -
       ```

     

       1021
       1021
       -
       

     

       1022
       1022
       -
       #### Skew

     

       1023
       1023
       -
       ```

     

       1024
       1024
       -
       skew-x-0, skew-x-1, skew-x-2, skew-x-3, skew-x-6, skew-x-12, -skew-x-12, -skew-x-6, -skew-x-3, -skew-x-2, -skew-x-1

     

       1025
       1025
       -
       skew-y-0, skew-y-1, skew-y-2, skew-y-3, skew-y-6, skew-y-12, -skew-y-12, -skew-y-6, -skew-y-3, -skew-y-2, -skew-y-1

     

       1026
       1026
       -
       ```

     

       1027
       1027
       -
       

     

       1028
       1028
       -
       #### Transform Origin

     

       1029
       1029
       -
       ```

     

       1030
       1030
       -
       origin-center, origin-top, origin-top-right, origin-right, origin-bottom-right, origin-bottom, origin-bottom-left, origin-left, origin-top-left

     

       1031
       1031
       -
       ```

     

       1032
       1032
       -
       

     

       1033
       1033
       -
       #### Transform Style (NEW in v4)

     

       1034
       1034
       -
       ```

     

       1035
       1035
       -
       transform-style-flat, transform-style-preserve-3d

     

       1036
       1036
       -
       ```

     

       1037
       1037
       -
       

     

       1038
       1038
       -
       #### Perspective (NEW in v4)

     

       1039
       1039
       -
       ```

     

       1040
       1040
       -
       perspective-none, perspective-250, perspective-500, perspective-750, perspective-1000, perspective-distant

     

       1041
       1041
       -
       ```

     

       1042
       1042
       -
       

     

       1043
       1043
       -
       #### Perspective Origin (NEW in v4)

     

       1044
       1044
       -
       ```

     

       1045
       1045
       -
       perspective-origin-center, perspective-origin-top, perspective-origin-top-right, perspective-origin-right, perspective-origin-bottom-right, perspective-origin-bottom, perspective-origin-bottom-left, perspective-origin-left, perspective-origin-top-left

     

       1046
       1046
       -
       ```

     

       1047
       1047
       -
       

     

       1048
       1048
       -
       ### Interactivity

     

       1049
       1049
       -
       

     

       1050
       1050
       -
       #### Accent Color

     

       1051
       1051
       -
       ```

     

       1052
       1052
       -
       accent-auto, accent-inherit, accent-current, accent-transparent, accent-black, accent-white

     

       1053
       1053
       -
       accent-{color} (all color utilities work with accent- prefix)

     

       1054
       1054
       -
       ```

     

       1055
       1055
       -
       

     

       1056
       1056
       -
       #### Appearance

     

       1057
       1057
       -
       ```

     

       1058
       1058
       -
       appearance-none, appearance-auto

     

       1059
       1059
       -
       ```

     

       1060
       1060
       -
       

     

       1061
       1061
       -
       #### Cursor

     

       1062
       1062
       -
       ```

     

       1063
       1063
       -
       cursor-auto, cursor-default, cursor-pointer, cursor-wait, cursor-text, cursor-move, cursor-help, cursor-not-allowed, cursor-none, cursor-context-menu, cursor-progress, cursor-cell, cursor-crosshair, cursor-vertical-text, cursor-alias, cursor-copy, cursor-no-drop, cursor-grab, cursor-grabbing, cursor-all-scroll, cursor-col-resize, cursor-row-resize, cursor-n-resize, cursor-e-resize, cursor-s-resize, cursor-w-resize, cursor-ne-resize, cursor-nw-resize, cursor-se-resize, cursor-sw-resize, cursor-ew-resize, cursor-ns-resize, cursor-nesw-resize, cursor-nwse-resize, cursor-zoom-in, cursor-zoom-out

     

       1064
       1064
       -
       ```

     

       1065
       1065
       -
       

     

       1066
       1066
       -
       #### Caret Color

     

       1067
       1067
       -
       All color utilities work with `caret-` prefix

     

       1068
       1068
       -
       

     

       1069
       1069
       -
       #### Pointer Events

     

       1070
       1070
       -
       ```

     

       1071
       1071
       -
       pointer-events-none, pointer-events-auto

     

       1072
       1072
       -
       ```

     

       1073
       1073
       -
       

     

       1074
       1074
       -
       #### Resize

     

       1075
       1075
       -
       ```

     

       1076
       1076
       -
       resize-none, resize, resize-y, resize-x

     

       1077
       1077
       -
       ```

     

       1078
       1078
       -
       

     

       1079
       1079
       -
       #### Scroll Behavior

     

       1080
       1080
       -
       ```

     

       1081
       1081
       -
       scroll-auto, scroll-smooth

     

       1082
       1082
       -
       ```

     

       1083
       1083
       -
       

     

       1084
       1084
       -
       #### Scroll Margin

     

       1085
       1085
       -
       ```

     

       1086
       1086
       -
       scroll-m-0, scroll-m-px, scroll-m-0.5, scroll-m-1, scroll-m-1.5, scroll-m-2, scroll-m-2.5, scroll-m-3, scroll-m-3.5, scroll-m-4, scroll-m-5, scroll-m-6, scroll-m-7, scroll-m-8, scroll-m-9, scroll-m-10, scroll-m-11, scroll-m-12, scroll-m-14, scroll-m-16, scroll-m-20, scroll-m-24, scroll-m-28, scroll-m-32, scroll-m-36, scroll-m-40, scroll-m-44, scroll-m-48, scroll-m-52, scroll-m-56, scroll-m-60, scroll-m-64, scroll-m-72, scroll-m-80, scroll-m-96

     

       1087
       1087
       -
       scroll-mx-0, scroll-my-0, scroll-ms-0, scroll-me-0, scroll-mt-0, scroll-mr-0, scroll-mb-0, scroll-ml-0 (and all spacing values)

     

       1088
       1088
       -
       ```

     

       1089
       1089
       -
       

     

       1090
       1090
       -
       #### Scroll Padding

     

       1091
       1091
       -
       ```

     

       1092
       1092
       -
       scroll-p-0, scroll-p-px, scroll-p-0.5, scroll-p-1, scroll-p-1.5, scroll-p-2, scroll-p-2.5, scroll-p-3, scroll-p-3.5, scroll-p-4, scroll-p-5, scroll-p-6, scroll-p-7, scroll-p-8, scroll-p-9, scroll-p-10, scroll-p-11, scroll-p-12, scroll-p-14, scroll-p-16, scroll-p-20, scroll-p-24, scroll-p-28, scroll-p-32, scroll-p-36, scroll-p-40, scroll-p-44, scroll-p-48, scroll-p-52, scroll-p-56, scroll-p-60, scroll-p-64, scroll-p-72, scroll-p-80, scroll-p-96

     

       1093
       1093
       -
       scroll-px-0, scroll-py-0, scroll-ps-0, scroll-pe-0, scroll-pt-0, scroll-pr-0, scroll-pb-0, scroll-pl-0 (and all spacing values)

     

       1094
       1094
       -
       ```

     

       1095
       1095
       -
       

     

       1096
       1096
       -
       #### Scroll Snap Align

     

       1097
       1097
       -
       ```

     

       1098
       1098
       -
       snap-start, snap-end, snap-center, snap-align-none

     

       1099
       1099
       -
       ```

     

       1100
       1100
       -
       

     

       1101
       1101
       -
       #### Scroll Snap Stop

     

       1102
       1102
       -
       ```

     

       1103
       1103
       -
       snap-normal, snap-always

     

       1104
       1104
       -
       ```

     

       1105
       1105
       -
       

     

       1106
       1106
       -
       #### Scroll Snap Type

     

       1107
       1107
       -
       ```

     

       1108
       1108
       -
       snap-none, snap-x, snap-y, snap-both, snap-mandatory, snap-proximity

     

       1109
       1109
       -
       ```

     

       1110
       1110
       -
       

     

       1111
       1111
       -
       #### Touch Action

     

       1112
       1112
       -
       ```

     

       1113
       1113
       -
       touch-auto, touch-none, touch-pan-x, touch-pan-left, touch-pan-right, touch-pan-y, touch-pan-up, touch-pan-down, touch-pinch-zoom, touch-manipulation

     

       1114
       1114
       -
       ```

     

       1115
       1115
       -
       

     

       1116
       1116
       -
       #### User Select

     

       1117
       1117
       -
       ```

     

       1118
       1118
       -
       select-none, select-text, select-all, select-auto

     

       1119
       1119
       -
       ```

     

       1120
       1120
       -
       

     

       1121
       1121
       -
       #### Will Change

     

       1122
       1122
       -
       ```

     

       1123
       1123
       -
       will-change-auto, will-change-scroll, will-change-contents, will-change-transform

     

       1124
       1124
       -
       ```

     

       1125
       1125
       -
       

     

       1126
       1126
       -
       ### SVG

     

       1127
       1127
       -
       

     

       1128
       1128
       -
       #### Fill

     

       1129
       1129
       -
       ```

     

       1130
       1130
       -
       fill-none, fill-inherit, fill-current, fill-transparent, fill-black, fill-white

     

       1131
       1131
       -
       fill-{color} (all color utilities work with fill- prefix)

     

       1132
       1132
       -
       ```

     

       1133
       1133
       -
       

     

       1134
       1134
       -
       #### Stroke

     

       1135
       1135
       -
       ```

     

       1136
       1136
       -
       stroke-none, stroke-inherit, stroke-current, stroke-transparent, stroke-black, stroke-white

     

       1137
       1137
       -
       stroke-{color} (all color utilities work with stroke- prefix)

     

       1138
       1138
       -
       ```

     

       1139
       1139
       -
       

     

       1140
       1140
       -
       #### Stroke Width

     

       1141
       1141
       -
       ```

     

       1142
       1142
       -
       stroke-0, stroke-1, stroke-2

     

       1143
       1143
       -
       ```

     

       1144
       1144
       -
       

     

       1145
       1145
       -
       ### Accessibility

     

       1146
       1146
       -
       

     

       1147
       1147
       -
       #### Screen Readers

     

       1148
       1148
       -
       ```

     

       1149
       1149
       -
       sr-only, not-sr-only

     

       1150
       1150
       -
       ```

     

       1151
       1151
       -
       

     

       1152
       1152
       -
       #### Forced Color Adjust

     

       1153
       1153
       -
       ```

     

       1154
       1154
       -
       forced-color-adjust-auto, forced-color-adjust-none

     

       1155
       1155
       -
       ```

     

       1156
       1156
       -
       

     

       1157
       1157
       -
       ### Container Queries (NEW in v4)

     

       1158
       1158
       -
       

     

       1159
       1159
       -
       #### Container Type

     

       1160
       1160
       -
       ```

     

       1161
       1161
       -
       @container, @container-normal, @container-size, @container-inline-size

     

       1162
       1162
       -
       ```

     

       1163
       1163
       -
       

     

       1164
       1164
       -
       #### Container Query Variants

     

       1165
       1165
       -
       ```

     

       1166
       1166
       -
       @xs:, @sm:, @md:, @lg:, @xl:, @2xl:, @3xl:, @4xl:, @5xl:, @6xl:, @7xl:

     

       1167
       1167
       -
       @min-w-0:, @min-w-xs:, @min-w-sm:, @min-w-md:, @min-w-lg:, @min-w-xl:, @min-w-2xl:, @min-w-3xl:, @min-w-4xl:, @min-w-5xl:, @min-w-6xl:, @min-w-7xl:

     

       1168
       1168
       -
       @max-w-xs:, @max-w-sm:, @max-w-md:, @max-w-lg:, @max-w-xl:, @max-w-2xl:, @max-w-3xl:, @max-w-4xl:, @max-w-5xl:, @max-w-6xl:, @max-w-7xl:

     

       1169
       1169
       -
       @min-h-0:, @min-h-xs:, @min-h-sm:, @min-h-md:, @min-h-lg:, @min-h-xl:, @min-h-2xl:, @min-h-3xl:, @min-h-4xl:, @min-h-5xl:, @min-h-6xl:, @min-h-7xl:

     

       1170
       1170
       -
       @max-h-xs:, @max-h-sm:, @max-h-md:, @max-h-lg:, @max-h-xl:, @max-h-2xl:, @max-h-3xl:, @max-h-4xl:, @max-h-5xl:, @max-h-6xl:, @max-h-7xl:

     

       1171
       1171
       -
       ```

     

       1172
       1172
       -
       

     

       1173
       1173
       -
       ### Responsive Design

     

       1174
       1174
       -
       

     

       1175
       1175
       -
       #### Breakpoint Variants

     

       1176
       1176
       -
       ```

     

       1177
       1177
       -
       sm:, md:, lg:, xl:, 2xl:

     

       1178
       1178
       -
       max-sm:, max-md:, max-lg:, max-xl:, max-2xl:

     

       1179
       1179
       -
       ```

     

       1180
       1180
       -
       

     

       1181
       1181
       -
       ### State Variants

     

       1182
       1182
       -
       

     

       1183
       1183
       -
       #### Hover, Focus, etc.

     

       1184
       1184
       -
       ```

     

       1185
       1185
       -
       hover:, focus:, focus-within:, focus-visible:, active:, visited:, target:, disabled:, enabled:, checked:, indeterminate:, default:, required:, valid:, invalid:, in-range:, out-of-range:, placeholder-shown:, autofill:, read-only:

     

       1186
       1186
       -
       ```

     

       1187
       1187
       -
       

     

       1188
       1188
       -
       #### Group States

     

       1189
       1189
       -
       ```

     

       1190
       1190
       -
       group-hover:, group-focus:, group-focus-within:, group-focus-visible:, group-active:, group-visited:, group-target:, group-disabled:, group-enabled:, group-checked:, group-indeterminate:, group-default:, group-required:, group-valid:, group-invalid:, group-in-range:, group-out-of-range:, group-placeholder-shown:, group-autofill:, group-read-only:

     

       1191
       1191
       -
       ```

     

       1192
       1192
       -
       

     

       1193
       1193
       -
       #### Peer States

     

       1194
       1194
       -
       ```

     

       1195
       1195
       -
       peer-hover:, peer-focus:, peer-focus-within:, peer-focus-visible:, peer-active:, peer-visited:, peer-target:, peer-disabled:, peer-enabled:, peer-checked:, peer-indeterminate:, peer-default:, peer-required:, peer-valid:, peer-invalid:, peer-in-range:, peer-out-of-range:, peer-placeholder-shown:, peer-autofill:, peer-read-only:

     

       1196
       1196
       -
       ```

     

       1197
       1197
       -
       

     

       1198
       1198
       -
       #### NEW Variants in v4

     

       1199
       1199
       -
       ```

     

       1200
       1200
       -
       @starting-style:, not-*, nth-*, in-*, inert:, open: (for popovers)

     

       1201
       1201
       -
       ```

     

       1202
       1202
       -
       

     

       1203
       1203
       -
       ### Media Queries

     

       1204
       1204
       -
       

     

       1205
       1205
       -
       #### Dark Mode

     

       1206
       1206
       -
       ```

     

       1207
       1207
       -
       dark:

     

       1208
       1208
       -
       ```

     

       1209
       1209
       -
       

     

       1210
       1210
       -
       #### Motion

     

       1211
       1211
       -
       ```

     

       1212
       1212
       -
       motion-safe:, motion-reduce:

     

       1213
       1213
       -
       ```

     

       1214
       1214
       -
       

     

       1215
       1215
       -
       #### Contrast

     

       1216
       1216
       -
       ```

     

       1217
       1217
       -
       contrast-more:, contrast-less:

     

       1218
       1218
       -
       ```

     

       1219
       1219
       -
       

     

       1220
       1220
       -
       #### Print

     

       1221
       1221
       -
       ```

     

       1222
       1222
       -
       print:

     

       1223
       1223
       -
       ```

     

       1224
       1224
       -
       

     

       1225
       1225
       -
       #### Orientation

     

       1226
       1226
       -
       ```

     

       1227
       1227
       -
       portrait:, landscape:

     

       1228
       1228
       -
       ```

     

       1229
       1229
       -
       

     

       1230
       1230
       -
       ### Content

     

       1231
       1231
       -
       ```

     

       1232
       1232
       -
       content-none, content-['text']

     

       1233
       1233
       -
       ```

     

       1234
       1234
       -
       

     

       1235
       1235
       -
       ### Arbitrary Values

     

       1236
       1236
       -
       You can use arbitrary values with square brackets for any property:

     

       1237
       1237
       -
       ```

     

       1238
       1238
       -
       w-[123px], h-[456px], text-[#bada55], bg-[url('...')], top-[117px], left-[344px]

     

       1239
       1239
       -
       m-[12px], p-[24px], grid-cols-[200px_minmax(900px,_1fr)_100px]

     

       1240
       1240
       -
       ```

     

       1241
       1241
       -
       

     

       1242
       1242
       -
       ### Arbitrary Properties

     

       1243
       1243
       -
       ```

     

       1244
       1244
       -
       [mask-type:luminance], [tab-size:4], [@supports(backdrop-filter:blur(0))]:bg-white/75

     

       1245
       1245
       -
       ```

     

       1246
       1246
       -
       

     

       1247
       1247
       -
       ### Arbitrary Variants

     

       1248
       1248
       -
       ```

     

       1249
       1249
       -
       [&:nth-child(3)]:, [&:hover]:, [&_p]:, [@media(min-width:600px)]:

     

       1250
       1250
       -
       [@supports(backdrop-filter:blur(0))]:, [data-theme="dark"]:

     

       1251
       1251
       -
       ```

     

       1252
       1252
       -
       

     

       1253
       1253
       -
       ## Common v4 Pitfalls to Avoid

     

       1254
       1254
       -
       

     

       1255
       1255
       -
       ### Don't Use These Deprecated Patterns

     

       1256
       1256
       -
       - ❌ `@tailwind base; @tailwind components; @tailwind utilities;`

     

       1257
       1257
       -
       - ❌ `text-opacity-50` → Use `text-white/50` instead

     

       1258
       1258
       -
       - ❌ `bg-opacity-25` → Use `bg-blue-500/25` instead

     

       1259
       1259
       -
       - ❌ `border` without color (now uses currentColor, not gray-200)

     

       1260
       1260
       -
       - ❌ `ring` without explicit width (now 1px, was 3px)

     

       1261
       1261
       -
       - ❌ `@layer utilities` → Use `@utility` instead

     

       1262
       1262
       -
       - ❌ JavaScript config for new projects → Use CSS `@theme`

     

       1263
       1263
       -
       

     

       1264
       1264
       -
       ### Modern v4 Alternatives

     

       1265
       1265
       -
       - ✅ `@import "tailwindcss";`

     

       1266
       1266
       -
       - ✅ `text-white/50` for semi-transparent text

     

       1267
       1267
       -
       - ✅ `bg-blue-500/25` for semi-transparent backgrounds

     

       1268
       1268
       -
       - ✅ `border border-gray-200` for explicit border color

     

       1269
       1269
       -
       - ✅ `ring-3` for 3px ring width

     

       1270
       1270
       -
       - ✅ `@utility` for custom utilities

     

       1271
       1271
       -
       - ✅ `@theme` for configuration

     

       1272
       1272
       -
       

     

       1273
       1273
       -
       ## Performance Best Practices

     

       1274
       1274
       -
       

     

       1275
       1275
       -
       ### Leverage v4's Performance Features

     

       1276
       1276
       -
       - Use automatic content detection (no manual `content` config needed)

     

       1277
       1277
       -
       - Prefer container queries over viewport queries for true component responsiveness

     

       1278
       1278
       -
       - Use CSS variables from `@theme` for dynamic styling

     

       1279
       1279
       -
       - Leverage the new OKLCH color system for better color consistency

     

       1280
       1280
       -
       

     

       1281
       1281
       -
       ### Efficient Class Usage

     

       1282
       1282
       -
       ```html

     

       1283
       1283
       -
       <!-- Good: Use size-* for square elements -->

     

       1284
       1284
       -
       <div class="size-12"></div>

     

       1285
       1285
       -
       

     

       1286
       1286
       -
       <!-- Instead of: -->

     

       1287
       1287
       -
       <div class="w-12 h-12"></div>

     

       1288
       1288
       -
       

     

       1289
       1289
       -
       <!-- Good: Use container queries for component responsiveness -->

     

       1290
       1290
       -
       <div class="@container">

     

       1291
       1291
       -
         <div class="p-4 @lg:p-8">Content</div>

     

       1292
       1292
       -
       </div>

     

       1293
       1293
       -
       

     

       1294
       1294
       -
       <!-- Good: Use CSS variables for dynamic values -->

     

       1295
       1295
       -
       <div class="bg-[var(--theme-primary)] text-[var(--theme-on-primary)]">

     

       1296
       1296
       -
         Dynamic theming

     

       1297
       1297
       -
       </div>

     

       1298
       1298
       -
       ```

     

       1299
       1299
       -
       

     

       1300
       1300
       -
       ## Framework Integration

     

       1301
       1301
       -
       

     

       1302
       1302
       -
       ### Svelte 5

     

       1303
       1303
       -
       ```svelte

     

       1304
       1304
       -
       <script>

     

       1305
       1305
       -
         let { variant = "primary", children } = $props();

     

       1306
       1306
       -
         

     

       1307
       1307
       -
         const buttonClasses = $derived(() => [

     

       1308
       1308
       -
           'px-4 py-2 rounded-md font-medium transition-colors',

     

       1309
       1309
       -
           variant === 'primary' 

     

       1310
       1310
       -
             ? 'bg-brand text-white hover:bg-brand/90'

     

       1311
       1311
       -
             : 'bg-gray-100 text-gray-900 hover:bg-gray-200'

     

       1312
       1312
       -
         ].join(' '));

     

       1313
       1313
       -
       </script>

     

       1314
       1314
       -
       

     

       1315
       1315
       -
       <button class={buttonClasses}>

     

       1316
       1316
       -
         {@render children()}

     

       1317
       1317
       -
       </button>

     

       1318
       1318
       -
       

     

       1319
       1319
       -
       <style>

     

       1320
       1320
       -
       @import "tailwindcss";

     

       1321
       1321
       -
       

     

       1322
       1322
       -
       @theme {

     

       1323
       1323
       -
         --color-brand: oklch(0.5 0.2 240);

     

       1324
       1324
       -
       }

     

       1325
       1325
       -
       </style>

     

       1326
       1326
       -
       ```

     

       1327
       1327
       -
       

     

       1328
       1328
       -
       ## Debugging & Development

     

       1329
       1329
       -
       

     

       1330
       1330
       -
       ### Browser DevTools Tips

     

       1331
       1331
       -
       1. **Inspect CSS Variables**: Check `:root` in DevTools to see all theme variables

     

       1332
       1332
       -
       2. **Check Cascade Layers**: Use the Layers panel to understand style precedence

     

       1333
       1333
       -
       3. **Verify OKLCH Support**: Test colors in modern browsers vs fallbacks

     

       1334
       1334
       -
       4. **Container Query Debugging**: Use the @container panel in DevTools

     

       1335
       1335
       -
       

     

       1336
       1336
       -
       ### Common Debug Commands

     

       1337
       1337
       -
       ```bash

     

       1338
       1338
       -
       # Check if utilities are being generated

     

       1339
       1339
       -
       npx tailwindcss --watch --content "./src/**/*.{html,js,jsx,ts,tsx}"

     

       1340
       1340
       -
       

     

       1341
       1341
       -
       # Verify v4 installation

     

       1342
       1342
       -
       npm list tailwindcss

     

       1343
       1343
       -
       

     

       1344
       1344
       -
       # Check for conflicting PostCSS plugins

     

       1345
       1345
       -
       npm list | grep postcss

     

       1346
       1346
       -
       ```

     

       1347
       1347
       -
       

     

       1348
       1348
       -
       ### VS Code Extensions

     

       1349
       1349
       -
       - Tailwind CSS IntelliSense (updated for v4)

     

       1350
       1350
       -
       - PostCSS Language Support

     

       1351
       1351
       -
       

     

       1352
       1352
       -
       ## v3 to v4 Migration Checklist

     

       1353
       1353
       -
       

     

       1354
       1354
       -
       ### Pre-Migration

     

       1355
       1355
       -
       - [ ] Backup your project

     

       1356
       1356
       -
       - [ ] Ensure Node.js 20+ is installed

     

       1357
       1357
       -
       - [ ] Check browser support requirements (Safari 16.4+, Chrome 111+, Firefox 128+)

     

       1358
       1358
       -
       

     

       1359
       1359
       -
       ### Automated Migration

     

       1360
       1360
       -
       ```bash

     

       1361
       1361
       -
       npx @tailwindcss/upgrade@next

     

       1362
       1362
       -
       ```

     

       1363
       1363
       -
       

     

       1364
       1364
       -
       ### Manual Verification

     

       1365
       1365
       -
       - [ ] Replace `@tailwind` directives with `@import "tailwindcss"`

     

       1366
       1366
       -
       - [ ] Move `tailwind.config.js` content to CSS `@theme`

     

       1367
       1367
       -
       - [ ] Update deprecated utility classes

     

       1368
       1368
       -
       - [ ] Test container queries functionality

     

       1369
       1369
       -
       - [ ] Verify custom component styles

     

       1370
       1370
       -
       - [ ] Check 3D transform support

     

       1371
       1371
       -
       - [ ] Test mask utilities if used

     

       1372
       1372
       -
       - [ ] Validate color consistency (OKLCH vs RGB)

     

       1373
       1373
       -
       

     

       1374
       1374
       -
       ### Testing

     

       1375
       1375
       -
       - [ ] Test in all target browsers

     

       1376
       1376
       -
       - [ ] Verify responsive design still works

     

       1377
       1377
       -
       - [ ] Check dark mode functionality

     

       1378
       1378
       -
       - [ ] Test custom animations

     

       1379
       1379
       -
       - [ ] Validate accessibility features

     

       1380
       1380
       -
       

     

       1381
       1381
       -
       ## Production-Ready Component Patterns

     

       1382
       1382
       -
       

     

       1383
       1383
       -
       ### Modern Card Component

     

       1384
       1384
       -
       ```html

     

       1385
       1385
       -
       <div class="@container group">

     

       1386
       1386
       -
         <article class="

     

       1387
       1387
       -
           bg-white dark:bg-gray-900 

     

       1388
       1388
       -
           rounded-xl shadow-sm border border-gray-200 dark:border-gray-800

     

       1389
       1389
       -
           overflow-hidden transition-all duration-200

     

       1390
       1390
       -
           hover:shadow-md hover:-translate-y-0.5

     

       1391
       1391
       -
           @sm:flex @sm:items-center

     

       1392
       1392
       -
         ">

     

       1393
       1393
       -
           <div class="@sm:flex-shrink-0">

     

       1394
       1394
       -
             <img class="h-48 w-full object-cover @sm:h-full @sm:w-48" src="..." alt="...">

     

       1395
       1395
       -
           </div>

     

       1396
       1396
       -
           <div class="p-6 @sm:p-8">

     

       1397
       1397
       -
             <h3 class="text-lg font-semibold text-gray-900 dark:text-white @lg:text-xl">

     

       1398
       1398
       -
               Card Title

     

       1399
       1399
       -
             </h3>

     

       1400
       1400
       -
             <p class="mt-2 text-gray-600 dark:text-gray-300 @lg:text-lg">

     

       1401
       1401
       -
               Card description that adapts to container size.

     

       1402
       1402
       -
             </p>

     

       1403
       1403
       -
           </div>

     

       1404
       1404
       -
         </article>

     

       1405
       1405
       -
       </div>

     

       1406
       1406
       -
       ```

     

       1407
       1407
       -
       

     

       1408
       1408
       -
       ### 3D Interactive Button

     

       1409
       1409
       -
       ```html

     

       1410
       1410
       -
       <button class="

     

       1411
       1411
       -
         relative px-6 py-3 bg-blue-600 text-white font-medium rounded-lg

     

       1412
       1412
       -
         transform-3d perspective-1000 

     

       1413
       1413
       -
         transition-all duration-200

     

       1414
       1414
       -
         hover:rotate-x-12 hover:scale-105 hover:shadow-xl

     

       1415
       1415
       -
         active:scale-95 active:rotate-x-6

     

       1416
       1416
       -
         focus:outline-none focus:ring-2 focus:ring-blue-500/50

     

       1417
       1417
       -
       ">

     

       1418
       1418
       -
         3D Button

     

       1419
       1419
       -
       </button>

     

       1420
       1420
       -
       ```

     

       1421
       1421
       -
       

     

       1422
       1422
       -
       Remember: Tailwind CSS v4 is designed for modern browsers and modern development workflows. Embrace the new CSS-first approach and leverage the powerful new features for better performance and developer experience.

+6 -10

tailwind.opam

···

       1
       1
        
       # This file is generated by dune, edit dune-project instead

     

       2
       2
        
       opam-version: "2.0"

     

       3
       3
        
       synopsis: "Type-safe Tailwind CSS generation for OCaml"

     

       4
       4
       -
       description:

     

       5
       5
       -
         "A comprehensive OCaml library for generating Tailwind CSS classes with full type safety"

     

       6
       6
       -
       maintainer: ["Your Name"]

     

       7
       7
       -
       authors: ["Your Name"]

     

       8
       8
       -
       license: "MIT"

     

       9
       9
       -
       homepage: "https://github.com/yourusername/tailwind-ocaml"

     

       10
       10
       -
       doc: "https://yourusername.github.io/tailwind-ocaml/"

     

       11
       11
       -
       bug-reports: "https://github.com/yourusername/tailwind-ocaml/issues"

     

       4
       4
       +
       description: "Library for generating Tailwind CSS classes"

     

       5
       5
       +
       maintainer: ["Anil Madhavapeddy"]

     

       6
       6
       +
       authors: ["Anil Madhavapeddy"]

     

       7
       7
       +
       license: "ISC"

     

       12
       8
        
       depends: [

     

       9
       9
       +
         "dune" {>= "3.18"}

     

       13
       10
        
         "ocaml"

     

       14
       14
       -
         "dune" {>= "3.0" & >= "3.0"}

     

       15
       11
        
         "alcotest" {with-test}

     

       16
       12
        
         "qcheck" {with-test}

     

       17
       13
        
         "odoc" {with-doc}

     
···

       30
       26
        
           "@doc" {with-doc}

     

       31
       27
        
         ]

     

       32
       28
        
       ]

     

       33
       33
       -
       dev-repo: "git+https://github.com/yourusername/tailwind-ocaml.git"

     

       29
       29
       +
       x-maintenance-intent: ["(latest)"]

Compare changes