設定をリセットする

tailwindcss は tailwindcss initで設定ファイルを作ってもtailwindcss init --fullで作った設定ファイルと同じだけの設定がされてるものと解釈されます。

tailwindcss の設定ファイルで使わない値を削除するにはthemecorePluginsの各値に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
}