Anchor

import { PluginAPI, type Config } from "tailwindcss/types/config";
import plugin from "tailwindcss/plugin";
 
export default {
  theme: {
    extend: {}
  },
  plugins: [
    require("tailwindcss-animate"),
    plugin(({ addBase, addUtilities }: PluginAPI) => {
      addBase({});
      addUtilities({
        ".underline-hover": {
          position: "relative",
          touchAction: "manipulation",
          "&::after": {
            content: '""',
            position: "absolute",
            bottom: "var(--underline-offset, 2px)",
            backgroundColor: "currentColor",
            height: "1px"
          },
          "@media (hover: hover)": {
            "&::after": {
              left: "0",
              width: "100%",
              transform: "scaleX(0)",
              transformOrigin: "right center",
              transition: "transform .45s cubic-bezier(0.86, 0, 0.07, 1)"
            },
            "&:hover": {
              "&::after": {
                transform: "scaleX(1)",
                transformOrigin: "left center",
                animation: "none"
              }
            }
          },
          "@media not all and (hover: hover)": {
            "&::after": {
              width: "0"
            },
            "&:hover": {
              "&::after": {
                animation: "underlinehover 0.75s cubic-bezier(0.86, 0, 0.07, 1)"
              }
            }
          }
        }
      });
    })
  ]
} satisfies Config;