A bunch of utilities that I use on every personal tailwind project

my_tailwindconfig.js

plugins: [
  plugin(
    function ({ addComponents, matchUtilities, theme }) {
      matchUtilities(
        {
          "box-shadow": (value) => ({
            boxShadow: value.replace("_", " "),
          }),
          "text-shadow": (value) => ({
            textShadow: value.replace("_", " "),
          }),
          "mask-image": (value) => ({
            webkitMaskImage: value,
            maskImage: value,
          }),
          "stop-color": (value) => ({
            stopColor: value,
          }),
          "tap-highlight-color": (value) => ({
            WebkitTapHighlightColor: value,
          }),
          "word-spacing": (value) => ({
            wordSpacing: value,
          }),
          "bg-image": (value) => ({
            backgroundImage: value.replace("_", " "),
          }),
          background: (value) => ({
            background: value,
          }),
          "dashed-border": (value) => {
            const dashOffset = value.match(/dashoffset\(([^)]*)\)/)?.[1] || 0;
            const dashArray = (
              value.match(/dasharray\(([^)]*)\)/)?.[1] || "1,8"
            ).replace(/,/g, "%2c");
            const width = value.match(/width\(([^)]*)\)/)?.[1] || 0;
            const radius = value.match(/radius\(([^)]*)\)/)?.[1] || "0";
            const borderRadius = radius.match(/[^0-9]$/)
              ? radius
              : `${radius}px`;
            const color =
              value
                .match(/color\(([^)]*\)?)\)/)?.[1]
                .replace(/_/g, " ")
                .replace(/#+/, "%23")
                .replace(/\//g, "%2F")
                .replace(/\s/g, "%20") || "%23000";
            let lineCap = value.match(/linecap\(([^)]*)\)/)?.[1] || 0;
            lineCap = ["butt", "round", "square"].includes(lineCap)
              ? lineCap
              : "square";

            return {
              backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='${radius}' ry='${radius}' stroke='${color}' stroke-width='${width}' stroke-dasharray='${dashArray}' stroke-dashoffset='${dashOffset}' stroke-linecap='${lineCap}'/%3e%3c/svg%3e")`,
              borderRadius,
            };
          },
          "inverse-corner": (value) => {
            const position = (
              value.match(/position\(([^)]*)\)/)?.[1] || "0,100%"
            ).replace(/,/g, " ");
            const _size = value.match(/size\(([^)]*)\)/)?.[1] || "0px";
            const size = _size.match(/[^0-9]$/) ? _size : `${_size}px`;
            const color = value.match(/color\(([^)]*\)?)\)/)?.[1] || "#000";
            return {
              backgroundImage: `radial-gradient(circle at ${position}, rgba(255,255,255,0) ${size}, ${color} 0)`,
              width: size,
              height: size,
            };
          },
        },
        {
          values: theme(
            "maskImage",
            "stopColor",
            "tapHighlightColor",
            "wordSpacing",
            "bgImage"
          ),
        }
      );

      addComponents({
        ".no-scrollbar": {
          /* Chrome, Edge, Safari and Opera */
          "&::-webkit-scrollbar": {
            display: "none",
          },
          msOverflowStyle: "none" /* IE and EdgeHTML */,
          scrollbarWidth: "none" /* Firefox */,
        },
      });
    },
    {
      theme: {
        maskImage: {
          none: "none",
        },
        stopColor: {
          none: "none",
        },
        tapHighlightColor: {
          none: "transparent",
          auto: "auto",
        },
        wordSpacing: {
          normal: "normal",
        },
        bgImage: {
          none: "none",
        },
        contain: {
          none: "none",
          strict: "strict",
          content: "content",
          size: "size",
          "inline-size": "inline-size",
          layout: "layout",
          style: "style",
          paint: "paint",
        },
      },
    }
  ),
  /* no use for this variant since all modern browsers support backdrop-filter, Firefox took a long time to support */
  /* still keeping it for variant/postcss reference */
  /* also having this variant inside the main single plugin function crashed TW autocomplete, having it in it's own plugin solves it */
  // plugin(function ({ addVariant, e, postcss }) {
  //   addVariant("has-backdrop-filter", ({ container, separator }) => {
  //     const isRule = postcss.atRule({
  //       name: "supports",
  //       params:
  //         "((-webkit-backdrop-filter: none) or (backdrop-filter: none))",
  //     });
  //     isRule.append(container.nodes);
  //     container.append(isRule);
  //     isRule.walkRules((rule) => {
  //       rule.selector = `.${e(
  //         `has-backdrop-filter${separator}${rule.selector.slice(1)}`
  //       ).replace(/\\\\/g, "")}`;
  //     });
  //   });
  // }),
]