Ensure that tailwind utils override component styling

.storybook/main.js

@@ -1,4 +1,5 @@
 const path = require("path")
+const { cascadeLayerPrefixer } = require("../utils/cascadeLayerPrefixer")
 
 module.exports = {
   stories: ["../stories/Introduction.stories.mdx", "../stories/**/*stories*"],
@@ -49,7 +50,14 @@ module.exports = {
                 loader: "postcss-loader",
                 options: {
                   postcssOptions: {
-                    plugins: [require("tailwindcss"), require("autoprefixer")],
+                    plugins: [
+                      require("tailwindcss"),
+                      cascadeLayerPrefixer({
+                        layerName: "components",
+                        fileNameMatcher: /\/components\/.+/,
+                      }),
+                      require("autoprefixer"),
+                    ],
                   },
                 },
               },

main.scss

@@ -1,7 +1,12 @@
-/* Provide sufficient contrast against white background */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@layer tailwind-base, components, tailwind-utils;
+
+@layer tailwind-base {
+  @tailwind base;
+}
+@layer tailwind-utils {
+  @tailwind components;
+  @tailwind utilities;
+}
 
 @font-face {
   font-family: "Inter";

utils/cascadeLayerPrefixer.js

@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const postcss = require("postcss")
+/* eslint-enable @typescript-eslint/no-var-requires */
+
+// PostCSS plugin for wrapping matching CSS files in a cascade layer
+export const cascadeLayerPrefixer = ({ fileNameMatcher, layerName } = {}) => ({
+  postcssPlugin: "postcss-layer",
+  Once(root) {
+    // Ignore files that don't match the file matcher
+    if (!fileNameMatcher?.test(root.source.input.file)) {
+      return
+    }
+
+    // Create a new layer rule
+    const layerRule = postcss.atRule({ name: "layer", params: layerName })
+
+    // Move all other rules into the layer rule
+    root.each((node) => {
+      // Only actual rules (not atrules)
+      if (node.type === "rule") {
+        layerRule.append(node)
+      }
+    })
+
+    // Append layer rule
+    root.append(layerRule)
+  },
+})