Extend opacity scale to include all steps of 5 (#11832)

* Extend opacity scale to include all steps of 5

* Update changelog

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `has-*` variants for `:has(...)` pseudo-class ([#11318](https://github.com/tailwindlabs/tailwindcss/pull/11318))
 - Add `text-wrap` utilities including `text-balance` ([#11320](https://github.com/tailwindlabs/tailwindcss/pull/11320))
 - Explicitly configure Lightning CSS features, and prefer user browserslist over default browserslist ([#11402](https://github.com/tailwindlabs/tailwindcss/pull/11402), [#11412](https://github.com/tailwindlabs/tailwindcss/pull/11412))
+- Extend default `opacity` scale to include all steps of 5 ([#11832](https://github.com/tailwindlabs/tailwindcss/pull/11832))
 
 ### Changed
 

stubs/config.full.js

@@ -678,15 +678,21 @@ module.exports = {
       0: '0',
       5: '0.05',
       10: '0.1',
+      15: '0.15',
       20: '0.2',
       25: '0.25',
       30: '0.3',
+      35: '0.35',
       40: '0.4',
+      45: '0.45',
       50: '0.5',
+      55: '0.55',
       60: '0.6',
+      65: '0.65',
       70: '0.7',
       75: '0.75',
       80: '0.8',
+      85: '0.85',
       90: '0.9',
       95: '0.95',
       100: '1',

tests/getClassList.test.js

@@ -95,15 +95,21 @@ it('should generate utilities with modifier data when requested', () => {
         '0',
         '5',
         '10',
+        '15',
         '20',
         '25',
         '30',
+        '35',
         '40',
+        '45',
         '50',
+        '55',
         '60',
+        '65',
         '70',
         '75',
         '80',
+        '85',
         '90',
         '95',
         '100',

tests/plugins/__snapshots__/backdropOpacity.test.js.snap

@@ -20,6 +20,12 @@ exports[`should test the 'backdropOpacity' plugin 1`] = `
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
+.backdrop-opacity-15 {
+  --tw-backdrop-opacity: opacity(.15);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
 .backdrop-opacity-20 {
   --tw-backdrop-opacity: opacity(.2);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -38,12 +44,24 @@ exports[`should test the 'backdropOpacity' plugin 1`] = `
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
+.backdrop-opacity-35 {
+  --tw-backdrop-opacity: opacity(.35);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
 .backdrop-opacity-40 {
   --tw-backdrop-opacity: opacity(.4);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
+.backdrop-opacity-45 {
+  --tw-backdrop-opacity: opacity(.45);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
 .backdrop-opacity-5 {
   --tw-backdrop-opacity: opacity(.05);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -56,12 +74,24 @@ exports[`should test the 'backdropOpacity' plugin 1`] = `
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
+.backdrop-opacity-55 {
+  --tw-backdrop-opacity: opacity(.55);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
 .backdrop-opacity-60 {
   --tw-backdrop-opacity: opacity(.6);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
+.backdrop-opacity-65 {
+  --tw-backdrop-opacity: opacity(.65);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
 .backdrop-opacity-70 {
   --tw-backdrop-opacity: opacity(.7);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -80,6 +110,12 @@ exports[`should test the 'backdropOpacity' plugin 1`] = `
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
+.backdrop-opacity-85 {
+  --tw-backdrop-opacity: opacity(.85);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
 .backdrop-opacity-90 {
   --tw-backdrop-opacity: opacity(.9);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);

tests/plugins/__snapshots__/backgroundOpacity.test.js.snap

@@ -14,6 +14,10 @@ exports[`should test the 'backgroundOpacity' plugin 1`] = `
   --tw-bg-opacity: 1;
 }
 
+.bg-opacity-15 {
+  --tw-bg-opacity: .15;
+}
+
 .bg-opacity-20 {
   --tw-bg-opacity: .2;
 }
@@ -26,10 +30,18 @@ exports[`should test the 'backgroundOpacity' plugin 1`] = `
   --tw-bg-opacity: .3;
 }
 
+.bg-opacity-35 {
+  --tw-bg-opacity: .35;
+}
+
 .bg-opacity-40 {
   --tw-bg-opacity: .4;
 }
 
+.bg-opacity-45 {
+  --tw-bg-opacity: .45;
+}
+
 .bg-opacity-5 {
   --tw-bg-opacity: .05;
 }
@@ -38,10 +50,18 @@ exports[`should test the 'backgroundOpacity' plugin 1`] = `
   --tw-bg-opacity: .5;
 }
 
+.bg-opacity-55 {
+  --tw-bg-opacity: .55;
+}
+
 .bg-opacity-60 {
   --tw-bg-opacity: .6;
 }
 
+.bg-opacity-65 {
+  --tw-bg-opacity: .65;
+}
+
 .bg-opacity-70 {
   --tw-bg-opacity: .7;
 }
@@ -54,6 +74,10 @@ exports[`should test the 'backgroundOpacity' plugin 1`] = `
   --tw-bg-opacity: .8;
 }
 
+.bg-opacity-85 {
+  --tw-bg-opacity: .85;
+}
+
 .bg-opacity-90 {
   --tw-bg-opacity: .9;
 }

tests/plugins/__snapshots__/borderOpacity.test.js.snap

@@ -14,6 +14,10 @@ exports[`should test the 'borderOpacity' plugin 1`] = `
   --tw-border-opacity: 1;
 }
 
+.border-opacity-15 {
+  --tw-border-opacity: .15;
+}
+
 .border-opacity-20 {
   --tw-border-opacity: .2;
 }
@@ -26,10 +30,18 @@ exports[`should test the 'borderOpacity' plugin 1`] = `
   --tw-border-opacity: .3;
 }
 
+.border-opacity-35 {
+  --tw-border-opacity: .35;
+}
+
 .border-opacity-40 {
   --tw-border-opacity: .4;
 }
 
+.border-opacity-45 {
+  --tw-border-opacity: .45;
+}
+
 .border-opacity-5 {
   --tw-border-opacity: .05;
 }
@@ -38,10 +50,18 @@ exports[`should test the 'borderOpacity' plugin 1`] = `
   --tw-border-opacity: .5;
 }
 
+.border-opacity-55 {
+  --tw-border-opacity: .55;
+}
+
 .border-opacity-60 {
   --tw-border-opacity: .6;
 }
 
+.border-opacity-65 {
+  --tw-border-opacity: .65;
+}
+
 .border-opacity-70 {
   --tw-border-opacity: .7;
 }
@@ -54,6 +74,10 @@ exports[`should test the 'borderOpacity' plugin 1`] = `
   --tw-border-opacity: .8;
 }
 
+.border-opacity-85 {
+  --tw-border-opacity: .85;
+}
+
 .border-opacity-90 {
   --tw-border-opacity: .9;
 }

tests/plugins/__snapshots__/opacity.test.js.snap

@@ -14,6 +14,10 @@ exports[`should test the 'opacity' plugin 1`] = `
   opacity: 1;
 }
 
+.opacity-15 {
+  opacity: .15;
+}
+
 .opacity-20 {
   opacity: .2;
 }
@@ -26,10 +30,18 @@ exports[`should test the 'opacity' plugin 1`] = `
   opacity: .3;
 }
 
+.opacity-35 {
+  opacity: .35;
+}
+
 .opacity-40 {
   opacity: .4;
 }
 
+.opacity-45 {
+  opacity: .45;
+}
+
 .opacity-5 {
   opacity: .05;
 }
@@ -38,10 +50,18 @@ exports[`should test the 'opacity' plugin 1`] = `
   opacity: .5;
 }
 
+.opacity-55 {
+  opacity: .55;
+}
+
 .opacity-60 {
   opacity: .6;
 }
 
+.opacity-65 {
+  opacity: .65;
+}
+
 .opacity-70 {
   opacity: .7;
 }
@@ -54,6 +74,10 @@ exports[`should test the 'opacity' plugin 1`] = `
   opacity: .8;
 }
 
+.opacity-85 {
+  opacity: .85;
+}
+
 .opacity-90 {
   opacity: .9;
 }

tests/plugins/__snapshots__/placeholderOpacity.test.js.snap

@@ -14,6 +14,10 @@ exports[`should test the 'placeholderOpacity' plugin 1`] = `
   --tw-placeholder-opacity: 1;
 }
 
+.placeholder-opacity-15::placeholder {
+  --tw-placeholder-opacity: .15;
+}
+
 .placeholder-opacity-20::placeholder {
   --tw-placeholder-opacity: .2;
 }
@@ -26,10 +30,18 @@ exports[`should test the 'placeholderOpacity' plugin 1`] = `
   --tw-placeholder-opacity: .3;
 }
 
+.placeholder-opacity-35::placeholder {
+  --tw-placeholder-opacity: .35;
+}
+
 .placeholder-opacity-40::placeholder {
   --tw-placeholder-opacity: .4;
 }
 
+.placeholder-opacity-45::placeholder {
+  --tw-placeholder-opacity: .45;
+}
+
 .placeholder-opacity-5::placeholder {
   --tw-placeholder-opacity: .05;
 }
@@ -38,10 +50,18 @@ exports[`should test the 'placeholderOpacity' plugin 1`] = `
   --tw-placeholder-opacity: .5;
 }
 
+.placeholder-opacity-55::placeholder {
+  --tw-placeholder-opacity: .55;
+}
+
 .placeholder-opacity-60::placeholder {
   --tw-placeholder-opacity: .6;
 }
 
+.placeholder-opacity-65::placeholder {
+  --tw-placeholder-opacity: .65;
+}
+
 .placeholder-opacity-70::placeholder {
   --tw-placeholder-opacity: .7;
 }
@@ -54,6 +74,10 @@ exports[`should test the 'placeholderOpacity' plugin 1`] = `
   --tw-placeholder-opacity: .8;
 }
 
+.placeholder-opacity-85::placeholder {
+  --tw-placeholder-opacity: .85;
+}
+
 .placeholder-opacity-90::placeholder {
   --tw-placeholder-opacity: .9;
 }

tests/plugins/__snapshots__/ringOpacity.test.js.snap

@@ -14,6 +14,10 @@ exports[`should test the 'ringOpacity' plugin 1`] = `
   --tw-ring-opacity: 1;
 }
 
+.ring-opacity-15 {
+  --tw-ring-opacity: .15;
+}
+
 .ring-opacity-20 {
   --tw-ring-opacity: .2;
 }
@@ -26,10 +30,18 @@ exports[`should test the 'ringOpacity' plugin 1`] = `
   --tw-ring-opacity: .3;
 }
 
+.ring-opacity-35 {
+  --tw-ring-opacity: .35;
+}
+
 .ring-opacity-40 {
   --tw-ring-opacity: .4;
 }
 
+.ring-opacity-45 {
+  --tw-ring-opacity: .45;
+}
+
 .ring-opacity-5 {
   --tw-ring-opacity: .05;
 }
@@ -38,10 +50,18 @@ exports[`should test the 'ringOpacity' plugin 1`] = `
   --tw-ring-opacity: .5;
 }
 
+.ring-opacity-55 {
+  --tw-ring-opacity: .55;
+}
+
 .ring-opacity-60 {
   --tw-ring-opacity: .6;
 }
 
+.ring-opacity-65 {
+  --tw-ring-opacity: .65;
+}
+
 .ring-opacity-70 {
   --tw-ring-opacity: .7;
 }
@@ -54,6 +74,10 @@ exports[`should test the 'ringOpacity' plugin 1`] = `
   --tw-ring-opacity: .8;
 }
 
+.ring-opacity-85 {
+  --tw-ring-opacity: .85;
+}
+
 .ring-opacity-90 {
   --tw-ring-opacity: .9;
 }
@@ -90,6 +114,10 @@ exports[`should test the 'ringOpacity' plugin 2`] = `
   --tw-ring-opacity: 1;
 }
 
+.ring-opacity-15 {
+  --tw-ring-opacity: .15;
+}
+
 .ring-opacity-20 {
   --tw-ring-opacity: .2;
 }
@@ -102,10 +130,18 @@ exports[`should test the 'ringOpacity' plugin 2`] = `
   --tw-ring-opacity: .3;
 }
 
+.ring-opacity-35 {
+  --tw-ring-opacity: .35;
+}
+
 .ring-opacity-40 {
   --tw-ring-opacity: .4;
 }
 
+.ring-opacity-45 {
+  --tw-ring-opacity: .45;
+}
+
 .ring-opacity-5 {
   --tw-ring-opacity: .05;
 }
@@ -114,10 +150,18 @@ exports[`should test the 'ringOpacity' plugin 2`] = `
   --tw-ring-opacity: .5;
 }
 
+.ring-opacity-55 {
+  --tw-ring-opacity: .55;
+}
+
 .ring-opacity-60 {
   --tw-ring-opacity: .6;
 }
 
+.ring-opacity-65 {
+  --tw-ring-opacity: .65;
+}
+
 .ring-opacity-70 {
   --tw-ring-opacity: .7;
 }
@@ -130,6 +174,10 @@ exports[`should test the 'ringOpacity' plugin 2`] = `
   --tw-ring-opacity: .8;
 }
 
+.ring-opacity-85 {
+  --tw-ring-opacity: .85;
+}
+
 .ring-opacity-90 {
   --tw-ring-opacity: .9;
 }

tests/plugins/__snapshots__/ringWidth.test.js.snap

@@ -263,6 +263,10 @@ exports[`should test the 'ringWidth' plugin 3`] = `
   --tw-ring-opacity: 1;
 }
 
+.ring-opacity-15 {
+  --tw-ring-opacity: .15;
+}
+
 .ring-opacity-20 {
   --tw-ring-opacity: .2;
 }
@@ -275,10 +279,18 @@ exports[`should test the 'ringWidth' plugin 3`] = `
   --tw-ring-opacity: .3;
 }
 
+.ring-opacity-35 {
+  --tw-ring-opacity: .35;
+}
+
 .ring-opacity-40 {
   --tw-ring-opacity: .4;
 }
 
+.ring-opacity-45 {
+  --tw-ring-opacity: .45;
+}
+
 .ring-opacity-5 {
   --tw-ring-opacity: .05;
 }
@@ -287,10 +299,18 @@ exports[`should test the 'ringWidth' plugin 3`] = `
   --tw-ring-opacity: .5;
 }
 
+.ring-opacity-55 {
+  --tw-ring-opacity: .55;
+}
+
 .ring-opacity-60 {
   --tw-ring-opacity: .6;
 }
 
+.ring-opacity-65 {
+  --tw-ring-opacity: .65;
+}
+
 .ring-opacity-70 {
   --tw-ring-opacity: .7;
 }
@@ -303,6 +323,10 @@ exports[`should test the 'ringWidth' plugin 3`] = `
   --tw-ring-opacity: .8;
 }
 
+.ring-opacity-85 {
+  --tw-ring-opacity: .85;
+}
+
 .ring-opacity-90 {
   --tw-ring-opacity: .9;
 }

tests/plugins/divideOpacity.test.js

@@ -16,6 +16,9 @@ quickPluginTest('divideOpacity', {
   .divide-opacity-100 > :not([hidden]) ~ :not([hidden]) {
     --tw-divide-opacity: 1;
   }
+  .divide-opacity-15 > :not([hidden]) ~ :not([hidden]) {
+    --tw-divide-opacity: 0.15;
+  }
   .divide-opacity-20 > :not([hidden]) ~ :not([hidden]) {
     --tw-divide-opacity: 0.2;
   }
@@ -25,18 +28,30 @@ quickPluginTest('divideOpacity', {
   .divide-opacity-30 > :not([hidden]) ~ :not([hidden]) {
     --tw-divide-opacity: 0.3;
   }
+  .divide-opacity-35 > :not([hidden]) ~ :not([hidden]) {
+    --tw-divide-opacity: 0.35;
+  }
   .divide-opacity-40 > :not([hidden]) ~ :not([hidden]) {
     --tw-divide-opacity: 0.4;
   }
+  .divide-opacity-45 > :not([hidden]) ~ :not([hidden]) {
+    --tw-divide-opacity: 0.45;
+  }
   .divide-opacity-5 > :not([hidden]) ~ :not([hidden]) {
     --tw-divide-opacity: 0.05;
   }
   .divide-opacity-50 > :not([hidden]) ~ :not([hidden]) {
     --tw-divide-opacity: 0.5;
   }
+  .divide-opacity-55 > :not([hidden]) ~ :not([hidden]) {
+    --tw-divide-opacity: 0.55;
+  }
   .divide-opacity-60 > :not([hidden]) ~ :not([hidden]) {
     --tw-divide-opacity: 0.6;
   }
+  .divide-opacity-65 > :not([hidden]) ~ :not([hidden]) {
+    --tw-divide-opacity: 0.65;
+  }
   .divide-opacity-70 > :not([hidden]) ~ :not([hidden]) {
     --tw-divide-opacity: 0.7;
   }
@@ -46,6 +61,9 @@ quickPluginTest('divideOpacity', {
   .divide-opacity-80 > :not([hidden]) ~ :not([hidden]) {
     --tw-divide-opacity: 0.8;
   }
+  .divide-opacity-85 > :not([hidden]) ~ :not([hidden]) {
+    --tw-divide-opacity: 0.85;
+  }
   .divide-opacity-90 > :not([hidden]) ~ :not([hidden]) {
     --tw-divide-opacity: 0.9;
   }

tests/plugins/textOpacity.test.js

@@ -16,6 +16,9 @@ quickPluginTest('textOpacity', {
   .text-opacity-100 {
     --tw-text-opacity: 1;
   }
+  .text-opacity-15 {
+    --tw-text-opacity: 0.15;
+  }
   .text-opacity-20 {
     --tw-text-opacity: 0.2;
   }
@@ -25,18 +28,30 @@ quickPluginTest('textOpacity', {
   .text-opacity-30 {
     --tw-text-opacity: 0.3;
   }
+  .text-opacity-35 {
+    --tw-text-opacity: 0.35;
+  }
   .text-opacity-40 {
     --tw-text-opacity: 0.4;
   }
+  .text-opacity-45 {
+    --tw-text-opacity: 0.45;
+  }
   .text-opacity-5 {
     --tw-text-opacity: 0.05;
   }
   .text-opacity-50 {
     --tw-text-opacity: 0.5;
   }
+  .text-opacity-55 {
+    --tw-text-opacity: 0.55;
+  }
   .text-opacity-60 {
     --tw-text-opacity: 0.6;
   }
+  .text-opacity-65 {
+    --tw-text-opacity: 0.65;
+  }
   .text-opacity-70 {
     --tw-text-opacity: 0.7;
   }
@@ -46,6 +61,9 @@ quickPluginTest('textOpacity', {
   .text-opacity-80 {
     --tw-text-opacity: 0.8;
   }
+  .text-opacity-85 {
+    --tw-text-opacity: 0.85;
+  }
   .text-opacity-90 {
     --tw-text-opacity: 0.9;
   }