Tailwind UI: ReactとVueのサポートが追加されました

昨年、私たちはTailwind CSSを使用して構築された、プロがデザインしたUIの例を大量に集めたディレクトリであるTailwind UIをリリースしました。これまで、Tailwind UIのすべての例は純粋なHTMLであり、これはすべてのWeb開発者にとっての共通の基盤のようなもので、あらゆるテンプレート言語やJavaScriptフレームワークに適応させることが可能でした。

本日、Tailwind UIのすべての例にReactとVue 3の一級サポートを追加できることを嬉しく思います。これにより、プロジェクトへの適用がさらに容易になります。

長い道のりでしたが、今回の成果には非常に誇りを持っており、これがTailwind UIをTailwind CSSユーザーの全く新しいグループにとって役立つツールにすると本当に思っています。

機能的でアクセスしやすい

Tailwind UIのReactとVueの例はすべて、Headless UIによって動作しています。Headless UIは、モーダルやドロップダウンなどの複雑なコンポーネントを構築するために必要な複雑なJSの動作を、実際のスタイルやマークアップから分離するために開発したコンポーネントライブラリです。

Headless UIは、ARIA属性の管理、キーボード操作、フォーカス処理などをすべて処理してくれるため、Tailwind UIで提供されるReactとVueの例はすべて完全に機能し、複雑なJSのコードを自分で書く必要はありません。そのような厄介な複雑さはすべて`node_modules`フォルダーに安全に格納されており、お客様の代わりに改善やバグ修正を行うことができます。お客様がご自身のコードを変更する必要は一切ありません。

完全にカスタマイズ可能

Headless UIを使用することで、実際のマークアップの制御を奪うことなく、複雑なJS機能をすべて抽象化することに成功しました。これは、デザイン全体が引き続き完全にあなたの制御下にあることを意味します。

import { useState } from "react";
import { Switch } from "@headlessui/react";
function classNames(...classes) {
  return classes.filter(Boolean).join(" ");
}
export default function Example() {
  const [enabled, setEnabled] = useState(false);
  return (
    <Switch
      checked={enabled}
      onChange={setEnabled}
      className={classNames(
        enabled ? "bg-indigo-600" : "bg-gray-200",
        "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none",
      )}
    >
      <span className="sr-only">Use setting</span>
      <span
        aria-hidden="true"
        className={classNames(
          enabled ? "translate-x-5" : "translate-x-0",
          "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
        )}
      />
    </Switch>
  );
}

Tailwind UIからReactまたはVueの例をコピーして、ボーダー半径からパディング、ボックスシャドウ、フォントサイズに至るまで、そのすべてを絶対に変更できます。すべては、慣れ親しんだユーティリティクラスを追加するだけで済みます。

はじめに

すでにTailwind UIをご利用のお客様は、これらすべてが今日の完全に無料のアップデートとしてご利用いただけます。アカウントにログインし、任意のコンポーネントの上にあるドロップダウンでHTML、React、またはVueを選択し、必要な形式でコードを取得してください。

まだTailwind UIをチェックしていない場合は、無料のプレビューコンポーネントを閲覧して、その仕組みを感じてください。これは、新しいサイドプロジェクトのアイデアを迅速に進めるため、職場で構築する必要がある新機能のインスピレーションを見つけるため、またはTailwindで特定の小さなUIトリックを実装する方法を学ぶための素晴らしいツールであり、Tailwind CSS、Headless UI、Heroiconsなどのオープンソースプロジェクトでの私たちの活動をサポートする素晴らしい方法です。

詳細はこちらをご覧くださいませんか？ Tailwind UIのウェブサイトへ →