vitesse を要素に分解してベストプラクティスを学ぶ

odan 2021/08/08に更新

antfu/vitesse: 🏕 Opinionated Vite Starter Template
Opinionated な Vite のテンプレートである vitesse の各要素について理解を深めることで、vite 周辺のエコシステムのベストプラクティスをキャッチアップしたい

すべての要素を網羅するつもりはなくて、気になったやつだけ

odan 2021/08/08

windicss/windicss: Next generation utility-first CSS framework.

Tailwind v2.0 と完全に互換性がある、utility-first な CSS framework

https://github.com/windicss/vite-plugin-windicss があるので、これをインストールすれば良い

$ yarn add -D vite-plugin-windicss windicss

インストールとセットアップは https://windicss.org/integrations/vite.html に従って進めれば良い

  <button
    class="
      w-full
      sm:w-auto
      flex-none
      bg-gray-900
      hover:bg-gray-700
      text-white text-lg
      leading-6
      font-semibold
      py-3
      px-6
      border border-transparent
      rounded-xl
      focus:ring-2
      focus:ring-offset-2
      focus:ring-offset-white
      focus:ring-gray-900
      focus:outline-none
      transition-colors
      duration-200
    "
  >
    Button
  </button>

こんな感じに書くと