tailwindcss 4.0.0-alpha.34 → 4.0.0-alpha.36

package/dist/plugin.d.mts

@@ -1,5 +1,5 @@
-import { a as PluginFn, C as Config, b as PluginWithConfig, c as PluginWithOptions } from './types-1Gt9iRen.mjs';
-import './resolve-config-Oupdq5Vo.mjs';
+import { a as PluginFn, C as Config, b as PluginWithConfig, c as PluginWithOptions } from './types-CAsznCh5.mjs';
+import './resolve-config-QUZ9b-Gn.mjs';
 import './colors.mjs';
 
 declare function createPlugin(handler: PluginFn, config?: Partial<Config>): PluginWithConfig;

package/dist/{resolve-config-Oupdq5Vo.d.mts → resolve-config-QUZ9b-Gn.d.mts}

@@ -6,6 +6,9 @@ type ArbitraryUtilityValue = {
      * ```
      * bg-[color:var(--my-color)]
      *     ^^^^^
+     *
+     * bg-(color:--my-color)
+     *     ^^^^^
      * ```
      */
     dataType: string | null;
@@ -16,6 +19,9 @@ type ArbitraryUtilityValue = {
      *
      * bg-[var(--my_variable)]
      *     ^^^^^^^^^^^^^^^^^^
+     *
+     * bg-(--my_variable)
+     *     ^^^^^^^^^^^^^^
      * ```
      */
     value: string;

package/dist/{types-1Gt9iRen.d.mts → types-CAsznCh5.d.mts}

@@ -1,4 +1,4 @@
-import { N as NamedUtilityValue, P as PluginUtils } from './resolve-config-Oupdq5Vo.mjs';
+import { N as NamedUtilityValue, P as PluginUtils } from './resolve-config-QUZ9b-Gn.mjs';
 
 type Config = UserConfig;
 type PluginFn = (api: PluginAPI) => void;

package/index.css

@@ -373,10 +373,10 @@
     --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
 
     --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
-    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06);
-    --drop-shadow-md: 0 4px 3px rgb(0 0 0 / 0.07), 0 2px 2px rgb(0 0 0 / 0.06);
-    --drop-shadow-lg: 0 10px 8px rgb(0 0 0 / 0.04), 0 4px 3px rgb(0 0 0 / 0.1);
-    --drop-shadow-xl: 0 20px 13px rgb(0 0 0 / 0.03), 0 8px 5px rgb(0 0 0 / 0.08);
+    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
+    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
+    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
+    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
     --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
 
     --ease-in: cubic-bezier(0.4, 0, 1, 1);
@@ -487,6 +487,7 @@
   5. Use the user's configured `sans` font-feature-settings by default.
   6. Use the user's configured `sans` font-variation-settings by default.
   7. Disable tap highlights on iOS.
+  8. Set a default `color-scheme`.
 */
 
   html,
@@ -510,6 +511,7 @@
       normal
     ); /* 6 */
     -webkit-tap-highlight-color: transparent; /* 7 */
+    color-scheme: light; /* 8 */
   }
 
   /*
@@ -648,67 +650,102 @@
   }
 
   /*
-  Inherit font styles in all browsers.
+  Use the modern Firefox focus style for all focusable elements.
 */
 
-  button,
-  input,
-  optgroup,
-  select,
-  textarea,
-  ::file-selector-button {
-    font: inherit;
-    font-feature-settings: inherit;
-    font-variation-settings: inherit;
-    letter-spacing: inherit;
-    color: inherit;
+  :-moz-focusring {
+    outline: auto;
   }
 
   /*
-  1. Remove the default background color of buttons by default.
-  2. Correct the inability to style the border radius in iOS Safari.
+  Add the correct vertical alignment in Chrome and Firefox.
 */
 
-  button,
-  input:where([type="button"], [type="reset"], [type="submit"]),
-  ::file-selector-button {
-    background: transparent; /* 1 */
-    appearance: button; /* 2 */
+  progress {
+    vertical-align: baseline;
   }
 
   /*
-  Use the modern Firefox focus style for all focusable elements.
+  Add the correct display in Chrome and Safari.
 */
 
-  :-moz-focusring {
-    outline: auto;
+  summary {
+    display: list-item;
   }
 
   /*
-  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+  Make lists unstyled by default.
 */
 
-  :-moz-ui-invalid {
-    box-shadow: none;
+  ol,
+  ul,
+  menu {
+    list-style: none;
   }
 
   /*
-  Add the correct vertical alignment in Chrome and Firefox.
+  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+      This can trigger a poorly considered lint error in some tools but is included by design.
 */
 
-  progress {
-    vertical-align: baseline;
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block; /* 1 */
+    vertical-align: middle; /* 2 */
   }
 
   /*
-  Correct the cursor style of increment and decrement buttons in Safari.
+  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
 */
 
-  ::-webkit-inner-spin-button,
-  ::-webkit-outer-spin-button {
+  img,
+  video {
+    max-width: 100%;
     height: auto;
   }
 
+  /*
+  Inherit font styles in all browsers.
+*/
+
+  button,
+  input,
+  select,
+  optgroup,
+  textarea,
+  ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+  }
+
+  /*
+  1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+  2. Set the default placeholder color to a semi-transparent version of the current text color.
+*/
+
+  ::placeholder {
+    opacity: 1; /* 1 */
+    color: color-mix(in oklch, currentColor 50%, transparent); /* 2 */
+  }
+
+  /*
+  Prevent resizing textareas horizontally by default.
+*/
+
+  textarea {
+    resize: vertical;
+  }
+
   /*
   Remove the inner padding in Chrome and Safari on macOS.
 */
@@ -756,67 +793,139 @@
   }
 
   /*
-  Add the correct display in Chrome and Safari.
+  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
 */
 
-  summary {
-    display: list-item;
+  :-moz-ui-invalid {
+    box-shadow: none;
   }
 
   /*
-  Make lists unstyled by default.
+  Correct the inability to style the border radius in iOS Safari.
 */
 
-  ol,
-  ul,
-  menu {
-    list-style: none;
+  button,
+  input:where([type="button"], [type="reset"], [type="submit"]),
+  ::file-selector-button {
+    appearance: button;
   }
 
   /*
-  Prevent resizing textareas horizontally by default.
+  Correct the cursor style of increment and decrement buttons in Safari.
 */
 
-  textarea {
-    resize: vertical;
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
   }
 
   /*
-  1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-  2. Set the default placeholder color to a semi-transparent version of the current text color.
+  Apply consistent base form control styles across browsers.
 */
 
-  ::placeholder {
-    opacity: 1; /* 1 */
-    color: color-mix(in oklch, currentColor 50%, transparent); /* 2 */
+  select,
+  textarea,
+  input:where(
+      [type="text"],
+      [type="email"],
+      [type="password"],
+      [type="date"],
+      [type="datetime-local"],
+      [type="month"],
+      [type="number"],
+      [type="search"],
+      [type="time"],
+      [type="week"],
+      [type="tel"],
+      [type="url"]
+    ) {
+    border-radius: 3px;
+    padding-inline: 4px;
+    padding-block: 2px;
+    color: light-dark(black, white);
+    background-color: light-dark(white, rgb(255 255 255 / 10%));
+    border: 1px solid light-dark(rgb(0 0 0 / 50%), rgb(255 255 255 / 25%));
+  }
+
+  :where(select:not([multiple], [size])) option,
+  :where(select:not([multiple], [size])) optgroup {
+    color: FieldText;
+    background-color: Field;
+  }
+
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bold;
+  }
+
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+
+  select:where(:disabled),
+  textarea:where(:disabled),
+  input:where(
+      [type="text"],
+      [type="email"],
+      [type="password"],
+      [type="date"],
+      [type="datetime-local"],
+      [type="month"],
+      [type="number"],
+      [type="search"],
+      [type="time"],
+      [type="week"],
+      [type="tel"],
+      [type="url"]
+    ):where(:disabled) {
+    opacity: 1;
+    color: light-dark(rgb(0 0 0 / 50%), rgb(255 255 255 / 50%));
+    background-color: light-dark(rgb(0 0 0 / 2.5%), rgb(255 255 255 / 10%));
+    border-color: light-dark(rgb(0 0 0 / 20%), rgb(255 255 255 / 15%));
   }
 
   /*
-  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
-  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
-     This can trigger a poorly considered lint error in some tools but is included by design.
+  Apply consistent base button styles across browsers.
 */
 
-  img,
-  svg,
-  video,
-  canvas,
-  audio,
-  iframe,
-  embed,
-  object {
-    display: block; /* 1 */
-    vertical-align: middle; /* 2 */
+  button,
+  ::file-selector-button,
+  input:where([type="button"], [type="reset"], [type="submit"]) {
+    border-radius: 4px;
+    padding-inline: 4px;
+    padding-block: 2px;
+    color: light-dark(#000, #fff);
+    background-color: light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 40%));
+    border: 1px solid light-dark(rgb(0 0 0 / 50%), rgb(255 255 255 / 10%));
   }
 
-  /*
-  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
-*/
+  button:where(:hover),
+  ::file-selector-button:where(:hover),
+  input:where([type="button"], [type="reset"], [type="submit"]):where(:hover) {
+    background-color: light-dark(rgb(0 0 0 / 10%), rgb(255 255 255 / 45%));
+  }
 
-  img,
-  video {
-    max-width: 100%;
-    height: auto;
+  button:where(:active),
+  ::file-selector-button:where(:active),
+  input:where([type="button"], [type="reset"], [type="submit"]):where(:active) {
+    background-color: light-dark(rgb(0 0 0 / 2.5%), rgb(255 255 255 / 30%));
+  }
+
+  button:where(:disabled),
+  :where(input:disabled)::file-selector-button,
+  input:where([type="button"], [type="reset"], [type="submit"]):where(
+      :disabled
+    ) {
+    opacity: 1;
+    background-color: light-dark(rgb(0 0 0 / 2.5%), rgb(255 255 255 / 25%));
+    border-color: light-dark(rgb(0 0 0 / 20%), rgb(255 255 255 / 10%));
+  }
+
+  input:where([type="file"]:disabled) {
+    color: light-dark(rgb(0 0 0 / 50%), rgb(255 255 255 / 50%));
+  }
+
+  ::file-selector-button {
+    margin-inline-end: 4px;
   }
 
   /*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "4.0.0-alpha.34",
+  "version": "4.0.0-alpha.36",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "repository": {
@@ -67,7 +67,7 @@
     "@types/node": "^20.14.8",
     "lightningcss": "^1.26.0",
     "dedent": "1.5.3",
-    "@tailwindcss/oxide": "4.0.0-alpha.34"
+    "@tailwindcss/oxide": "4.0.0-alpha.36"
   },
   "scripts": {
     "lint": "tsc --noEmit",