Tailwindでなめらかなレスポンシブを実現できる「Fluid for Tailwind CSS」を試してみた

はじめに

Tailwind CSSでは、メディアクエリを使わずにブレイクポイントで簡単にレスポンシブ対応ができます。でも、画面サイズが変わるたびに急にレイアウトが切り替わって「ガクッ」とした感じ、気になったことはありませんか？
そこで便利なのが「Fluid for Tailwind CSS」。このプラグインを使うと、CSSの clamp() 関数を活用して、画面サイズに応じて要素が滑らかに変化し、より自然なデザインが実現できます。今回は、このFluidの使い方とその魅力を見ていきましょう！

Fluid for Tailwind CSSとは？

https://fluid.tw/
「Fluid for Tailwind CSS」は、レスポンシブデザインをさらにスムーズにしてくれるプラグインです。"Fluid" とは流体という意味があり、その名の通り、デザインがまるで流れるように滑らかに調整されます。通常、Tailwindでは sm:, md:, lg: などのブレイクポイントを使って、特定の画面サイズでスタイルを調整します。でもFluidを使うと、ブレイクポイント間の変化が滑らかになり、どんなサイズでも違和感なくデザインが調整されます。

例えば、文字のサイズやマージンが画面サイズに応じて自然に変わるので、大きな画面でも小さな画面でも心地よい見た目を維持できます。レスポンシブ対応をもっと自然な感じにしたいなら、Fluidはまさにそのためのツールです！

インストール

1. まずは、Fluidプラグインをインストールします：

npm install -D fluid-tailwind

2. インストールが完了したら、Tailwindの設定ファイル tailwind.config.ts にFluidプラグインを追加します。

tailwind.config.ts

  import type { Config } from "tailwindcss";
+ import fluid, { extract, screens, fontSize } from "fluid-tailwind";　// Fluidプラグインと、抽出関数・スクリーンサイズ・フォントサイズをインポート
  const config: Config = {
    content: {
      files: [
        "./pages/**/*.{js,ts,jsx,tsx,mdx}",
        "./components/**/*.{js,ts,jsx,tsx,mdx}",
        "./app/**/*.{js,ts,jsx,tsx,mdx}",
      ],
+     extract,　// Fluidで必要なcontentファイルからデザインの要素を抽出するために使用
    },
    theme: {
      extend: {
        colors: {
          background: "var(--background)",
          foreground: "var(--foreground)",
        },
      },
+     screens,　// Fluidが提供するレスポンシブ対応のスクリーンサイズを追加
+     fontSize,　// Fluidによって拡張されたフォントサイズを使用可能にする
    },
+   plugins: [fluid],　// Tailwind CSSにFluidプラグインを追加して機能を適用
  };
  export default config;

この設定で、Fluid for Tailwind CSSが正しく適用されるはずです。

使用方法と構文

Fluid for Tailwind CSSでは、クラス名の指定が少しユニークです。Fluidでは画面サイズに応じた流動的なスタイル調整が可能で、構文は ~[クラス]-[最小値]/[最大値] という形式を使用します。

例えば、以下のようにボタンのスタイルを設定することで、画面サイズに応じて自動的にスタイルが変化します：

<button className="bg-sky-500 rounded ~px-4/8 ~py-4/8 ~text-sm/2xl">
  Fluid button
</button>

イメージ

さいごに

Fluid for Tailwind CSSを使うことで、レスポンシブデザインがより滑らかで自然なものになります。画面サイズに応じたデザインの調整がスムーズに行えるため、ユーザー体験の向上にもつながると思います。ぜひ、みなさんも試してみてください！

もっと詳しく知りたい方は Fluid公式サイト をご覧ください！