#Twind #Tailwind_CSS

Twind v1がリリースされました

Twind v0.16と比較すると、よりモジュラーな構成へと変わっているようです

公式でv0.16からのマイグレーションガイドが公開されています

Freshでも早速サポートが入っています (FreshにTwind v1サポートが入りました)

Twind v1のコア機能を提供するパッケージ

Twindの設定ファイルで、@twind/coreの defineConfig() を使って設定を定義することが想定されます

ここで定義した設定をアプリケーションのエントリポイントなどから読み込み、 install() に渡すことで設定を有効化できます

@twind/coreでは各種ユーティリティクラスは提供されません

ユーティリティクラスは各種Presetsやtwind.config.jsなどから提供されます

Presetsの役割はカスタムのrulesとvariantsを提供することです

Twind公式の@twind/preset-tailwindを導入することで、Tailwind CSS v3互換のユーティリティが使用できるようになります

その他にも、@twind/preset-autoprefix/@twind/preset-tailwind-forms/@twind/preset-typographyなどが公式から提供されています

クラス名からCSSの定義を生成します

ユーティリティが有効化される状況を指定します