prettier-plugin-tailwindcssを適用したらスタイルが壊れた話

皆さんこんにちは。株式会社バベルでエンジニアをしている uhyo です。バベルが提供しているaileadというプロダクトではスタイリングにTailwind CSSを使用しています。 恥ずかしながら、これまでTailwind CSSを十分に活用するための環境が整っていませんでした。具体的には、Tailwind CSSのクラス名を書くところにリンターが適用されていなかったり、クラスの並び順がとても自由で開発に支障をきたしたりしていました。 そこで、今回prettier-plugin-tailwindcssをコードベースに導入しました。これは、言わずと知れたコードフォーマッターPrettier向けのプラグインで、Tailwind CSSのクラス名をいい感じに並び替えることでコードに少し秩序をもたらしてくれるものです。 コードフォーマッターの原則は、コードの挙動を変えないことです。そのため、理想的

[tofu-kun]

なるほど…。そして修正プルリクありがたい。

[koyhoge]

全角スペースは色々問題を起こすので、フォントや機能拡張で可視化するようにしてるけどなぁ。

[versatile]

git push などを hook にして 全角スペースを検索して警告をだす CI/CD をつくるのだ

[bellonieta]

全角スペースなんか混ぜるのが悪いでしょ。

[yasu-log]

Tailwind CSS。これって実は現場では発生していたりして？