Tailwind Connect 2023 まとめ
先月の 20 日に Tailwind Labs がケンブリッジで Tailwind Connect 2023 というオフラインのカンファレンスを開催しました。ライブ配信もなく完全にクローズドなイベントだと思っていたのですが、開催から2週間ほど経って公式に YouTube でアーカイブ動画がアップロードされたので内容をまとめました。
発表された内容は主に以下の3つです。
- Tailwind CSS Oxide (Tailwind の次世代ツールチェイン)
- Catalyst (React 用 UI Kit)
- EventKit (Tailwind UI の新規テンプレート)
Tailwind CSS Oxide
Tailwind CSS (記事執筆時点2023年7月15日で v3.3) は、v3.4 から Tailwind CSS Oxide というツールチェインを提供します。Oxide は以下の2つに焦点を当てて開発されました。
- CSS のビルドパフォーマンスの改善
- プロジェクト設定ファイルの簡略化
ビルドパフォーマンスの改善
Oxide は Rust ベースのツールチェインです。Tailwind CSS v3.3 までは Node.js でビルドを実行していましたが、マルチスレッド・並列処理が難しくボトルネックになっていたと言います。内部的にはビルドの主な処理は同じく Rust 製 CSS 処理ツールである Lightning CSS を用いており、Oxide によってビルド全体のパフォーマンスは2倍強に改善が見られました。
設定ファイルの簡略化
現行の Tailwind CSS は JavaScript の設定ファイルが必要で、以下のような問題を抱えています。
-
import文が使いづらい - CSS のネストも使いづらい
- ブラウザ互換性のために autoprefixer 入れるのも面倒くさい
-
tailwind.config.jsで指定パスから漏れたファイルはスタイルが反映されない - デザイントークンの定義が CSS ファイルと
tailwind.config.jsに散らばる
Oxide では PostCSS と Tailwind CSS の JavaScript の設定はほぼ必要なくなり、CSS だけに集中できるようになります。
簡単な具体例として、ブログサイトのプロジェクトを例に挙げます。スタイリングしたいコンポーネントは下の <article> です。
<article class="typography">
<!-- ブログコンテンツ -->
<h1>Blog Title</h1>
<p>...</p>
</article>
今、エントリーポイントとなる app.css に、別途フォントの定義をした fonts.css と、記事のスタイルを定義した typography.css をインポートしたいです。typography.css には、typography クラスを持つ要素の各子孫タグにスタイルが当たるようネスト記法を用います。
@font-face {
font-family: "Inter";
/* ... */
}
.typography {
/* ... */
& h1 { /* ... */ }
& h2 { /* ... */ }
& pre { /* ... */ }
& p { /* ... */ }
}
また、Tailwind のプリセットカラーパレットとは別に必要な色を3つ追加します。このときメインのCSSファイルと各設定ファイルは以下のようになります。
/* 問題点1: import 文は順序など制約が強い */
/* https://tailwindcss.com/docs/using-with-preprocessors */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "./fonts" layer(base);
@import "./typography" layer(components);
module.exports = {
plugins: {
// 問題点1,2,3: import文・ネスト記法・ブラウザ互換性のため別途インストールが必要
"postcss-import": {},
"tailwindcss/nesting": {},
autoprefixer: {},
tailwindcss: {},
}
}
module.exports = {
// 問題点4: ここにパスを指定し忘れるとスタイルが反映されない
content: ["./src/**/*.{html,js}"],
theme: {
extend: {
// 問題点5: fonts.css や typography.css にスタイル定義したはずなのに、
// この JS ファイルにもスタイル定義があって散らばりすぎてる
colors: {
"neon-pink": "oklch(71.7% 0.25 360)",
"neon-lime": "oklch(91.5% 0.258 129)",
"neon-cyan": "oklch(91.3% 0.139 195.8)",
},
fontFamily: {
sans: ["Inter", "sans-serif"],
display: ["Satoshi", "sans-serif"]
}
}
},
plugins: []
}
Oxide ではこれらの問題が以下のように解決されます。まず、import 関連は @import tailwindcss 1行で済み、色やフォントファミリーの指定は全てCSSファイルに移行します。
- @import "tailwindcss/base";
- @import "tailwindcss/components";
- @import "tailwindcss/utilities";
+ @import "tailwindcss"; /* これだけで OK */
@import "./fonts" layer(base);
@import "./typography" layer(components);
/* カスタムのデザイントークンは全てCSSファイルに定義 */
+ :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";
+}
同時にCSS記法やブラウザ互換性、パスの指定は Oxide が全て解決し、PostCSS と Tailwind CSS の設定ファイルの項目は大幅に削減されます。
module.exports = {
plugins: {
tailwindcss: {},
}
}
module.exports = {
theme: {
extend: {}
},
plugins: []
}
こんな感じで煩わしいJSファイルの設定から解放され、CSSに主役が戻って来ました。
Catalyst
Catalyst は React 製の UI Kit です。コンポーネントライブラリではなく UI Kit と呼んでいるのは、npm からインストールして MUI (旧 Material UI) のような使い方をするライブラリではなく、ユーザーが自由に Tailwind でスタイルをカスタムできるビルディングブロックのようなものだからだそうです。イメージとしては Radix UI + Tailwind で似たような機能を提供する shadcn/ui とほぼ同等のものだと思います。
ちなみに Catalyst はヘッドレスコンポーネントとして Radix UI ではなく React Aria Components を、アニメーションに Framer Motion を使用しています。
npm モジュールではないので未だインストール方法は不明ですが、shadcn/ui のようにインストール CLI が用意されることを期待しています。
↑ <root>/components に Catalyst のコンポーネント群が定義されている
EventKit
Tailwind UI に新しく Catalyst を利用した SaaS の例として EventKit テンプレートが追加されます。
Discussion