tw-in-js/twind v1.0.0-next.36

on GitHub

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)