Tailwind CSSのデフォルトの変数をほぼ全て削除して、なるべくArbitrary valuesを使うためのtailwind.config

tailwind.config.ts

import type { Config } from 'tailwindcss'

const config: Config = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    // Common
    colors: {
      '[]': '[]',
      inherit: 'inherit',
      transparent: 'transparent',
    },
    spacing: {
      '[]': '[]',
    },

    // Layout
    aspectRatio: {
      '[]': '[]',
      auto: 'auto',
    },
    columns: {
      '[]': '[]',
      auto: 'auto',
    },
    inset: {
      '[]': '[]',
    },
    visibility: {},
    zIndex: {
      '[]': '[]',
      auto: 'auto',
    },

    // Flexbox & Grid
    flexBasis: {
      '[]': '[]',
      auto: 'auto',
    },
    flexGrow: {
      '[]': '[]',
    },
    flexShrink: {
      '[]': '[]',
    },
    order: {
      '[]': '[]',
    },
    gridTemplateColumns: {
      '[]': '[]',
      none: 'none',
    },
    gridColumn: {
      '[]': '[]',
      auto: 'auto',
    },
    gridColumnStart: {
      '[]': '[]',
      auto: 'auto',
    },
    gridColumnEnd: {
      '[]': '[]',
      auto: 'auto',
    },
    gridTemplateRows: {
      '[]': '[]',
      none: 'none',
    },
    gridRow: {
      '[]': '[]',
      auto: 'auto',
    },
    gridRowStart: {
      '[]': '[]',
      auto: 'auto',
    },
    gridRowEnd: {
      '[]': '[]',
      auto: 'auto',
    },
    gridAutoColumns: {
      '[]': '[]',
    },
    gridAutoRows: {
      '[]': '[]',
    },

    // Spacing

    // Sizing
    width: {
      '[]': '[]',
      auto: 'auto',
    },
    minWidth: {
      '[]': '[]',
    },
    maxWidth: {
      '[]': '[]',
      none: 'none',
    },
    height: {
      '[]': '[]',
      auto: 'auto',
    },
    minHeight: {
      '[]': '[]',
    },
    maxHeight: {
      '[]': '[]',
      none: 'none',
    },

    // Typography
    fontFamily: {
      '[]': '[]',
    },
    fontSize: {
      '[]': '[]',
    },
    fontWeight: {
      '[]': '[]',
    },
    letterSpacing: {
      '[]': '[]',
    },
    lineHeight: {
      '[]': '[]',
    },
    textDecorationThickness: {
      '[]': '[]',
      auto: 'auto',
      'from-font': 'from-font',
    },
    textUnderlineOffset: {
      '[]': '[]',
      auto: 'auto',
    },

    // Backgrounds
    backgroundImage: {
      '[]': '[]',
      none: 'none',
    },

    // Borders
    borderRadius: {
      '[]': '[]',
    },
    borderWidth: {
      '[]': '[]',
    },
    borderColor: {
      '[]': '[]',
      inherit: 'inherit',
      transparent: 'transparent',
    },
    outlineWidth: {
      '[]': '[]',
    },
    outlineOffset: {
      '[]': '[]',
    },

    // Effects
    boxShadow: {
      '[]': '[]',
    },
    opacity: {
      '[]': '[]',
    },

    // Filters
    blur: {
      '[]': '[]',
    },
    brightness: {
      '[]': '[]',
    },
    contrast: {
      '[]': '[]',
    },
    dropShadow: {
      '[]': '[]',
    },
    grayscale: {
      '[]': '[]',
    },
    hueRotate: {
      '[]': '[]',
    },
    invert: {
      '[]': '[]',
    },
    saturate: {
      '[]': '[]',
    },
    sepia: {
      '[]': '[]',
    },
    backdropBlur: {
      '[]': '[]',
    },
    backdropBrightness: {
      '[]': '[]',
    },
    backdropContrast: {
      '[]': '[]',
    },
    backdropGrayscale: {
      '[]': '[]',
    },
    backdropHueRotate: {
      '[]': '[]',
    },
    backdropInvert: {
      '[]': '[]',
    },
    backdropOpacity: {
      '[]': '[]',
    },
    backdropSaturate: {
      '[]': '[]',
    },
    backdropSepia: {
      '[]': '[]',
    },

    // Tables

    // Transitions & Animation
    transitionDuration: {
      '[]': '[]',
    },
    transitionTimingFunction: {
      '[]': '[]',
      linear: 'linear',
    },
    transitionDelay: {
      '[]': '[]',
    },
    animation: {
      '[]': '[]',
      none: 'none',
    },

    // Transforms
    scale: {
      '[]': '[]',
    },
    rotate: {
      '[]': '[]',
    },
    translate: {
      '[]': '[]',
    },
    skew: {
      '[]': '[]',
    },

    // Interactivity

    // SVG
    fill: {
      '[]': '[]',
      none: 'none',
      inherit: 'inherit',
      transparent: 'transparent',
    },
    stroke: {
      '[]': '[]',
      none: 'none',
      inherit: 'inherit',
      transparent: 'transparent',
    },
    strokeWidth: {
      '[]': '[]',
    },
    
    // Your own settings
    extend: {},
  },
}

export default config

思想

• Tailwind CSSのクラス名が気に入らない
  • CSSの本来のプロパティ名・値と違いすぎるものが多い
    • letter-spacingが.trackingになっていたり
    • visibility: hidden;が.invisibleになっていたり
  • font-sizeを設定したいだけなのに.text-baseとすると一緒にline-heightも設定されたり
• とはいえTailwind CSSは便利なので恩恵には預かりたい
  • 要素のクラス名を考える必要が無い（これが一番大きい）
  • VSCodeで補完が効く
  • ESLintプラグインがある
  • さまざまなUIライブラリなどがある

方針

• デフォルトのクラス名は変えない
  • 変えてしまいたいが（そのためのプラグインも作った）、Tailwindに慣れている人からすると逆に学習コストが高い
  • configを剥がす時に移行作業が大変
  • 他UIライブラリとの兼ね合いなど
• デフォルトの変数は（ほぼ全て）削除する
  • ほとんどの場合自分で用意した色やその他変数を使うので
  • 必要ない変数が補完の候補に大量に表示されて欲しくない
  • 実際のCSSの値とクラス名が一致している変数のみ残す
    • 例えば.aspect-autoはaspect-ratio: auto;となるので残す
    • .aspect-squareはaspect-ratio: 1 / 1;なので削除
  • 変数を全て削除するとVSCodeでクラス名の補完がされなくなるので、[] (Arbitrary values)だけを設定しておく
• Arbitrary valuesを可能な限り使う
  • .text-[16px]でfont-size: 16px;になる
  • CSS本来の自由な書き味もありつつ、Tailwind CSSのメリットも享受できる
• Arbitrary valuesを使えないクラス名は仕方がないので残す
  • .invisible .sr-onlyなど
  • めちゃくちゃ違和感があるけど諦める
• プロジェクト固有の変数も設定したい
  • その場合はextendに書けばよい