Tailwind CSS v4にBaseline Lintingを行う

DRANK

はじめにあなたのTailwind CSS、ベースラインに準拠していますか？Tailwind CSSを使っていると、ブラウザ互換性の問題に気づきにくくなります。開発者はユーティリティクラスを書くだけ、裏側でどんなCSSプロパティが生成されているかを意識することが少ないためです。本記事では、Tailwind CSS v4が生成したCSSファイルに対して、stylelint-plugin-use-baselineでWeb Platform Baseline準拠チェックを行う手法を紹介します。Web Platform BaselineとはBaselineは、主要ブラウザ（Chrome, Edge, Firefox, Safari）での機能サポート状況を示す指標です。2023年末時点で全主要ブラウザが対応している機能だけで開発しているのであれば「Baseline 2023に準拠している」と言えます。2025年6月にはVSCodeもBaselineチェックに対応しています。アツいですね。 CSSの場合、開発者が書くのは基本的にユーティリティクラス名であり、実際のCSSプロパティはビルド時に生成されます。そこで、今回は以下のアプローチを試しました：Tailwind CLIで生成CSSを出力する生成CSSに対してStylelintを実行するセットアップstylelint-plugin-use-baselineの導入・設定については、ぜひ制作者様の…