キカガクエンジニアブログ

株式会社キカガクのエンジニアブログ

トップ > Chakra UI ユーザーが Tailwind CSS を使った時に戸惑ったことと対処法

Chakra UI ユーザーが Tailwind CSS を使った時に戸惑ったことと対処法

はじめに

こんにちは、キカガク ソフトウェアエンジニアの柳澤です。 普段の開発では Chakra UI を使っているのですが、先日1ヶ月だけ Tailwind CSS を使って開発を行いました。Chakra UI を触ってきたエンジニアが Tailwind CSS を触って戸惑ったことと・良かったことを覚書として残します。これから Tailwind CSS を触る方や、技術選定に悩んでいる方の助けになれば幸いです。

とまどいと、対処

1. ピクセル単位でのサイズ指定が出来ない…？

自分のスタイリング方法だとすぐに width を px で指定したり calc(100%-20px) など計算を入れたりするので、Tailwind CSS のサイズ指定の自由度の低さにまず驚きました。

例えば width を指定する時のクラスで、 w-20 はあるのに w-22 は無かったり 最大値が w-96 (384px) だったりと、ここで決められた幅以外は設定できないのか…！と発狂します。

落ち着つきましょう。大体全てのクラスのスタイリング値は、自由に設定できます。ドキュメントの下の方に全て書いてありました。

対処法1 : tailwind.config でテーマをカスタマイズ

tailwind.config に記述を加えることで、新しい定義を作ることが出来ます。（参考：公式）

//tailwind.config 
module.exports = {
  ...
  theme: {
    extend: {
      width: {
        original（好きな名前）: 'calc(100% - 20px)',
      },
    },
  },
};
//実装例
<div className='w-original'>
    <p>オリジナルの幅が定義できた！</p>
</div>

一つ一つ設定してあげる必要がありますが、定義を使い回すときにはこっちが便利です！

width の場合は w-〇〇 と書く、などの判断はもともとのクラスに準じます。

対処法2: [] を使う

一回だけ指定してあげたい場合は、こちらの方法を使います。これを一番最初に知っていれば、発狂せずに済みました。ドキュメントの一番下にひっそりと書いてあるので、ご注意ください。（参考：公式）

//例
<div className='w-[calc(100%-20px)]'>
    <p>tailwind.config 設定せずに、オリジナルの幅を指定出来た！</p>
</div>

※ [] 内ではスペースを詰める必要があるので、calc 等を使用する時は気をつけてください

2. クラスの名前が覚えられません

Chakra UI は プレーンな CSS さえ知っていれば、ケバブケースをそのままキャメルケースに変更してあげることでスタイルを指定することが出来ました。例えば以下のとおりです。

  • CSS justify-content : center → Chakra UI justifyContent='center’
  • CSS line-height : 2 → Chakra UI lineHeight='2’

しかし、Tailwind CSS からは記述を最小限にしようという意気込みを感じます。なのでプレーンなCSSとは少し違う表現になっているケースがありました。

  • CSS justify-content : center → Tailwind CSS justify-center
  • CSS line-height : 2 → Tailwind CSS　leading-loose　(!!)

おなじCSSでも、上記のように表現が変わっています。慣れれば楽々なのでしょうが、最初はかなり戸惑いました。

対処法1：Tailwind CSS のチートシートを使う

Tailwind CSS Cheat Sheet

困った時のチートシート。開発のときには、ウィンドウ幅を最小にしていつも隣に置いていました。公式ドキュメントにはあるけれど、チートシートに入っていないクラスがたまにあったので、もし検索に引っかからなかった時は公式で探してみてください。

対処法2：Tailwind CSS のクラスを提案してくれる VScode 拡張機能 を使う

Tailwind CSS IntelliSense

Tailwind CSS のクラスを提案してくれる拡張機能です。早い段階で入れておいたほうが良いです。これのおかげで、使えない width の値を指定して悩むことはなくなりました。 クラスをホバーすると、プレーンな CSS での表記も教えてくれます。

また、ESLint の Tailwind CSS 用プラグインを入れることで、存在しないクラスを書いたときに指摘してもらえるようになります。

https://github.com/francoismassart/eslint-plugin-tailwindcss

３. クラスが読みにくいです

クラスを同じところに書いていくので、クラスが増えるほど読みにくいです。hover: や md: などのプレフィックスを加えていくと、どんどんごちゃごちゃしていきます。

対処法1：global.css を作って、クラスをまとめる

@apply を使って クラスをまとめる事ができます。よく使うクラス群があれば、まとめて定義しちゃいましょう。参考：公式

/* 例 */
@layer components {
  .button-common {
    @apply px-5 py-3 text-sm font-bold shadow-sm duration-300 ease-in-out;
    }
}

対処法2：Prettier のプラグインを入れる

Tailwind CSS公式の Prettier プラグイン prettier-plugin-tailwindcss を入れることで、クラスを自動的に並び替えてくれます。プレフィックスのついたクラスは後ろの方へ、position 関係のクラスは前の方へ…など色々気を利かせて並び替えてくれるので、大体の並び替えルールを把握しておくことで、読みやすさを向上させることが出来ます。

また、こちらの VScode プラグイン Headwind でも自分のルールを作って、保存時に並び替えることが出来ます。

4. 楽に使えるコンポーネントはありませんか

Chakra UI 時代は、ある程度完成されたモーダルやメニューなどのコンポーネントがあり、よく使う機能をシンプルな記述で実装することが出来ました。 そういった UI を使うためのカスタムフックが用意されていたのも幸せでした。

（Chakra UI のカスタムフック便利度ランキングはこちら）

対処法：Tailwind UI や Headless UI がある

Tailwind CSS 作成団体の Tailwind Labs 公式が用意している Tailwind UI や Headless UI があります。 Tailwind UI のコンポーネントは一部有料ですが、 Headless UI は無料で使用できます。 Headless UI だと記述も短く出来るので、おすすめです。（例：メニュー）

ChakraUI → Tailwind CSS で良かったこと

最初は戸惑いばかりでしたが、良かったことも勿論あります。

今は Chakra UI のプロジェクトに戻ってきたので、Tailwind CSS を懐かしむ日々です。

1. いちいち import しなくて良い

Chakra UI では、全てがコンポーネントで構成されているので、全て import する必要がありました。Text や Flex など 小さいコンポーネントを増やすだけですぐエラーになるのが、少しストレスでした。Tailwind CSS はクラス指定だけで良いので、import で怒られることはなくなりました。

[補足] 最近気づいたのですが、VScode ではエラーの Chakra UI コンポーネントをクリック → クイックフィックス → @chakra-uI/react からのインポートの更新 で import を自動更新することが出来ました。

2. クラスを使いまわせて便利

Chakra UI で共通化したい時はコンポーネント化するしかなかったので、global.css 等でよく使うクラス定義を作れるのはとっても便利でした。例えば余白を揃えたい時に以下のクラスを定義して、各コンポーネントで使いまわしました。

/* 例 */
@layer utilities {
  .px-layout {
    @apply px-6 sm:px-12 md:px-16 lg:px-20 xl:max-w-screen-xl xl:mx-auto;
  }
    .py-layout {
    @apply pt-10 pb-10 md:pt-20 md:pb-16 lg:pt-24 lg:pb-20;
  }
}

3. クラスの受け渡しが便利

Tailwind CSS のクラスは全て文字列なので、props での受け渡しにも便利でした。

クラスをテンプレートリテラルでそのまま書いてあげることで、親コンポーネントで指定された CSS も適用することが出来ます。

//例

export type ButtonProps = {
  className?: string;
};

export const Button = (props: ButtonProps) => {
  return (
    <button
      className={`${props.className}`}
    >
      ボタン
    </button>
  );
};

おわりに

「住めば都と言う言葉は、技術においても通じると思った」というのが1ヶ月 Tailwind CSS を触ってみての感想です。使えば慣れます。Chakra UI も Tailwind CSS も、ちゃんと両方使いやすいです。

今のキカガクでは Chakra UI がメインで使われていますが、Tailwind CSS に触れる機会もあります。色々な技術に触れながら開発してみたい…という方は、是非キカガクの採用ページへどうぞ！まずはカジュアル面談で、ざっくばらんにお話しましょう。