経緯
このサイトは Astro で書いているのですが、スタイリングに Tailwind CSS のインテグレーションを使っていました1。 理由は単純で、CSSでデザインの調整をするのに時間をかけたくないからでした。 自分は凝り性というか、些細な部分を決めるのにすごく時間がかかってしまう人間で、その時間をなるべく減らそうと思った結果が Tailwind CSS の利用でした。 実際使い勝手はかなりよく、ある程度の拡張性もあったので、快適にサイトの制作を進められたと感じています。
しかし、このサイトのメインコンテンツをブログにしていこうと思ったときに、Markdown にスタイルを当てたいときに用いる prose クラスに不便さ2を感じ、結局剥がすことにしました。
剥がす
というわけで、実際に剥がしていきます。 手順はざっくりこんな感じです。
- スタイルを定義または適用しているそれぞれのファイルで、クラス名の書き換えなどは行わず、
style要素に Tailwind CSS のクラスと同じクラスを定義する - Tailwind CSS のインテグレーションを抜く
- 定義したクラスを整理する
1. スタイルを定義または・・・（略）
少し面倒ですが、Tailwind CSS のクラスが指定している値をいちいち style 要素に直書きします。
ページ、レイアウト、コンポーネント、スタイル等、Tailwind CSS でスタイリングしているファイルを一つずつ見ていって置換していきます。
置換できたら逐一開発環境でレイアウトなどが変わっていないか（変わっていても許容範囲内か）確認します。
気をつけたいのが、Tailwind CSS のデフォルトの設定です。例えば h1 などの見出しはデフォルトで文字サイズも太さも変わらないようになっています。
また、デフォルト風で *,:before,:after に値が定義されている場合があり、自分の環境では以下の要素が定義されていたので、global.css に追加しておきます。
*,:before,:after { box-sizing:border-box; border-width:0; border-style:solid; border-color:#e5e7eb}2. Tailwind CSS のインテグレーションを抜く
簡単です。まずアンインストールします。pnpm ではこうやります。
pnpm remove @astrojs/tailwind次に、astro.config.ts からインテグレーションに関する記述を削除します。@tailwindcss/typography を使用している場合は、拡張している部分を書き忘れないようにしましょう。
3. 定義したクラスを整理する
同じクラスを多くのファイルで適用しているのであれば global.css に書いてしまいます。
剥がせた・・・はず
これで多分できていると思います。自分は1と2を逆にやってしまい、正しく置換できているかの確認がしづらくなりました。 デプロイされたサイトのビルド済みの CSS と比較しながらなんとかやりましたが、デフォルト値のことを忘れていて、 置換したはずなのにレイアウトが崩れまくっている原因がわからず時間がかかりました。
ついでに色々とスタイリングしなおしました。テーマ切り替えボタンをなくしたりしました3。