feat(css): Allow .no-underline to overwrite text-decoration

modules/css/lib/tailwind/plugins/textDecoration/__tests__/index.js

@@ -0,0 +1,35 @@
+describe('negativeDimensions', () => {
+  describe('should contain', () => {
+    const actual = tailwindPluginClasses('../index.js');
+    it.each([
+      [
+        '.underline',
+        {
+          '--text-decoration-color': 'currentColor',
+          textDecoration: 'underline var(--text-decoration-color)',
+        },
+      ],
+      [
+        '.strike',
+        {
+          '--text-decoration-color': 'currentColor',
+          textDecoration: 'line-through var(--text-decoration-color)',
+        },
+      ],
+      [
+        '.no-underline',
+        {
+          textDecoration: 'none',
+        },
+      ],
+      [
+        '.underline-red',
+        {
+          '--text-decoration-color': '#e53e3e',
+        },
+      ],
+    ])('%s', async (key, value) => {
+      expect(actual[key]).toEqual(value);
+    });
+  });
+});

modules/css/lib/tailwind/plugins/textDecoration/plugin.js

@@ -21,6 +21,11 @@ module.exports = function (variants) {
       };
     });
 
+    // Allow .no-underline to remove all styling
+    baseClasses['.no-underline'] = {
+      textDecoration: 'none',
+    };
+
     const colorClasses = generateClasses(
       textDecorationColor,
       '.underline-',

modules/css/lib/tailwind/plugins/textDecoration/themes/textDecoration.js

@@ -1,5 +1,4 @@
 module.exports = {
-  none: 'none',
   strike: 'line-through',
   underline: 'underline',
 };

modules/docs/src/percy/text-decoration.pug

@@ -9,3 +9,7 @@ block content
     +tailwind_table_line(`underline.${className}`)
       .w-100p.h-100p.flex.flex-col.justify-center
         span.underline(class=className) Hello World
+
+  +tailwind_table_line(`underline.hover_no-underline`)
+    .w-100p.h-100p.flex.flex-col.justify-center
+      a.underline.hover_no-underline(href="#") Hello World