Tailwindでフクロウセレクタを定義する

デフォルトでspace-x-{amount}というのがあったわ

でもまあ、gapを使うので使わない

JSで書く

フクロウセレクタを使って定義している

code:styles/stack.js

// @ts-check

module.exports = makeOwlSelector;

/**

* @param {import('tailwindcss/types/config').PluginAPI} api

function makeOwlSelector({ e, addUtilities, config }) {

const margins = config('theme.margin');

/** @type {{[key: stack-${string}]: { maginTop: string }}} */

const init = {};

/** @type {{[key: stack-${string}]: { maginTop: string }}} */

const newUtilities = Object.keys(margins).reduce((acc, key) => {

const marginTop = marginskey;

if (marginTop === 'auto') {

return acc;

}

return {

...acc,

[.${e(stack-${key})} > * + *]: { marginTop },

};

}, init);

addUtilities(newUtilities);

}

読み込む

code:tailwind.config.js

/** @type {import('tailwindcss').Config} */

module.exports = {

mode: 'jit',

content: [],

theme: {},

};

使える

code:tsx