Add text-decoration-style utilities

src/corePlugins.js

@@ -1,16 +1,16 @@
 import fs from 'fs'
 import * as path from 'path'
 import postcss from 'postcss'
-import createUtilityPlugin from './util/createUtilityPlugin'
+import { version as tailwindVersion } from '../package.json'
 import buildMediaQuery from './util/buildMediaQuery'
-import parseAnimationValue from './util/parseAnimationValue'
+import createUtilityPlugin from './util/createUtilityPlugin'
 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 { version as tailwindVersion } from '../package.json'
 import log from './util/log'
+import parseAnimationValue from './util/parseAnimationValue'
+import toColorValue from './util/toColorValue'
+import transformThemeValue from './util/transformThemeValue'
+import withAlphaVariable, { withAlphaValue } from './util/withAlphaVariable'
 
 export let variantPlugins = {
   pseudoElementVariants: ({ addVariant }) => {
@@ -1645,6 +1645,16 @@ export let corePlugins = {
     )
   },
 
+  textDecorationStyle: ({ addUtilities }) => {
+    addUtilities({
+      '.decoration-solid': { 'text-decoration-style': 'solid' },
+      '.decoration-double': { 'text-decoration-style': 'double' },
+      '.decoration-dotted': { 'text-decoration-style': 'dotted' },
+      '.decoration-dashed': { 'text-decoration-style': 'dashed' },
+      '.decoration-wavy': { 'text-decoration-style': 'wavy' },
+    })
+  },
+
   fontSmoothing: ({ addUtilities }) => {
     addUtilities({
       '.antialiased': {

tests/basic-usage.test.css

@@ -774,6 +774,9 @@
 .decoration-red-600 {
   text-decoration-color: #dc2626;
 }
+.decoration-solid {
+  text-decoration-style: solid;
+}
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

tests/basic-usage.test.html

@@ -162,6 +162,7 @@
     <div class="text-opacity-10"></div>
     <div class="underline"></div>
     <div class="decoration-red-600"></div>
+    <div class="decoration-solid"></div>
     <div class="overflow-ellipsis truncate"></div>
     <div class="uppercase"></div>
     <div class="transform transform-gpu transform-none"></div>