先月、私の故郷であるオンタリオ州ケンブリッジに200人以上が集まり、交流したり、仕事の話をしたり、私たちが取り組んできた新しいものの一部を垣間見たりしました。
Tailwind Connectは、チームが街にいる間にちょっとした地元のミートアップを開こうというアイデアから始まりましたが、当然のことながら、巨大なホールを借り、4人のビデオ撮影クルーを雇い、私の結婚式を恥じ入らせるほどのケータリング費用を積み上げるまでに膨れ上がりました。
しかし、制作に少し夢中になってしまったとはいえ、本格的なカンファレンスというよりも、ミートアップのような雰囲気になるように本当に努力しました。イベントは夕方に開催し、プレゼンテーションは1つに絞り、ピザとビールを片手に人々が交流し、つながる時間をできるだけ多く確保しました。
当初は「仕事帰りに車で行ける」地元中心のイベントを想定していましたが、参加者のほぼ半数が飛行機で сюда に来ました。そこで、遠方から来た人が最大限に時間を活用できるように、イベント用のDiscordサーバーを設置し、遠方から来た人同士が計画を立てられるようにしました。また、イベント会場の隣にあるFoundry Tavernのパティオを午後に貸し切り、人々が早めに集まって新しい友人を作るきっかけを作りました。
午後5時30分頃に開場し、1時間のオープニングレセプションで夜の幕開けを飾りました。人々はそこで交流したり、話したり、カナッペを楽しんだりしていました。
私が本当にうまくできたと思ったのはバッジです。チケットを購入すると、基本的なマークダウンフィールドが提供され、そこで人々が興味深い会話を始めるのに役立つような自己紹介を自由に書くことができました。
私は夜通しみんなのバッジを見ていましたが、すぐに打ち解けて話のきっかけを作るのに最適な方法でした。
午後6時30分頃、全員が席に着き、基調講演が始まりました。私はまず、Tailwind CSSがプロジェクトとしてどのように始まり、今日に至るまでの経緯について少しお話ししました。
6年前は、プロジェクトごとにコピー＆ペーストしていた数枚のスタイルシートにすぎませんでした。今日では、毎月2500万回以上ダウンロードされ、何百万人もの開発者に利用されており、世界最大の企業のいくつかが世界最大のウェブサイトを構築するために使用しています。コミュニティの多くの人々と一緒に、ここまで来られたことを直接祝う機会を得られたことは、私にとって本当に特別なことでした。
その後、Sam Selikoffが、CSSの最もクールな新機能をいくつか紹介する素晴らしいデモを披露しました。彼は、Tailwind CSSとユーティリティファーストのワークフローを使用して、アクセントカラー、流体タイポグラフィ、見出しのバランス調整、コンテナクエリ、さらには masonry grid のようなものをデモしました。
サムは素晴らしい友人です。イベントに来て基調講演に参加してほしいと頼みましたが、彼に何を頼むかについては全く計画がありませんでした。彼は到着後約36時間でプレゼンテーション全体をまとめ、完璧にやり遂げました。スライドなし、すべてライブコーディングで、プロのようにやり遂げました。彼のYouTubeチャンネルとトレーニングサイトBuild UIを強くお勧めします。彼は素晴らしい先生です。
次に、私はTailwind CSSエンジンの次なる進化であるOxideのプレビューを紹介しました。
Oxideは多くの異なる要素から構成されていますが、それらはすべて2つの目標に集約されます。それは、パフォーマンスの向上と、開発者エクスペリエンスの簡素化です。
私たちは、Lightning CSSを統合することで、TailwindをよりオールインワンのCSS処理ツールにしようとしています。つまり、次期バージョンのTailwindでは、他のCSSファイルのインポート、ネスト、ベンダープレフィックス、および将来のCSS機能の構文変換などが、autoprefixerやpostcss-importのような追加のツールをインストールまたは設定する必要なく、そのまま機能するようになります。
Lightning CSSはRustで記述されており、非常に高速です。私たちもRustに少しずつ手を出し始めており、テンプレートファイル全体をスキャンしてクラス名を検出するなどの最も重要なパスの一部をRustで書き換えています。
これらの改善により、実際のプロジェクトでビルド時間が50%以上短縮され、最大のプロジェクトでも本番環境でのビルド時間が約150msに短縮される見込みです。
Oxideは、構成エクスペリエンスの簡素化ももたらします。テンプレートファイルへのパスをすべて構成する必要がなくなるように、自動コンテンツ検出を追加しており、CSSファイルの先頭にシンプルな@import "tailwindcss"呼び出しを追加するだけで、Tailwindを独自のCSSに簡単に追加できるようにします。@tailwindディレクティブをすべて使用する必要がなくなります。
また、JavaScriptではなくCSSファイル内でTailwind CSSを構成するというアイデアの非常に初期の段階のプレビューも共有しました。CSSベースの構成、自動コンテンツ検出、および簡素化されたインポートストーリーにより、カスタムカラーとフォントでTailwindを構成することは、将来的にはこれほどシンプルになる可能性があります。
@import "tailwindcss";@import "./fonts" layer(base);:theme { --colors-neon-pink: oklch(71.7% 0.25 360); --colors-neon-lime: oklch(91.5% 0.258 129); --colors-neon-cyan: oklch(91.3% 0.139 195.8); --font-family-sans: "Inter", sans-serif; --font-family-display: "Satoshi", sans-serif;}私たちは、これらのすべてを破壊的な変更なしに導入する予定であり、これらの改善の多く（Lightning CSSの統合やRustベースのテンプレートパーサーなど）は、今後数か月以内にTailwind CSS v3.4で利用可能になる予定です。
リリース時期が近づいたら、これらについてさらに詳しく書くつもりですが、それまでにもっと詳しく知りたい場合は、基調講演をご覧ください。
基調講演の締めくくりとして、昨年後半から取り組んでいる新しいReact UIキットであるCatalystのプレビューをお見せしました。
これは、現時点で2年前からロードマップに掲載されていたもので、最適なアプローチを何度も検討した結果、昨年10月にようやく着手しました。
Catalystは、考え抜かれたAPIを備えた、すぐに使えるコンポーネントシステムであり、独自のアプリケーションを構築するために必要な基本的な構成要素がすべて含まれています。ボタン、フォームコントロール、ダイアログ、スライドオーバー、テーブル、ドロップダウンなどがあります。
Catalystと既存のアプリケーションUIコンポーネントの例との最大の違いは、Catalystのコンポーネントはすべて、分離されたコピー＆ペーストのコードスニペットではなく、実際のプロジェクトのように結び付けられていることです。
しかし、サイトテンプレートと同様に、Catalystのコードはあなたのものです。何かを調整したい場合は、ファイルを開いて調整するだけです。npm経由でインストールするライブラリではありません。
独自のコンポーネントシステムの出発点と考えてください。私たちから最新バージョンをダウンロードし、/componentsディレクトリの内容をプロジェクトにコピーして、構築を開始します。
何か変更する必要がある場合は、変更してください。
独自の新しいコンポーネントを作成したい場合は、作成してください。
重要なのは、半年後にはコードベースがあなたのものだと感じられ、そもそもCatalystで始めたことをほとんど忘れてしまうことです。
プロジェクトを紹介し、少しツアーした後、私はSteve Schogerにバトンタッチしました。彼は、Catalystを非常に洗練されたデザインシステムのように感じさせるために費やされたすべての小さなデザインの詳細について素晴らしい説明をしてくれました。
最後に、私は、Framer Motionを使用したレスポンシブトランジションをCSS変数とTailwindの任意プロパティ機能を使用して実装する方法など、これらのデザインの詳細の一部を実装するために使用する必要があったいくつかの高度なTailwind CSSのトリックを紹介して締めくくりました。
Catalystはまだ開発中のため、鵜呑みにしないでください。うまくいけば、来月かそこらでTailwind UIのお客様と共有できる初期バージョンと詳細情報をお届けできるでしょう。
その後3時間は、イベントスペースで軽食を楽しみながら、参加するために сюда まで足を運んでくれたすべての人々と交流しました。
基調講演でも述べましたが、Tailwindファンが一堂に会するのはプロジェクト史上初めてのことであり、フレームワークを使用して多くの恩恵を受けてきた多くの人々にようやく会えたことは、私にとって本当に特別な経験でした。すべてがGitHubとTwitter上だけにある場合、私たちが行っている仕事の影響を過小評価しがちですが、実際の空間で現実の人々によってそれが具体化されているのを見ると、私は誇りで胸がいっぱいになりました。
これらのプロジェクトに取り組み、非常に多くの人々がウェブサイトの構築をより楽しめるように支援できることは、本当に光栄です。今後もこのようなイベントを開催できることを楽しみにしています。私にとって人生における大きなハイライトであることは間違いありません。
イベントのその他の写真についてはTailwind Connect 2023フォトギャラリーをご覧ください。また、会場に来られなかった場合は、YouTubeで基調講演をご覧ください。