< Return to index

lumeの​windicssから​tailwindcssへの​切り​替えの​備忘録

denolume

TL;DR:

lumeでtailwindを使うときはsite.copyで_siteに移動しているcssはcompile対象にならない。

あらまし

このブログをなんとかしないと記事をかけないというロックが掛かってしまっているので、ちまちま作業していくことにした。

windiが新規機能追加をしなくなるそうなので素のtailwindに乗り換えてみることにした。

Windi CSS is Sunsetting | Windi CSS

This means that we won't expect adding new features to Windi CSS in the future, but we will still provide security fixes as needed. Windi CSS is not deprecated, and existing users and projects can continue to use it without issues. Meanwhile, we encourage you to explore alternative solutions for your future projects.

個人的にこの手のcssフレームワークに乗るメリットは以下だと思っている。

  • vendor prefixのつけ忘れがなくなる
  • 非推奨なcssを使い続ける可能性が下がる
    • 内部的にcompileされるから代替のものに置き換えてくれるのを期待している

乗り換え作業でcssのcompileがされなくて時間をそこそこ取られたので、下記に記載する。

  1. windiのpluginからtailwindのpluginに変える これはすぐできるはず。(_config.tsのimportを書き換えるだけなので)
  2. どこかのcssにtailwindの読み込みをかく ref: https://lume.land/plugins/tailwindcss/
  3. 読み込みのcssをsite.copyで処理しているなら、それをやめる やめないとtailwindのcompile対象にならないっぽい。
編集を提案