@twind/preset-autoprefix 1.0.0-next.36 on Node.js NPM

a new pre-release is availabe: 1.0.0-next.36

@twind/preset-ext

feat: add descendants selector using _ eg &_span:underline; can be combined with other selectors &_h1>span~a:underline (cbd37a10)
fix: group/peer hocus named group regex (8f1288a0)

@twind/preset-tailwind

refactor: move hashing of vars (--tw-<...>) from preset-tailwind into core — this allows var hashing without the tailwind preset (ae979d12)
Add missing height properties max/min/fit-content (#285) 🙏🏽 @IgnusG!
fix: use text-decoration-line (346efc4e)

@twind/preset-tailwind-forms

fix: use text-decoration-line (346efc4e)

@twind/preset-typography

feat: add @twind/preset-typography (e3796bf9)
fix: use text-decoration-line (346efc4e)

twind

relax some typings where the actual generic type does not matter (28cbaef5)
fix: ensure colors DEFAULT values override nested objects (43d61076)
refactor: include full precendence in resume data (80ce410a)
fix: move styles generated by animation() into components layer — this allows to override animation properties using utilities (39b45125)

feat: auto dark colors (2f8f69d2)

If enabled, automatic dark colors are generated for each light color (eg no dark: variant is present). This feature is opt-in and twind provides a builtin function that works with tailwind color palettes (50, 100, 200, ..., 800, 900).

import { autoDarkColor } from 'twind'

defineConfig({
  // for tailwind color palettes: 50 -> 900, 100 -> 800, ..., 800 -> 100, 900 -> 50
  darkColor: autoDarkColor,
  // other possible implementations
  darkColor: (section, key, { theme }) => theme(`${section}.${key}-dark`) as ColorValue,
  darkColor: (section, key, { theme }) => theme(`dark.${section}.${key}`) as ColorValue,
  darkColor: (section, key, { theme }) => theme(`${section}.dark.${key}`) as ColorValue,
  darkColor: (section, key, context, lightColor) => generateDarkColor(lightColor),
})

Example css for text-gray-900:

.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgba(15, 23, 42, var(--tw-text-opacity));
}
@media (prefers-color-scheme: dark) {
  .text-gray-900 {
    --tw-text-opacity: 1;
    color: rgba(248, 250, 252, var(--tw-text-opacity));
  }
}

The auto-generated dark color can be overridden by the usual dark:... variant: text-gray-900 dark:text-gray-100.

.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgba(15, 23, 42, var(--tw-text-opacity));
}
@media (prefers-color-scheme: dark) {
  .text-gray-900 {
    --tw-text-opacity: 1;
    color: rgba(248, 250, 252, var(--tw-text-opacity));
  }
}
@media (prefers-color-scheme: dark) {
  .dark\\:text-gray-100 {
    --tw-text-opacity: 1;
    color: rgba(241, 245, 249, var(--tw-text-opacity));
  }
}

fix: handle color function in replacement for theme(...) (9fc5baec)
fix: always use rgba color (aaad7e44)
refactor: move hashing of vars (--tw-<...>) from preset-tailwind into core — this allows var hashing without the tailwind preset (ae979d12)
fix: prevent double class name hashing (fc9b0c27)
fix: use text-decoration-line (346efc4e)
fix: ensure theme returns all sections (8bbc2a42)
fix: use same color section detection (8dfd105b)

@twind/with-next

relax some typings where the actual generic type does not matter (28cbaef5)

@twind/preset-autoprefix 1.0.0-next.36 v1.0.0-next.36 on Node.js NPM