この一週間は、取り組んできた多くのプロジェクトを 마무리するのに忙しかったですが、すべてがようやく完了したので、改めてアップデートをお知らせするのに良いタイミングだと感じています。
前回の投稿から、さらに226件のGitHub issueとpull requestをトリアージして解決しました。そして、組織全体で未解決のissue/PRが初めて50件を下回りました。どうかバグを見つけるのはもうやめてください。しばらくの間、Tailwind CSSを使って美しいものをデザインして構築したいだけなんです。
美しいものと言えば、ここ数週間でリリースされたものは以下の通りです！
スポットライト：新しい個人ウェブサイト
先日、Tailwind UIのためにデザインした、素晴らしい新しい個人ウェブサイトテンプレートSpotlightをリリースしました。
他のテンプレートと同様に、Next.jsで構築されており、今回はブログセクションのようなマークダウン駆動のコンテンツをすべてMDXで動かしています。
このテンプレートのデザインは、非常に楽しくて興味深い挑戦でした。本当に美しく、感動的でありながら、ほとんど誰にでも合うように、十分にニュートラルなものを作りたかったのです。そして、回転させた画像、リンクの色のヒント、トップナビゲーションなどの影やレイヤーによる繊細な奥行きなど、ちょっとした工夫で個性を出す、かなりミニマルなデザインに落ち着きました。
いつも通り、全体像を把握するためにライブプレビューをチェックすることをお勧めします。特に、ホームページでスクロールしたときのavatarとナビゲーションの動作に注目してください。実際のサイトで触ってみると、まさにchef's kiss（最高）です。
私たち自身の個人サイトを構築するのと同じようにサイトを構成しようとしたので、専用のブログ、あなたが取り組んだお気に入りのプロジェクトをリストアップするページ、あなたが講演した会議の講演などのリンクを貼るエリア、そしてお気に入りのツールやギアをすべてリストアップする"uses"ページが含まれています。
Tailwind UI all-accessライセンスをお持ちであれば、このテンプレートにすでにアクセスできます！もしお持ちでない場合は、ぜひご検討ください。Tailwind CSS、Headless UI、Heroiconsのようなオープンソースプロジェクトでの私たちの活動をサポートする最良の方法です。
Heroicons v2.0
昨年、Heroicons v1.0をリリースしました。そして先週、Steveが約1年間取り組んできた、完全に新しいアイコンセットであるHeroicons v2.0をリリースしました。
3つの異なるスタイルで描かれた280個のアイコンが含まれています。
- Outline — 1.5pxのストロークで描かれたラインアイコン、24pxのビューボックスで描画。
- Solid — 塗りつぶされた図形のソリッドアイコン、24pxのビューボックスで描画。
- Mini — 塗りつぶされた図形のソリッドアイコン、20pxのビューボックスで描画。
v1からの最大の変更点は、アウトラインセットがより細いストロークを使用していることです。これにより、最近のトレンドであるモダンでファッショナブルな印象になり、視覚的にもアイコンのスタイルが少し遊び心のあるものになっています。
これらは名前に「v2」と付いていますが、Heroicons v2はOpenSSL 2よりもターミネーター2のように考える方が良いでしょう。私たちはこれらが最高の作品だと感じていますが、これは新しいアイコンセットであり、厳密には元のアイコンセットからのアップグレードではありません。実際のアプリケーションの依存関係のように既存のプロジェクトをアップグレードするようにプレッシャーを感じる必要はありませんが、移行したい場合は、切り替えに必要なすべての情報についてリリースノートを確認してください。
すべての新しいアイコンを探索するには、新しいセットと共に公開した、完全にリニューアルされたHeroiconsウェブサイトをご覧ください。
Headless UI v1.7
今週初め、ReactとVueの非スタイルUIコンポーネントライブラリであるHeadless UIの新しいリリースをタグ付けしました。
Headless UI v1.7には、通常のバグ修正と改善に加えて、いくつかの非常に便利な新機能が含まれています！
オブジェクト比較を制御するための「by」プロパティを追加
フォーム値としてオブジェクトをバインドする手間を大幅に軽減する、新しいbyプロパティをListbox、Combobox、およびRadioGroupコンポーネントに追加しました。
import { Listbox } from "@headlessui/react";const departments = [ { id: 1, name: "Marketing", contact: "Durward Reynolds" }, { id: 2, name: "HR", contact: "Kenton Towne" }, { id: 3, name: "Sales", contact: "Therese Wunsch" }, { id: 4, name: "Finance", contact: "Benedict Kessler" }, { id: 5, name: "Customer service", contact: "Katelyn Rohan" },];function DepartmentPicker({ selectedDepartment, onChange }) { return ( <Listbox value={selectedDepartment} by="id" onChange={onChange}> <Listbox.Button>{selectedDepartment.name}</Listbox.Button> <Listbox.Options> {departments.map((department) => ( <Listbox.Option key={department.id} value={department}> {department.name} </Listbox.Option> ))} </Listbox.Options> </Listbox> );}これにより、値をコンポーネントの外部から取得することがはるかに簡単になり、必要なときに完全なオブジェクトを見つけるために、idなどをバインドして自分で多くのルックアップを行う必要がなくなります。
詳細については、各コンポーネントの更新された「オブジェクトを値としてバインドする」ドキュメントをご覧ください。
フォームコントロールを非制御コンポーネントとして使用
Listbox、Combobox、およびRadioGroupコンポーネントで、valueの代わりにオプションでdefaultValueを渡せるようになり、これらを非制御コンポーネントとして使用できるようになりました。
import { Listbox } from "@headlessui/react";const people = [ { id: 1, name: "Durward Reynolds" }, { id: 2, name: "Kenton Towne" }, { id: 3, name: "Therese Wunsch" }, { id: 4, name: "Benedict Kessler" }, { id: 5, name: "Katelyn Rohan" },];function Example() { return ( <form action="/projects/1/assignee" method="post"> <Listbox name="assignee" defaultValue={people[0]}> <Listbox.Button>{({ value }) => value.name}</Listbox.Button> <Listbox.Options> {people.map((person) => ( <Listbox.Option key={person.id} value={person}> {person.name} </Listbox.Option> ))} </Listbox.Options> </Listbox> <button>Submit</button> </form> );}これは、Reactの状態を使用して追跡する代わりにFormDataを使用して状態を収集する、従来のHTMLフォームまたはフォームAPIを使用する場合にコードを簡素化できます。
その他の例については、各コンポーネントの「非制御コンポーネントとして使用する」ドキュメントをご覧ください。
CSSのみの状態スタイリングのためのデータ属性
従来、Headless UIコンポーネントのさまざまな状態をスタイルするには、レンダープロパティを介して渡された引数を調べて、意味のあるクラスまたはコンテンツを条件付きでレンダリングする必要がありました。これは、背景色を調整したり、他のCSSのみの変更を加えようとする場合に、多くのボイラープレートのように感じられる可能性があります。
Headless UI v1.7では、現在の状態に関する情報を含むdata-headlessui-state属性をレンダリングされたHTMLに追加しました。これにより、CSSのみでターゲットにすることができます。
また、これらの状態のバリアントを提供する新しい@headlessui/tailwindcssプラグインをリリースしました。これにより、Tailwind CSSクラスのみで非常に簡単にスタイルを設定できます。
<Listbox.Option key={person.id} value={person} className="ui-active:bg-blue-500 ui-active:text-white ui-not-active:bg-white ui-not-active:text-black"> <CheckIcon className="ui-selected:block hidden" /> {person.name}</Listbox.Option>詳細については、データ属性を使用したスタイリングに関する新しいドキュメントをご覧ください。
Tailwind PlayでのInsidersサポート
ご存知ない方もいるかもしれませんが、新しいコミットがリポジトリにプッシュされるたびに自動的にビルドおよびデプロイされるTailwind CSSのinsidersビルドをnpmに公開しています。これにより、正式なリリースでタグ付けされる前に、新機能と修正を非常に簡単にテストできます。
そして今回、Tailwind Playにもinsidersビルドへのアクセスを含めるようにしました。これにより、プロジェクトをセットアップしなくても、最先端の機能を試すことができます。
Playでは最新のinsidersビルドのみを保持しているため、insidersビルドを使用してデモを作成する場合は、次のinsidersビルドで未使用の機能が変更された場合に破損する可能性があることを知っておいてください。いずれにせよ、重要なものをそこに置くべきではありません。プロフェッショナルになりましょう。
Tailwind CSS + Phoenix v1.7
少し前に、Phoenixチームが将来のリリースでTailwind CSSをデフォルトで搭載したいと考えているため、彼らと話し合いを始めました。これは非常にエキサイティングだと思い、彼らと協力して、箱から出してすぐに使えるエクスペリエンスを本当に美しいものにしたいと思いました。
Phoenix v1.7の一部として出荷される、新しいスプラッシュスクリーンとジェネレーターシステムに必要なすべてのスキャフォールディングを設計しました。
Phoenixの作成者であるChris McCordが先週、彼らが出荷しているすべてのTailwind CSSについて説明する素晴らしい講演を行いました。さらに詳しく知りたい場合は、一見の価値があります。
ということで、ここ数週間で取り組んできた最もクールなものは以上です！
今後1ヶ月程度で、私たちが設計してきた新しいTailwind UIコンポーネントをたくさん構築したり、Tailwind CSSの新機能のアイデアをいくつか探求したり、Tailwind + Next.jsでアプリケーションスターターキットテンプレートのようなものを作成することがどのようなものになるかのR&Dを開始したりすることに興奮しています。うまくやれば、かなりクールになると思います。
次回のアップデートでお会いしましょう！