Add remaining text-decoration utilities

src/corePlugins.js

@@ -1,16 +1,16 @@
 import fs from 'fs'
 import * as path from 'path'
 import postcss from 'postcss'
-import { version as tailwindVersion } from '../package.json'
-import buildMediaQuery from './util/buildMediaQuery'
 import createUtilityPlugin from './util/createUtilityPlugin'
-import flattenColorPalette from './util/flattenColorPalette'
-import isPlainObject from './util/isPlainObject'
-import log from './util/log'
+import buildMediaQuery from './util/buildMediaQuery'
 import parseAnimationValue from './util/parseAnimationValue'
+import flattenColorPalette from './util/flattenColorPalette'
+import withAlphaVariable, { withAlphaValue } from './util/withAlphaVariable'
 import toColorValue from './util/toColorValue'
+import isPlainObject from './util/isPlainObject'
 import transformThemeValue from './util/transformThemeValue'
-import withAlphaVariable, { withAlphaValue } from './util/withAlphaVariable'
+import { version as tailwindVersion } from '../package.json'
+import log from './util/log'
 
 export let variantPlugins = {
   pseudoElementVariants: ({ addVariant }) => {
@@ -1370,8 +1370,10 @@ export let corePlugins = {
 
   boxDecorationBreak: ({ addUtilities }) => {
     addUtilities({
-      '.decoration-slice': { 'box-decoration-break': 'slice' },
-      '.decoration-clone': { 'box-decoration-break': 'clone' },
+      '.decoration-slice': { 'box-decoration-break': 'slice' }, // Deprecated
+      '.decoration-clone': { 'box-decoration-break': 'clone' }, // Deprecated
+      '.box-decoration-slice': { 'box-decoration-break': 'slice' },
+      '.box-decoration-clone': { 'box-decoration-break': 'clone' },
     })
   },
 
@@ -1628,9 +1630,13 @@ export let corePlugins = {
 
   textDecoration: ({ addUtilities }) => {
     addUtilities({
-      '.underline': { 'text-decoration': 'underline' },
-      '.line-through': { 'text-decoration': 'line-through' },
-      '.no-underline': { 'text-decoration': 'none' },
+      '.underline': { 'text-decoration': 'underline' }, // Deprecated
+      '.line-through': { 'text-decoration': 'line-through' }, // Deprecated
+      '.no-underline': { 'text-decoration': 'none' }, // Deprecated
+      '.decoration-underline': { 'text-decoration': 'underline' },
+      '.decoration-overline': { 'text-decoration': 'overline' },
+      '.decoration-line-through': { 'text-decoration': 'line-through' },
+      '.decoration-none': { 'text-decoration': 'none' },
     })
   },
 
@@ -1655,6 +1661,27 @@ export let corePlugins = {
     })
   },
 
+  textDecorationThickness: createUtilityPlugin(
+    'textDecorationThickness',
+    [['decoration', ['text-decoration-thickness']]],
+    { type: ['length', 'percentage'] }
+  ),
+
+  textUnderlineOffset: createUtilityPlugin(
+    'textUnderlineOffset',
+    [['underline-offset', ['text-underline-offset']]],
+    { type: ['length', 'percentage'] }
+  ),
+
+  textUnderlinePosition: ({ addUtilities }) => {
+    addUtilities({
+      '.underline-auto': { 'text-underline-position': 'auto' },
+      '.underline-under': { 'text-underline-position': 'under' },
+      '.underline-right': { 'text-underline-position': 'right' },
+      '.underline-left': { 'text-underline-position': 'left' },
+    })
+  },
+
   fontSmoothing: ({ addUtilities }) => {
     addUtilities({
       '.antialiased': {

stubs/defaultConfig.stub.js

@@ -798,6 +798,20 @@ module.exports = {
     },
     textColor: ({ theme }) => theme('colors'),
     textDecorationColor: ({ theme }) => theme('colors'),
+    textDecorationThickness: {
+      DEFAULT: '1px',
+      0: '0px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
+    textUnderlineOffset: {
+      DEFAULT: '1px',
+      0: '0px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
     textIndent: ({ theme }) => ({
       ...theme('spacing'),
     }),

tests/arbitrary-values.test.css

@@ -825,6 +825,12 @@
 .decoration-\[var\(--color\)\] {
   text-decoration-color: var(--color);
 }
+.decoration-\[length\:10px\] {
+  text-decoration-thickness: 10px;
+}
+.underline-offset-\[10px\] {
+  text-underline-offset: 10px;
+}
 .placeholder-\[var\(--placeholder\)\]::placeholder {
   color: var(--placeholder);
 }

tests/arbitrary-values.test.html

@@ -305,6 +305,10 @@
     <div class="decoration-[color:var(--color)]"></div>
     <div class="decoration-[var(--color)]"></div>
 
+    <div class="decoration-[length:10px]"></div>
+
+    <div class="underline-offset-[10px]"></div>
+
     <div class="placeholder-[var(--placeholder)]"></div>
 
     <div class="placeholder-opacity-[var(--placeholder-opacity)]"></div>

tests/basic-usage.test.css

@@ -637,6 +637,12 @@
 .decoration-clone {
   box-decoration-break: clone;
 }
+.box-decoration-slice {
+  box-decoration-break: slice;
+}
+.box-decoration-clone {
+  box-decoration-break: clone;
+}
 .bg-cover {
   background-size: cover;
 }
@@ -771,12 +777,27 @@
 .underline {
   text-decoration: underline;
 }
+.decoration-underline {
+  text-decoration: underline;
+}
 .decoration-red-600 {
   text-decoration-color: #dc2626;
 }
 .decoration-solid {
   text-decoration-style: solid;
 }
+.decoration {
+  text-decoration-thickness: 1px;
+}
+.decoration-2 {
+  text-decoration-thickness: 2px;
+}
+.underline-offset-2 {
+  text-underline-offset: 2px;
+}
+.underline-right {
+  text-underline-position: right;
+}
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

tests/basic-usage.test.html

@@ -34,6 +34,7 @@
     <div class="shadow"></div>
     <div class="shadow-md"></div>
     <div class="shadow-lg"></div>
+    <div class="box-decoration-clone box-decoration-slice"></div>
     <div class="decoration-clone decoration-slice"></div>
     <div class="box-border"></div>
     <div class="clear-left"></div>
@@ -161,8 +162,13 @@
     <div class="text-indigo-500"></div>
     <div class="text-opacity-10"></div>
     <div class="underline"></div>
+    <div class="decoration-underline"></div>
     <div class="decoration-red-600"></div>
     <div class="decoration-solid"></div>
+	<div class="decoration"></div>
+	<div class="decoration-2"></div>
+	<div class="underline-offset-2"></div>
+	<div class="underline-right"></div>
     <div class="overflow-ellipsis truncate"></div>
     <div class="uppercase"></div>
     <div class="transform transform-gpu transform-none"></div>