Tailwind UI が Tailwind Plus になりました
詳細はこちら
UI BlocksTemplatesUI Kit
サインインフルアクセスを入手

変更履歴

Tailwind Plus の最新の追加機能や改善点に関する最新情報をお届けします。

メールで購読

Tailwind CSS v4.0 のサポート

Tailwind Plus のすべてのサンプルを Tailwind CSS v4.0 をサポートするように更新しました！どのコンポーネントの「Code」タブでも、v4.0 と v3.4 を切り替えるピッカーが表示されるようになりました。

New Tailwind CSS version picker

バージョン間の違いはわずかですが、v4.0 のスニペットは、コードを簡素化するために v4 で導入された新機能を活用し、今回のリリースでの破壊的な変更にも確実に対応します。

Tailwind CSS v4.0 の詳細については、発表記事をご覧ください。

新しいコンテンツセクション、フッター、およびフィーチャーセクション

最近の Radiant テンプレートのために設計したアイデアに触発されて、5 つの新しいマーケティングブロックを追加しました。

New content section, footers, and feature sections

画像タイルと統計を備えた真新しいコンテンツセクションを追加しました。アバウトページに最適です。

スタイリッシュでガラスのようなボーダーで囲まれた大きなスクリーンショットを備えた新しいフィーチャーセクションの例もあります。この例は、アプリの目立つスクリーンショットを表示したい場合に最適で、ライトバージョンとダークバージョンの両方で利用できます。

最後に、大きくて分厚いサイトフッターがお好きな方のために、目立つコールトゥアクションを備えた新しいフッターの例を追加しました。これもライトバージョンとダークバージョンがあります。

新しい料金表の例

豪華なガラス製の料金カード、ロゴクラウド、およびモバイルで自動的にタブに巧妙に切り替わる完全な機能比較表を備えた、巨大な新しい料金セクションの例を追加しました。

New pricing table example

いつものように、ブレークポイントの微調整、セマンティックマークアップの適切な取得、およびすべてがスクリーンリーダーにアクセス可能であることを確認するなど、お客様が苦労する必要がないように、細部にまでこだわりました。

Bento グリッド

マーケティングコンポーネントのコレクションに、真新しい Bento Grids カテゴリを追加しました。開始にあたって、3 つの美しくデザインされた例が含まれています。

New bento grid examples

これらは現在非常に人気があり、マーケティングサイトのフィーチャーセクションとして最適です。

次のプロジェクトで試してみてください。カスタマイズを念頭に置いて設計されており、細部まで自分で苦労することなく、グラフィックを独自のスクリーンショットに簡単に置き換えることができます。

Radiant: SaaS ビジネス向けの美しいマルチページマーケティングウェブサイト

Radiant、Next.js、Tailwind CSS で構築され、Sanity を利用したブログを備えた、美しいマルチページ SaaS マーケティングテンプレートをリリースしました。

The new Radiant SaaS marketing template

今回はアニメーションを非常に楽しんでおり、完全に異なる製品にも簡単に適応できる、非常に汎用的なインタラクティブマーケティングコンポーネントのセットを設計しました。

また、テンプレートでヘッドレス CMS を試したのは今回が初めてであり、独自の Tailwind CSS および Next.js プロジェクトで Sanity のようなツールを接続するための優れた参考になります。

React Server Components との互換性の向上

Tailwind UI の React サンプルは、React Server Components (RSC) でより使いやすくなりました。

React Server Components

サーバーコンポーネントは props として関数を渡すことをサポートしていないため、Tailwind UI でそれを行った場所では、そのコンポーネントに実際のインタラクティビティがない場合でも、親をクライアントコンポーネントにする必要がありました。

Headless UI v2.0 の新しい data-* 状態属性を使用することで、コンポーネントの状態に基づいて異なるクラスを条件付きで適用するために使用していたすべての render props を削除することができました。

また、クライアントコンポーネントにする必要があるコンポーネントは、例の先頭に 'use client' を含めるように更新しました。これにより、RSC プロジェクトにコピーアンドペーストすると、すぐに動作します。

React 用 Headless UI v2.1

Tailwind UI のすべての React コンポーネントと Next.js テンプレートを、Headless UI v2.1 に搭載された新しいデータ属性ベースの transition API を使用するように更新しました。

Headless UI v2.1

この新しい transition API の詳細については、発表記事をご覧ください。

Catalyst: アプリケーションレイアウト、ナビゲーションメニュー、説明リストなど

開発プレビューをリリースして以来、Catalyst の最初のメジャーアップデートを公開しました。2 つの新しいアプリケーションレイアウト、navbar および sidebar コンポーネント、説明リストなどが含まれています。

Catalyst sidebar layout

JavaScript と TypeScript の両方で利用可能な、すべての新しいコンポーネントの完全なリストを以下に示します。

また、React 用 Headless UI v2.0 のリリースにより、Catalyst が開発プレビューではなくなったことをお知らせできることを嬉しく思います。正式に安定しており、基盤となる依存関係の破壊的な変更を心配することなく、今日から本番環境で使用を開始できます。

最新のライブデモサイトをチェックして、これらのアップデート後の完全な Catalyst プロジェクトがどのように見えるか、どのように感じるかをご自身でご確認ください。

React 用 Headless UI v2.0

Tailwind UI のすべての React コンポーネントと Next.js テンプレートを、Headless UI v2.0、数週間前にリリースしたこのライブラリの最新メジャーバージョンを使用するように更新しました。

Headless UI v2.0

Headless UI v2.0 には、組み込みのアンカーポジショニング、新しいチェックボックスコンポーネント、コンボボックスリストの仮想化など、新機能が満載です。詳細については、発表記事をご覧ください。

既存の Headless UI v1.x プロジェクトをこの最新バージョンにアップグレードすることをお勧めします。変更内容をすべて説明する詳細なアップグレードガイドをまとめました。

Catalyst のご紹介: React 用の最新のアプリケーション UI キット

Catalyst の最初の開発プレビューをリリースしました。React 用の最初の完全コンポーネント化された、バッテリー込みのアプリケーション UI キットです。実際のアプリケーションで行うのと同じように、実際のコンポーネントアーキテクチャを作成するために相互に構築された、思慮深く設計された API を備えた実際のコンポーネントです。

まだ多くの機能が追加される予定ですが、新しいコンポーネントを構築し、さらに優れたエクスペリエンスを実現する方法を見つけるにつれて、すぐに試していただけるように本日リリースします。

The new Catalyst UI kit

Next.js サイトテンプレートが TypeScript で利用可能に

すべての Next.js サイトテンプレートが JavaScript と TypeScript の両方で利用可能になったため、あなたとあなたのチームに適した言語を選択できます。

Tailwind UI templates now available in TypeScript

テンプレートをダウンロードすると、zip ファイルに 2 つのフォルダーがあります。 /{template}-js と /{template}-ts です。それぞれに、対応する言語のテンプレート全体のソースコードが含まれています。

各テンプレートは、型を適切に取得することに非常に満足しているオタクによって、最新バージョンの TypeScript で作成されているため、TypeScript が好きな場合は、非常に満足のいくエクスペリエンスが得られるはずです。

Studio のご紹介: 美しい新しいマルチページエージェンシーテンプレート

Studio、Tailwind CSS と Next.js で構築された美しい新しいマルチページエージェンシーテンプレートをリリースしました。これはこれまでで最大のテンプレートであり、Next.js の新しい app router を活用しています。

このテンプレートでは、Framer Motion を使用してテンプレート全体に控えめなアニメーションを上品に含めたり、MDX を使用してケーススタディとブログ投稿の作成エクスペリエンスを優れたものにするなど、細部にまでこだわりました。

The new Studio agency template

すべてが新しいアプリケーション UI ページ + 大規模なコンポーネントアップデート

完全に再設計されたページ例と、数十の更新された真新しいコンポーネントを含む、大規模なアプリケーション UI リフレッシュをリリースしました。

Collage of new application UI component designs

新しいページ例には、ライトデザインとダークデザインの両方が含まれており、新しいマーケティングコンポーネントのスクリーンショットとして使用されているのを見た後、誰もが求めていた非常に人気のあるホームスクリーンデザインも含まれています。

また、既存のすべてのコンポーネントカテゴリを見直し、新しいバッジ、スタックリスト、テーブル、フォームレイアウト、統計セクションなど、改善の機会を見つけました。

Commit のご紹介: 美しい新しい変更履歴テンプレート

Commit、Tailwind CSS、Next.js、MDX、および Motion One を少し使用して構築された、美しい新しい変更履歴テンプレートをリリースしました。

プレーンテキストの CHANGELOG ファイルに触発されて、すべてを 1 つの素晴らしいマークダウンファイルから管理する方法で全体を構築しました。最後の投稿の上に水平ルールをスラップして入力を開始するだけです。

The new Commit changelog template

すべてが新しいマーケティングページ例 + 多数のコンポーネントアップデート

注意深く見ていれば、過去数週間でマーケティングカテゴリ全体に多くの「new」バッジが表示されていることに気付いたかもしれません。

Collage of new marketing component designs

すべてのマーケティングコンポーネントを刷新する時期が来たと判断し、すべてのページ例のまったく新しいデザインから始めました。

また、美しい新しい料金セクション、お客様の声、ロゴクラウド、チームセクション、統計など、新しいデザインですべての個々のマーケティングコンポーネントカテゴリを更新しました。

新しいヒーロー、フィーチャーセクション、CTA など

過去数週間は、Tailwind UI の新しいマーケティングコンポーネントの大規模なバッチに取り組んでおり、多数の新しいヒーローセクション、フィーチャーセクション、CTA などが含まれています。

Collage of new marketing component designs

また、すでにそこにあった例をいくつか調べて、少し磨きをかけました。これらのコンポーネントの一部を約 3 年前にリリースして以来、実際に設計が向上していることを発見して、うれしい驚きでした。

新しい Protocol テンプレート

本日、API リファレンス用に調整された、細心の注意を払って作成されたドキュメントテンプレートである新しい Protocol テンプレートのリリースを発表できることを嬉しく思います。

MDX を搭載し、作成エクスペリエンスが素晴らしいものになるように、細部にまでこだわりました。これにより、優れた API ドキュメントの作成のみに集中でき、その周辺のツールに気を取られることはありません。

The new Protocol API reference template

新しい Spotlight テンプレート

本日、新しい Spotlight テンプレートのリリースを発表できることを嬉しく思います。これは、実際に公開する気になるほど素晴らしい個人ウェブサイトです。

Tailwind CSS と Next.js で構築されており、ブログ、プロジェクトページ、ダークモードなど、個人ウェブサイトを立ち上げるために必要なものがすべて含まれています。そしていつものように、Tailwind CSS チームによって設計および構築されています。

The new Spotlight personal website template

新しい Pocket テンプレート

本日、エキサイティングな新しいモバイルアプリに最適なウェブサイトテンプレートである、新しい Pocket テンプレートのリリースを発表できることを嬉しく思います。

Tailwind CSS と Next.js で構築された Pocket には、Framer Motion ライブラリによって強化された楽しいアニメーションとインタラクションが満載です。完全なエクスペリエンスについては、ライブプレビューを必ずご確認ください。

The new Pocket app marketing template

Tailwind UI テンプレート

本日、Tailwind UI テンプレートのリリースを発表できることを嬉しく思います！

Tailwind UI templates available now.

これらは、React と Next.js で構築された、視覚的に見事でカスタマイズが簡単なサイトテンプレートです。次のプロジェクトに最適な出発点であり、専門家が Tailwind CSS で実際のウェブサイトを構築する方法を学ぶための究極のリソースです。

  • Salient テンプレート - 次の大きなアイデアを発表するための美しい SaaS ランディングページ。
  • Transmit テンプレート - あらゆる番組に最適なクリーンでプロフェッショナルなポッドキャストテンプレート。
  • Syntax テンプレート - このドキュメントテンプレートで、ユーザーにスタイリッシュに教育を。
  • Keynote テンプレート - この人目を引くテンプレートで、次のカンファレンスを華やかに開始。
  • Primer テンプレート - 最初のコースまたは電子書籍向けの素晴らしいランディングページ。

新しい追加

  • Application UI パッケージに 16 個の新しいテーブルの例を追加

新しい追加

新しい追加

  • Application UI パッケージに新しいカレンダーカテゴリを追加 (8 つの例)

新しい追加

  • Application UI パッケージに新しいテキストエリアカテゴリを追加 (5 つの例)
  • Application UI パッケージに 9 つの新しいラジオグループの例を追加
  • Application UI パッケージに 1 つの新しいステップの例を追加
  • Marketing パッケージに 1 つの新しいFAQの例を追加

Tailwind UI E コマース

本日、Tailwind UI E コマースのリリースを発表できることを嬉しく思います！

約 6 か月かけて、2020 年 2 月の最初のリリース以来、Tailwind UI 用の最初のまったく新しいコンポーネントキットをようやくリリースしました。

Tailwind UI Ecommerce available now.

Tailwind UI E コマースは、14 の新しいコンポーネントカテゴリと 7 つの新しいページ例カテゴリにわたって 100 を超える新しいコンポーネントを追加します

新しい追加

新しい追加

  • Marketing パッケージに 2 つの新しい料金ページの例を追加
  • Marketing パッケージに 2 つの新しい料金セクションの例を追加
  • Marketing パッケージに 2 つの新しいFAQの例を追加
  • Marketing パッケージに 1 つの新しいお客様の声の例を追加
  • Marketing パッケージに 1 つの新しいヘッダーの例を追加

React と Vue のサポート

本日、Tailwind UI のすべての例に React および Vue 3 のファーストクラスサポートを追加できることを嬉しく思います。これにより、プロジェクトに合わせて簡単に適応できるようになります。

Tailwind UI: Now for React and Vue.

長い道のりでしたが、この件で最終的に到達した場所に非常に誇りを持っており、Tailwind UI が Tailwind CSS ユーザーのまったく新しいグループにとって役立つツールになると本当に思っています。

  • 機能的でアクセス可能 — Tailwind UI のすべての React および Vue の例は、Headless UI によって駆動されており、ARIA 属性管理、キーボードインタラクション、フォーカス処理などのすべてを処理します。一方、厄介な複雑さをすべて node_modules フォルダーに安全に隠しておき、お客様に代わって改善とバグ修正を行うことができます。コードを変更する必要はありません。
  • 完全にカスタマイズ可能 — Headless UI を使用すると、実際のマークアップに対する制御を奪うことなく、複雑な JS 機能をすべて抽象化することができました。これは、デザイン全体が完全にあなたの制御下にあり、慣れているようにユーティリティクラスを追加および削除するだけで、任意の例を完全にカスタマイズできることを意味します。

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

新しい追加

新しい追加

新しい追加

新しい追加

新しい追加

新しい追加

新しい追加

新しい追加

新しい追加

新しい追加

新しい追加

新しい追加

新しい追加

  • Application UIパッケージに、新しいスライドオーバーカテゴリを6つの例とともに追加しました

新しい追加

  • Application UIパッケージに、新しいセレクトメニューカテゴリを6つの例とともに追加しました

新しい追加

  • マーケティングパッケージに、新しいヘッダーカテゴリを4つの例とともに追加しました
  • マーケティングパッケージに、新しいフライアウトメニューカテゴリを6つの例とともに追加しました

新しい追加

新しい追加

  • Application UIパッケージに、新しい統計カテゴリを、最初に3つのコンポーネントとともに追加しました
  • Application UIパッケージに、新しい通知カテゴリを、最初に6つのコンポーネントとともに追加しました
  • マーケティングパッケージに、新しいブログセクションカテゴリを、最初に3つのコンポーネントとともに追加しました
  • トグルコンポーネントで、flex-no-shrink を flex-shrink-0 に修正しました
  • 説明リストコンポーネントで、Firefox での切り捨て問題を修正しました (https://github.com/tailwindui/issues/issues/71 を参照)
  • サイドバーレイアウトのオフキャンバスメニューが非常に小さな画面に対して広すぎる問題を修正しました (https://github.com/tailwindui/issues/issues/2 を参照)

アクセシビリティの改善

今週、アクセシビリティコンサルタントとの協力を開始し、早期アクセスコンポーネントを検証し、すべてのベストプラクティスに従っていることを確認しています。

新しい追加

  • 新しいアクションパネルカテゴリを、最初に8つのコンポーネントとともに追加しました
  • 新しいレイアウトコンテナカテゴリを、最初に4つのコンポーネントとともに追加しました
  • 新しいレイアウトパネルカテゴリを、最初に10個のコンポーネントとともに追加しました
  • 新しいフォームレイアウトの例を2つ追加しました (独立した送信アクションを持つ2カラムカードと、フルワイドカードの2カラム)
  • 新しい「強調された階層を持つ3階層」価格セクションの例を追加しました
  • マーケティングバナーを、4つのコンポーネントとともに追加しました (初日から完成していましたが、設定のタイプミスにより、ずっと非表示になっていました！ おっとっと。)
  • ページヘッディングおよびカードヘッディングのボタンのフォーカス/アクティブスタイルを修正しました (これらは、Tailwind UI の他の場所で使用しているボタンスタイルとわずかに矛盾していました)
  • グレーのフッターを持つモーダルコンポーネントのフッターのパディングを調整しました (最初は py-4 を使用していましたが、py-3 の方がより一貫性があります)
  • 説明リストコンポーネントで、dd 要素と dt 要素が逆になっていました。修正しました！