tailwindcss は型を提供していないようだったので、自分で型を作りました。主にtailwindcss.d.tsの中にあるTailwindcssConfigurationを使います。
以下で型定義を持ってきます。
yarn add -D @nju33/tailwindcss.d.tstailwind.config.jsを作り以下のように書き始めます。
/**
* @type {import('@nju33/tailwindcss.d.ts').TailwindcssConfiguration}
*/
module.exports = {
theme: {
fill: theme => theme('colors')
}
};@typeの行でmodule.exportsオブジェクトに対して、「これはTailWindConfigurationだよ」と設定してます。これにより例えば、theme.screensオブジェクトにキーを書こうという時にmdやlgなどがサジェストされるようになるはずです。
tailwindcss は tailwindcss initで設定ファイルを作ってもtailwindcss init --fullで作った設定ファイルと同じだけの設定がされてるものと解釈されます。
tailwindcss の設定ファイルで使わない値を削除するにはthemeやcorePluginsの各値にfalseを指定します。
module.exports = {
theme: {
colors: false
/* ... */
},
corePlugins: {
display: false
/* ... */
}
};最終的にこれは以下のようになりました。全行は GitHub に置いてます。
module.exports = {
prefix: '',
theme: {
width: false,
maxWidth: false,
minWidth: false,
height: false,
maxHeight: false,
minHeight: false,
lineHeight: false,
/* 長いので省略します */
}
};この設定ファイルで以下のファイルをビルドしてみると、
@tailwind components;
@tailwind utilities;これだけに減らせました！
.container {
width: 100%
}
.transform {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y))
}
.transform-none {
transform: none
}
