Open4

tailwind CSS

まさでぶまさでぶ

addUtilitiesを外部から突っ込む

custom/customUtilities.ts
import { type PluginCreator } from "tailwindcss/types/config";

const customUtilities: PluginCreator = ({ addUtilities }) => {
  const newUtilities = {
    ".text-shadow": {
      textShadow: "0 0 6px #00000052",
    },
  };

  addUtilities(newUtilities);
};

export default customUtilities;
tailwind.config.ts
  plugins: [
    require("./customCSS/customUtilities.ts"),
  ],
まさでぶまさでぶ

コンフィグの値をcalc()する

className="top-[calc((theme(padding.clamp)+0.6em)*-1)]"
tailwind.config.ts
export default {
  content: ["./src/**/*.tsx"],
  theme: {
    extend: {
      padding: {
        clamp: "clamp(90px, 9vw, 120px)",
    },
  },
}
まさでぶまさでぶ
import { type PluginCreator } from "tailwindcss/types/config";

const customVariant: PluginCreator = ({ addVariant }) => {
  addVariant("where", ":where(&)");
};

export default customVariant;