Tips: Tailwind CSS

設定ファイル（tailwind.config）をTSに置き換え

※ v3.3.0からサポート

tailwind.config.ts

import { Config } from 'tailwindcss';

export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  ...
} satisfies Config;

bisquit_dev

任意の文字列をTailwind autocompleteさせる

twc.ts

export const twc = String.raw;

.vscode/settings.json

{
    "tailwindCSS.experimental.classRegex": ["twc\\`(.*)\\`;?"],
}

// classNameじゃない箇所でも補完されるようになる
const someClasses = twc`text-red-100`;

bisquit_dev

クラス名の結合

classnames
clsx
tailwind-merge

最新バージョン3.3では、いずれのライブラリを使っていてもVSCodeで補完が効いた（外部要因の可能性はある）

tailwind-mergeは twMerge と twJoin のAPIがあり、twJoin はAPIドキュメントに書かれているようにclsxのサブセット（一部のAPIが削がれているがほぼ同等）

tailwindに依存したプロジェクトでは、固定でマージする（衝突が起きないことが保証できる）場合は twJoin を使って、外部からのクラス名を許容する（propsでclassnameを受け取る）場合は twMerge を使うのが良いと思われる

twJoinはclxsのサブセットのため、twJoin -> clxs/classnamesは置換で変更可能

bisquit_dev

2023/07/15 現在の設定

prettier 3.0+
prettier-plugin-tailwindcss 0.4.0+
eslint-plugin-tailwindcss 3.0+

.vscode/settings.json

  "tailwindCSS.experimental.classRegex": [
    "clsx`([^`]*)",
    ["clsx\\(([^)]*)\\)", "'([^']*)'"]
  ],

prettier.config.cjs

/** @type {import("prettier").Options} */
module.exports = {
  plugins: ['prettier-plugin-tailwindcss'],
  tailwindFunctions: ['clsx'],
};

All of these works for autocomplete, lint, format

const foo = clsx`flex flex-col bg-primary-5`;
const bar = clsx('flex flex-col bg-primary-5');

<div className={clsx('flex flex-col bg-primary-5')}></div>

bisquit_dev

shadcn-uiで用意されている cn のようなものを生やすのが楽かもしれない。

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}