【tailwindcss】tailwindcssのクラスユーティリティをベースにスタイルを作る

やりたかったこと

tailwindcssが用意しているtop-*をベースにして、新しいtailwindcssクラスユーティリティを作りたい。

tailwindcssが用意しているtop-*クラスユーティリティ

こんな感じでtop-*クラスユーティリティをベースとしたカスタムクラスユーティリティを作りたい

使用例

<div className="panel-top-80"></div>

出力されるcss

/*top-80をベースにして".react-flow__panel.top."というセレクタを付与してCSS出力する*/ 
.react-flow__panel.top.panel-top-80 {
    top: 20rem;
}

設定方法

tailwind.config.js

import defaultTheme from "tailwindcss/defaultTheme";
import forms from "@tailwindcss/forms";

/** @type {import('tailwindcss').Config} */
export default {
    //...省略...
    
    plugins: [
        //...省略...
        
        function ({ addUtilities, theme }) {
            const topValues = theme("spacing");

            const customTopUtilities = Object.entries(topValues).reduce(
                (acc, [key, value]) => {
                    acc[`.react-flow__panel.panel-top-${key}`] = {
                        top: value,
                    };
                    return acc;
                },
                {}
            );
            // ユーティリティを追加
            addUtilities(customTopUtilities, ["responsive"]);
        },
    ],
};

acc[.react-flow__panel.panel-top-${key}]と指定すると、最後のピリオド区切りの要素（panel-top-${key}）が表示名になる