tailwindcss 4.0.0-alpha.9 → 4.0.0-beta.2

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "tailwindcss",
-  "version": "4.0.0-alpha.9",
+  "version": "4.0.0-beta.2",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
-  "repository": "https://github.com/tailwindlabs/tailwindcss.git",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tailwindlabs/tailwindcss.git",
+    "directory": "packages/tailwindcss"
+  },
   "bugs": "https://github.com/tailwindlabs/tailwindcss/issues",
   "homepage": "https://tailwindcss.com",
   "exports": {
@@ -13,6 +17,30 @@
       "require": "./dist/lib.js",
       "import": "./dist/lib.mjs"
     },
+    "./plugin": {
+      "require": "./dist/plugin.js",
+      "import": "./dist/plugin.mjs"
+    },
+    "./plugin.js": {
+      "require": "./dist/plugin.js",
+      "import": "./dist/plugin.mjs"
+    },
+    "./defaultTheme": {
+      "require": "./dist/default-theme.js",
+      "import": "./dist/default-theme.mjs"
+    },
+    "./defaultTheme.js": {
+      "require": "./dist/default-theme.js",
+      "import": "./dist/default-theme.mjs"
+    },
+    "./colors": {
+      "require": "./dist/colors.js",
+      "import": "./dist/colors.mjs"
+    },
+    "./colors.js": {
+      "require": "./dist/colors.js",
+      "import": "./dist/colors.mjs"
+    },
     "./package.json": "./package.json",
     "./index.css": "./index.css",
     "./index": "./index.css",
@@ -36,9 +64,10 @@
     "utilities.css"
   ],
   "devDependencies": {
-    "@types/node": "^20.10.8",
-    "lightningcss": "^1.24.0",
-    "@tailwindcss/oxide": "4.0.0-alpha.9"
+    "@types/node": "^20.14.8",
+    "lightningcss": "^1.26.0",
+    "dedent": "1.5.3",
+    "@tailwindcss/oxide": "4.0.0-beta.2"
   },
   "scripts": {
     "lint": "tsc --noEmit",

package/preflight.css

@@ -8,7 +8,6 @@
 ::after,
 ::before,
 ::backdrop,
-::first-letter,
 ::file-selector-button {
   box-sizing: border-box; /* 1 */
   margin: 0; /* 2 */
@@ -176,73 +175,130 @@ table {
 }
 
 /*
-  1. Inherit the font styles in all browsers.
-  2. Remove the default background color.
+  Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+  Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+  Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+  Make lists unstyled by default.
+*/
+
+ol,
+ul,
+menu {
+  list-style: none;
+}
+
+/*
+  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.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/*
+  1. Inherit font styles in all browsers.
+  2. Remove border radius in all browsers.
+  3. Remove background color in all browsers.
+  4. Ensure consistent opacity for disabled states in all browsers.
 */
 
 button,
 input,
-optgroup,
 select,
+optgroup,
 textarea,
 ::file-selector-button {
   font: inherit; /* 1 */
   font-feature-settings: inherit; /* 1 */
   font-variation-settings: inherit; /* 1 */
+  letter-spacing: inherit; /* 1 */
   color: inherit; /* 1 */
-  background: transparent; /* 2 */
+  border-radius: 0; /* 2 */
+  background-color: transparent; /* 3 */
+  opacity: 1; /* 4 */
 }
 
 /*
-  Reset the default inset border style for form controls to solid.
+  Restore default font weight.
 */
 
-input:where(:not([type='button'], [type='reset'], [type='submit'])),
-select,
-textarea {
-  border: 1px solid;
-}
-
-/*
-  Correct the inability to style the border radius in iOS Safari.
-*/
-button,
-input:where([type='button'], [type='reset'], [type='submit']),
-::file-selector-button {
-  appearance: button;
+:where(select:is([multiple], [size])) optgroup {
+  font-weight: bolder;
 }
 
 /*
-  Use the modern Firefox focus style for all focusable elements.
+  Restore indentation.
 */
 
-:-moz-focusring {
-  outline: auto;
+:where(select:is([multiple], [size])) optgroup option {
+  padding-inline-start: 20px;
 }
 
 /*
-  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+  Restore space after button.
 */
 
-:-moz-ui-invalid {
-  box-shadow: none;
+::file-selector-button {
+  margin-inline-end: 4px;
 }
 
 /*
-  Add the correct vertical alignment in Chrome and Firefox.
+  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.
 */
 
-progress {
-  vertical-align: baseline;
+::placeholder {
+  opacity: 1; /* 1 */
+  color: color-mix(in oklch, currentColor 50%, transparent); /* 2 */
 }
 
 /*
-  Correct the cursor style of increment and decrement buttons in Safari.
+  Prevent resizing textareas horizontally by default.
 */
 
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
+textarea {
+  resize: vertical;
 }
 
 /*
@@ -254,74 +310,67 @@ progress {
 }
 
 /*
-  Add the correct display in Chrome and Safari.
+  1. Ensure date/time inputs have the same height when empty in iOS Safari.
+  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
 */
 
-summary {
-  display: list-item;
+::-webkit-date-and-time-value {
+  min-height: 1lh; /* 1 */
+  text-align: inherit; /* 2 */
 }
 
 /*
-  Make lists unstyled by default.
+  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
 */
 
-ol,
-ul,
-menu {
-  list-style: none;
+::-webkit-datetime-edit {
+  display: inline-flex;
 }
 
 /*
-  Prevent resizing textareas horizontally by default.
+  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
 */
 
-textarea {
-  resize: vertical;
+::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
 }
 
-/*
-  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 srgb, currentColor 50%, transparent); /* 2 */
+::-webkit-datetime-edit,
+::-webkit-datetime-edit-year-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-minute-field,
+::-webkit-datetime-edit-second-field,
+::-webkit-datetime-edit-millisecond-field,
+::-webkit-datetime-edit-meridiem-field {
+  padding-block: 0;
 }
 
 /*
-  Make sure disabled buttons don't get the pointer cursor.
+  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
 */
 
-:disabled {
-  cursor: default;
+:-moz-ui-invalid {
+  box-shadow: none;
 }
 
 /*
-  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.
+  Correct the inability to style the border radius in iOS Safari.
 */
 
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block; /* 1 */
-  vertical-align: middle; /* 2 */
+button,
+input:where([type='button'], [type='reset'], [type='submit']),
+::file-selector-button {
+  appearance: button;
 }
 
 /*
-  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+  Correct the cursor style of increment and decrement buttons in Safari.
 */
 
-img,
-video {
-  max-width: 100%;
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
   height: auto;
 }
 
@@ -329,6 +378,6 @@ video {
   Make elements with the HTML hidden attribute stay hidden by default.
 */
 
-[hidden] {
+[hidden]:where(:not([hidden='until-found'])) {
   display: none !important;
 }