変更ログ

Catalystのご紹介：ReactのためのモダンなアプリケーションUIキット

私たちは、React用の最初の完全にコンポーネント化され、バッテリー内蔵のアプリケーションUIキットであるCatalystの最初の開発プレビューをリリースしました。これは、実際のアプリケーションと同様に、互いに構築して実際のコンポーネントアーキテクチャを作成する、考え抜かれたAPIを備えた実際のコンポーネントです。

今後さらに多くの機能が追加される予定ですが、新しいコンポーネントの構築と、さらに優れたエクスペリエンスにするための方法を模索しているため、今日リリースすることにより、すぐに試用いただけます。

Next.jsサイトテンプレートがTypeScriptで利用可能になりました

当社のすべてのNext.jsサイトテンプレートは、JavaScriptとTypeScriptの両方で利用できるようになりました。そのため、お客様とチームにとって最適な言語を選択できます。

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

各テンプレートは、TypeScriptの最新バージョンを使用して、型を完璧に設定することに非常に満足している専門家によって作成されているため、TypeScriptがお好きな場合は、非常に満足できるエクスペリエンスになるはずです。

Studioのご紹介：美しい新しい複数ページのエージェンシーテンプレート

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

このテンプレートでは、Framer Motionを使用してテンプレート全体に微妙なアニメーションを巧みに組み込んだり、MDXを使用してケーススタディとブログ投稿の作成エクスペリエンスを向上させるなど、細部まで注意深く検討しました。

まったく新しいアプリケーションUIページと大規模なコンポーネントの更新

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

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

• ホームスクリーンカテゴリに2つの新しいデザインを追加しました
• 詳細画面カテゴリに2つの新しいデザインを追加しました
• 新しい設定画面カテゴリに2つの新しいデザインを追加しました

また、既存のコンポーネントカテゴリ全体を精査し、新しいバッジ、積み重ねリスト、テーブル、フォームレイアウト、統計セクションなどを含む、改善の機会を見つけました。

• バッジカテゴリを18個の新しいデザインで更新しました
• ボタンカテゴリを3個の新しいデザインで更新しました
• 説明リストカテゴリを7個の新しいデザインで更新しました
• フィードカテゴリを1個の新しいデザインで更新しました
• フォームレイアウトカテゴリを5個の新しいデザインで更新しました
• グリッドリストカテゴリを1個の新しいデザインで更新しました
• 複数列レイアウトカテゴリを6個の新しいデザインで更新しました
• ページ見出しカテゴリを2個の新しいデザインで更新しました
• サイドバーレイアウトカテゴリを8個の新しいデザインで更新しました
• サイドバーナビゲーションカテゴリを5個の新しいデザインで更新しました
• サインインと登録カテゴリを5個の新しいデザインで更新しました
• 積み重ねリストカテゴリを17個の新しいデザインで更新しました
• 統計カテゴリを2個の新しいデザインで更新しました
• テーブルカテゴリを3個の新しいデザインで更新しました
• タブカテゴリを1個の新しいデザインで更新しました
• 垂直ナビゲーションカテゴリを5個の新しいデザインで更新しました

Commitのご紹介：美しい新しい変更ログテンプレート

Tailwind CSS、Next.js、MDX、そしてMotion Oneを少し加えた、美しい新しい変更ログテンプレートCommitをリリースしました。

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

まったく新しいマーケティングページ例と多数のコンポーネントの更新

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

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

• ランディングページカテゴリに4つの新しいデザインを追加しました
• 価格設定ページカテゴリに3つの新しいデザインを追加しました
• 新しい会社概要ページカテゴリに3つの新しいデザインを追加しました

また、美しい新しい価格設定セクション、推薦文、ロゴクラウド、チームセクション、統計など、新しいデザインを使用して、個々のマーケティングコンポーネントカテゴリをすべて更新しました。

• 価格設定セクションカテゴリを13個の新しいデザインで更新しました
• 推薦文カテゴリを9個の新しいデザインで更新しました
• ロゴクラウドカテゴリを12個の新しいデザインで更新しました
• 「コンテンツセクション」カテゴリに6つの新しいデザインを追加しました。
• 「バナー」カテゴリに13個の新しいデザインを追加しました。
• 「ブログセクション」カテゴリに7つの新しいデザインを追加しました。
• 「コンタクトセクション」カテゴリに8つの新しいデザインを追加しました。
• 「フライアウトメニュー」カテゴリに7つの新しいデザインを追加しました。
• 「ヘッダーセクション」カテゴリに10個の新しいデザインを追加しました。
• 「ヘッダー」カテゴリに12個の新しいデザインを追加しました。
• 「ニュースレターセクション」カテゴリに7つの新しいデザインを追加しました。
• 「統計情報」カテゴリに10個の新しいデザインを追加しました。
• 「チームセクション」カテゴリに9つの新しいデザインを追加しました。
• 「CTAセクション」カテゴリに2つの新しいデザインを追加しました。
• 「機能セクション」カテゴリに2つの新しいデザインを追加しました。
• 「フッター」カテゴリに1つの新しいデザインを追加しました。
• 「ヒーローセクション」カテゴリに2つの新しいデザインを追加しました。

新しいヒーローセクション、機能セクション、CTAなど

ここ数週間、Tailwind UI向けの新しいマーケティングコンポーネントを大量に開発しており、多くの新しいヒーローセクション、機能セクション、CTAなどを追加しました。

既存の例もいくつか見直し、改良を加えました。これらのコンポーネントの中には約3年前にリリースされたものもあり、その間にデザインスキルが向上したことを実感しました。

• 「ヒーローセクション」カテゴリのすべての例を更新し、10個の新しいデザインを追加しました。
• 「機能セクション」カテゴリのすべての例を更新し、10個の新しいデザインを追加しました。
• 「CTAセクション」カテゴリのすべての例を更新し、3個の新しいデザインを追加しました。
• 「FAQセクション」カテゴリのすべての例を更新し、3個の新しいデザインを追加しました。
• 「フッター」カテゴリのすべての例を更新しました。

新しいProtocolテンプレート

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

MDXを搭載したこのテンプレートは、細かい点まで注意深く設計されており、優れたAPIドキュメントの作成に集中できます。ツール周りの作業に煩わされることはありません。

新しいSpotlightテンプレート

本日、実際に公開したくなるほど優れたパーソナルウェブサイトである新しいSpotlightテンプレートのリリースを発表できることを大変嬉しく思います。

Tailwind CSSとNext.jsで構築されており、ブログ、プロジェクトページ、ダークモードなど、パーソナルウェブサイトをすぐに開始するために必要なものがすべて含まれています。そして、いつも通り、Tailwind CSSチームによって設計・構築されました。

新しいPocketテンプレート

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

Tailwind CSSとNext.jsで構築されたPocketは、Framer Motionライブラリによって駆動される多くの楽しいアニメーションとインタラクションが満載です。完全な体験のためにライブプレビューをご覧ください。

Tailwind UIテンプレート

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

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

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

追加事項

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

追加事項

• Application UIパッケージに5つの例を含む新しいコンボボックスカテゴリを追加しました。
• Application UIパッケージに9つの例を含む新しいコマンドパレットカテゴリを追加しました。

追加事項

• Application UIパッケージに8つの例を含む新しいカレンダーカテゴリを追加しました。

追加事項

• Application UIパッケージに5つの例を含む新しいテキストエリアカテゴリを追加しました。
• Application UIパッケージに9個の新しいラジオグループの例を追加しました。
• Application UIパッケージに1つの新しいステップの例を追加しました。
• マーケティングパッケージに1つの新しいFAQの例を追加しました。

Tailwind UI Eコマース

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

約6ヶ月間の開発期間を経て、2020年2月の最初のリリース以来、Tailwind UIの最初の全く新しいコンポーネントキットをリリースしました。

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

• Eコマースパッケージに5つの例を含む新しい製品概要カテゴリを追加しました。
• Eコマースパッケージに11個の例を含む新しい製品リストカテゴリを追加しました。
• Eコマースパッケージに6つの例を含む新しいカテゴリプレビューカテゴリを追加しました。
• Eコマースパッケージに6つの例を含む新しいショッピングカートカテゴリを追加しました。
• Eコマースパッケージに5つの例を含む新しいカテゴリフィルターカテゴリを追加しました。
• Eコマースパッケージに4つの例を含む新しい製品クイックビューカテゴリを追加しました。
• Eコマースパッケージに9つの例を含む新しい製品機能カテゴリを追加しました。
• Eコマースパッケージに5つの例を含む新しいストアナビゲーションカテゴリを追加しました。
• Eコマースパッケージに8つの例を含む新しいプロモーションセクションカテゴリを追加しました。
• Eコマースパッケージに5つの例を含む新しいチェックアウトフォームカテゴリを追加しました。
• Eコマースパッケージに4つの例を含む新しいレビューカテゴリを追加しました。
• Eコマースパッケージに4つの例を含む新しい注文概要カテゴリを追加しました。
• Eコマースパッケージに4つの例を含む新しい注文履歴カテゴリを追加しました。
• Eコマースパッケージに8つの例を含む新しいインセンティブカテゴリを追加しました。
• Eコマースパッケージに4つの例を含む新しいストアフロントページカテゴリを追加しました。
• Eコマースパッケージに5つの例を含む新しい商品ページカテゴリを追加しました。
• Eコマースパッケージに5つの例を含む新しいカテゴリページカテゴリを追加しました。
• Eコマースパッケージに3つの例を含む新しいショッピングカートページカテゴリを追加しました。
• Eコマースパッケージに5つの例を含む新しいチェックアウトページカテゴリを追加しました。
• Eコマースパッケージに3つの例を含む新しい注文詳細ページカテゴリを追加しました。
• Eコマースパッケージに5つの例を含む新しい注文履歴ページカテゴリを追加しました。

追加事項

• マーケティングパッケージに6つの例を含む新しい404ページカテゴリを追加しました。
• Application UIパッケージに6つの例を含む新しい空の状態カテゴリを追加しました。
• Application UIパッケージに6個の新しい入力グループの例を追加しました。
• Application UIパッケージに4つの例を含む新しいチェックボックスカテゴリを追加しました。

追加事項

• マーケティングパッケージに2個の新しい価格設定ページの例を追加しました。
• マーケティングパッケージに2個の新しい価格設定セクションの例を追加しました。
• マーケティングパッケージに2個の新しいFAQの例を追加しました。
• マーケティングパッケージに1つの新しい推薦文の例を追加しました。
• マーケティングパッケージに1つの新しいヘッダーの例を追加しました。

ReactとVueのサポート

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

それは長い道のりでしたが、この結果に非常に満足しており、Tailwind UIを全く新しいグループのTailwind CSSユーザーにとって便利なツールにすることができると確信しています。

• 機能的でアクセシビリティにも配慮 — Tailwind UIのReactおよびVueの例はすべて、Headless UI を使用して構築されています。Headless UIは、ARIA属性の管理、キーボード操作、フォーカス処理などをすべて処理するため、複雑な処理を`node_modules`フォルダに安全に格納し、お客様ご自身でコードを変更することなく、当社が改善やバグ修正を行うことができます。
• 完全にカスタマイズ可能 — Headless UIを使用することで、複雑なJS機能を抽象化しながらも、実際のマークアップに対する制御を維持しています。つまり、デザイン全体を完全に制御でき、従来どおりユーティリティクラスを追加または削除するだけで、任意の例を完全にカスタマイズできます。

これらはすべて、Tailwind UIのお客様向けの完全に無料のアップデートとして提供されています。アカウントにログインし、上記コンポーネントのドロップダウンでHTML、React、またはVueを選択して、希望の形式でコードを取得してください。

追加事項

• アプリケーションUIパッケージに新しい詳細画面の例を2つ追加
• アプリケーションUIパッケージに新しい設定画面の例を1つ追加
• アプリケーションUIパッケージに新しい複数列レイアウトの例を2つ追加
• アプリケーションUIパッケージに新しいページ見出しの例を2つ追加
• アプリケーションUIパッケージに新しいグリッドリストの例を1つ追加
• アプリケーションUIパッケージに新しいセレクトメニューの例を1つ追加
• アプリケーションUIパッケージに新しいタブの例を1つ追加
• アプリケーションUIパッケージに新しいスライドオーバーの例を1つ追加

追加事項

• マーケティングパッケージに新しいお問い合わせページを4つの例とともに追加
• マーケティングパッケージに新しいCTAセクションの例を1つ追加
• マーケティングパッケージに新しいヘッダーセクションの例を2つ追加
• マーケティングパッケージに新しいニュースレターセクションの例を2つ追加
• マーケティングパッケージに新しいお問い合わせセクションの例を2つ追加

追加事項

• アプリケーションUIパッケージに新しいホーム画面の例を1つ追加
• アプリケーションUIパッケージに新しい詳細画面の例を1つ追加
• アプリケーションUIパッケージに新しい複数列レイアウトの例を2つ追加
• アプリケーションUIパッケージに新しいセクション見出しの例を1つ追加
• アプリケーションUIパッケージに新しいカード見出しの例を1つ追加
• アプリケーションUIパッケージに新しいスタックリストの例を1つ追加
• アプリケーションUIパッケージに新しいタブの例を1つ追加
• アプリケーションUIパッケージに新しいナビゲーションバーの例を1つ追加

追加事項

• マーケティングパッケージに新しいランディングページの例カテゴリーを3つの例とともに追加
• マーケティングパッケージに新しい機能セクションの例を4つ追加
• マーケティングパッケージに新しいヒーローセクションの例を3つ追加
• マーケティングパッケージに新しいコンテンツセクションの例を1つ追加
• マーケティングパッケージに新しいニュースレターセクションの例を1つ追加
• マーケティングパッケージに新しい統計セクションの例を1つ追加
• マーケティングパッケージに新しい顧客の声の例を1つ追加

追加事項

• アプリケーションUIパッケージに新しいリストコンテナカテゴリーを7つの例とともに追加
• アプリケーションUIパッケージに新しい区切り線カテゴリーを8つの例とともに追加
• アプリケーションUIパッケージに新しいホーム画面の例を1つ追加
• アプリケーションUIパッケージに新しいスタックリストの例を2つ追加
• アプリケーションUIパッケージに新しいグリッドリストの例を1つ追加
• アプリケーションUIパッケージに新しいページ見出しの例を1つ追加
• アプリケーションUIパッケージに新しいスタックレイアウトアプリケーションシェルの例を1つ追加

追加事項

• アプリケーションUIパッケージに新しい詳細画面の例を3つの例とともに追加
• アプリケーションUIパッケージに新しい複数列レイアウトカテゴリーを3つの例とともに追加
• アプリケーションUIパッケージに新しいフィードカテゴリーを3つの例とともに追加
• アプリケーションUIパッケージに新しいメディアオブジェクトカテゴリーを8つの例とともに追加
• アプリケーションUIパッケージに新しいボタンの例を2つ追加
• アプリケーションUIパッケージに新しいグリッドリストの例を1つ追加
• アプリケーションUIパッケージに新しいページ見出しの例を2つ追加
• アプリケーションUIパッケージに新しいスタックリストの例を1つ追加

追加事項

• アプリケーションUIパッケージに新しい設定画面カテゴリーを4つの例とともに追加
• アプリケーションUIパッケージに新しいパンくずリストカテゴリーを4つの例とともに追加
• アプリケーションUIパッケージに新しいスタックレイアウトの例を1つ追加
• アプリケーションUIパッケージに新しい説明リストの例を1つ追加
• アプリケーションUIパッケージに新しいフォームレイアウトの例を1つ追加
• アプリケーションUIパッケージに新しいナビゲーションバーの例を2つ追加
• アプリケーションUIパッケージに新しいラジオグループカテゴリーを3つの例とともに追加
• アプリケーションUIパッケージに新しいサイドバーレイアウトの例を1つ追加
• アプリケーションUIパッケージに新しいトグルの例を2つ追加
• アプリケーションUIパッケージに新しいスタックリストの例を1つ追加

追加事項

• マーケティングパッケージに新しい価格設定ページカテゴリーを4つの例とともに追加
• マーケティングパッケージに新しいヘッダーセクションカテゴリーを3つの例とともに追加
• マーケティングパッケージに新しい価格設定セクションの例を4つ追加
• マーケティングパッケージに新しいCTAセクションの例を2つ追加
• マーケティングパッケージに新しいFAQセクションの例を3つ追加
• マーケティングパッケージに新しい機能セクションの例を3つ追加
• マーケティングパッケージに新しいフッターセクションの例を2つ追加
• マーケティングパッケージに新しいロゴクラウドの例を2つ追加

追加事項

• マーケティングパッケージに新しいチームセクションカテゴリーを8つの例とともに追加
• アプリケーションUIパッケージに新しいセクション見出しカテゴリーを9つの例とともに追加
• アプリケーションUIパッケージに新しいステップカテゴリーを7つの例とともに追加
• アプリケーションUIパッケージに新しいスライドオーバーの例を5つ追加

追加事項

• アプリケーションUIパッケージに最初の3つのホーム画面の例を追加

追加事項

• マーケティングパッケージに新しいコンテンツセクションカテゴリーを5つの例とともに追加
• アプリケーションUIパッケージに新しいサイドバーナビゲーションカテゴリーを8つの例とともに追加

追加事項

• アプリケーションUIパッケージに新しいグリッドリストカテゴリーを3つの例とともに追加
• マーケティングパッケージに新しいヒーローセクションの例を3つ追加

追加事項

• Application UIパッケージに新しいスライドオーバーカテゴリを追加しました (例6個)

追加事項

• Application UIパッケージに新しいセレクトメニューカテゴリを追加しました (例6個)

追加事項

• Marketingパッケージに新しいヘッダーカテゴリを追加しました (例4個)
• Marketingパッケージに新しいフライアウトメニューカテゴリを追加しました (例6個)

追加事項

• Application UIパッケージに新しいアラートカテゴリを追加しました (例6個)
• Marketingパッケージに新しいコンタクトセクションカテゴリを追加しました (例6個)
• ブランデッドナビゲーション付きコンパクトホワイトページヘッダースタックレイアウトのサイドバーにあるプロフィールセクションの上のボーダーカラーを修正しました (border-gray-700からborder-indigo-800に変更)

追加事項

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

アクセシビリティの改善

今週からアクセシビリティコンサルタントと協力し始め、アーリーアクセスコンポーネントを精査し、ベストプラクティスに従っていることを確認しています。

• トグル付きアクションパネルで、aria-labelledbyとaria-describedbyを使用してトグルをタイトル/説明にリンク付けました。
• スタックレイアウトのロゴ画像にalt属性を追加しました。
• スタックレイアウトのアイコンのみのボタンにaria-label属性を追加しました (例: ベルボタンのaria-label="通知")
• スタックレイアウトのアバタードロップダウンにメニューセマンティクスを追加しました。