Tailwind setup follow-up: RTL support and Windows High Contrast mode (#8117)

Co-authored-by: LB (Ben Johnston) <mail@lb.ee>

client/tailwind.config.js

@@ -1,3 +1,6 @@
+const plugin = require('tailwindcss/plugin');
+const vanillaRTL = require('tailwindcss-vanilla-rtl');
+
 /**
  * Design Tokens
  */
@@ -49,6 +52,9 @@ module.exports = {
       inherit: 'inherit',
       current: 'currentColor',
       transparent: 'transparent',
+      /* allow system colours https://www.w3.org/TR/css-color-4/#css-system-colors */
+      LinkText: 'LinkText',
+      ButtonText: 'ButtonText',
     },
     fontFamily,
     fontSize,
@@ -63,6 +69,23 @@ module.exports = {
     },
     spacing,
   },
-  plugins: [typeScale],
-  corePlugins: {},
+  plugins: [
+    typeScale,
+    vanillaRTL,
+    /**
+     * forced-colors media query for Windows High-Contrast mode support
+     * See:
+     * - https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors
+     * - https://github.com/tailwindlabs/tailwindcss/blob/v3.0.23/src/corePlugins.js#L168-L171
+     */
+    plugin(({ addVariant }) => {
+      addVariant('forced-colors', '@media (forced-colors: active)');
+    }),
+  ],
+  corePlugins: {
+    ...vanillaRTL.disabledCorePlugins,
+    // Disable float and clear which have poor RTL support.
+    float: false,
+    clear: false,
+  },
 };

package-lock.json

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "wagtail",
       "version": "1.0.0",
       "dependencies": {
         "draft-js": "^0.10.5",
@@ -62,6 +63,7 @@
         "storybook-django": "^0.3.0",
         "stylelint": "^14.2.0",
         "tailwindcss": "^3.0.23",
+        "tailwindcss-vanilla-rtl": "^0.1.0",
         "ts-jest": "^26.5.6",
         "ts-loader": "^9.2.6",
         "typescript": "^4.5.4",
@@ -27116,6 +27118,15 @@
         "postcss": "^8.0.9"
       }
     },
+    "node_modules/tailwindcss-vanilla-rtl": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss-vanilla-rtl/-/tailwindcss-vanilla-rtl-0.1.0.tgz",
+      "integrity": "sha512-cSfjIF0h+qJFhERQANxP5WplC8DJRHcxFoo+9NS0uKmk5BUnDfIVRrU7xzIqTpik0BErTaxzpWpoAR2Y1gvS6w==",
+      "dev": true,
+      "peerDependencies": {
+        "tailwindcss": "^3.0.0"
+      }
+    },
     "node_modules/tailwindcss/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -50575,6 +50586,13 @@
         }
       }
     },
+    "tailwindcss-vanilla-rtl": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss-vanilla-rtl/-/tailwindcss-vanilla-rtl-0.1.0.tgz",
+      "integrity": "sha512-cSfjIF0h+qJFhERQANxP5WplC8DJRHcxFoo+9NS0uKmk5BUnDfIVRrU7xzIqTpik0BErTaxzpWpoAR2Y1gvS6w==",
+      "dev": true,
+      "requires": {}
+    },
     "tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",

package.json

@@ -87,6 +87,7 @@
     "storybook-django": "^0.3.0",
     "stylelint": "^14.2.0",
     "tailwindcss": "^3.0.23",
+    "tailwindcss-vanilla-rtl": "^0.1.0",
     "ts-jest": "^26.5.6",
     "ts-loader": "^9.2.6",
     "typescript": "^4.5.4",