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
}
