Support opacity values in increments of 0.25 by default (#14980)

This PR updates all areas in the framework that accept opacity values
(`opacity-*`, `backdrop-opacity-*`, `bg-red-500/*`, etc.) to accept
fractional values in increments of 0.25 instead of just whole numbers.

We noticed we use values like `2.5` and `7.5` pretty regularly in our
templates and don't see why those should be treated as any more "weird"
than something like `opacity-63` which we already support, so baking
this in to core.

IntelliSense will still only suggest values in increments of `5` like it
did before.

---------

Co-authored-by: Adam Wathan <[email protected]>

Author: adamwathan

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Added
+
+- Support opacity values in increments of `0.25` by default ([#14980](https://github.com/tailwindlabs/tailwindcss/pull/14980))
 
 ## [4.0.0-alpha.33] - 2024-11-11
 

packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap

@@ -98,6 +98,18 @@ exports[`border-* 1`] = `
   border-color: var(--color-red-500);
 }
 
+.border-red-500\\/2\\.5 {
+  border-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+}
+
+.border-red-500\\/2\\.25 {
+  border-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+}
+
+.border-red-500\\/2\\.75 {
+  border-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+}
+
 .border-red-500\\/50 {
   border-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
 }
@@ -219,6 +231,18 @@ exports[`border-b-* 1`] = `
   border-bottom-color: var(--color-red-500);
 }
 
+.border-b-red-500\\/2\\.5 {
+  border-bottom-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+}
+
+.border-b-red-500\\/2\\.25 {
+  border-bottom-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+}
+
+.border-b-red-500\\/2\\.75 {
+  border-bottom-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+}
+
 .border-b-red-500\\/50 {
   border-bottom-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
 }
@@ -340,6 +364,18 @@ exports[`border-e-* 1`] = `
   border-inline-end-color: var(--color-red-500);
 }
 
+.border-e-red-500\\/2\\.5 {
+  border-inline-end-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+}
+
+.border-e-red-500\\/2\\.25 {
+  border-inline-end-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+}
+
+.border-e-red-500\\/2\\.75 {
+  border-inline-end-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+}
+
 .border-e-red-500\\/50 {
   border-inline-end-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
 }
@@ -461,6 +497,18 @@ exports[`border-l-* 1`] = `
   border-left-color: var(--color-red-500);
 }
 
+.border-l-red-500\\/2\\.5 {
+  border-left-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+}
+
+.border-l-red-500\\/2\\.25 {
+  border-left-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+}
+
+.border-l-red-500\\/2\\.75 {
+  border-left-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+}
+
 .border-l-red-500\\/50 {
   border-left-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
 }
@@ -582,6 +630,18 @@ exports[`border-r-* 1`] = `
   border-right-color: var(--color-red-500);
 }
 
+.border-r-red-500\\/2\\.5 {
+  border-right-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+}
+
+.border-r-red-500\\/2\\.25 {
+  border-right-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+}
+
+.border-r-red-500\\/2\\.75 {
+  border-right-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+}
+
 .border-r-red-500\\/50 {
   border-right-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
 }
@@ -703,6 +763,18 @@ exports[`border-s-* 1`] = `
   border-inline-start-color: var(--color-red-500);
 }
 
+.border-s-red-500\\/2\\.5 {
+  border-inline-start-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+}
+
+.border-s-red-500\\/2\\.25 {
+  border-inline-start-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+}
+
+.border-s-red-500\\/2\\.75 {
+  border-inline-start-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+}
+
 .border-s-red-500\\/50 {
   border-inline-start-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
 }
@@ -824,6 +896,18 @@ exports[`border-t-* 1`] = `
   border-top-color: var(--color-red-500);
 }
 
+.border-t-red-500\\/2\\.5 {
+  border-top-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+}
+
+.border-t-red-500\\/2\\.25 {
+  border-top-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+}
+
+.border-t-red-500\\/2\\.75 {
+  border-top-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+}
+
 .border-t-red-500\\/50 {
   border-top-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
 }
@@ -945,6 +1029,18 @@ exports[`border-x-* 1`] = `
   border-inline-color: var(--color-red-500);
 }
 
+.border-x-red-500\\/2\\.5 {
+  border-inline-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+}
+
+.border-x-red-500\\/2\\.25 {
+  border-inline-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+}
+
+.border-x-red-500\\/2\\.75 {
+  border-inline-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+}
+
 .border-x-red-500\\/50 {
   border-inline-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
 }
@@ -1066,6 +1162,18 @@ exports[`border-y-* 1`] = `
   border-block-color: var(--color-red-500);
 }
 
+.border-y-red-500\\/2\\.5 {
+  border-block-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+}
+
+.border-y-red-500\\/2\\.25 {
+  border-block-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+}
+
+.border-y-red-500\\/2\\.75 {
+  border-block-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+}
+
 .border-y-red-500\\/50 {
   border-block-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
 }