Tailwind CSS v3.3：拡張されたカラーパレット、ESM/TSサポート、論理プロパティなど

Tailwind CSS v3.3が登場 — これまで要望が多かった新機能と、あなたが欲しいとさえ思っていなかった新機能を多数搭載。

• より暗い色合いのための拡張カラーパレット：すべての色に新しい950シェードを追加。
• ESMとTypeScriptのサポート：ESMまたはTypeScriptを使用して設定ファイルを作成。
• 論理プロパティによるRTLサポートの簡素化：htmlの方向に対応するレイアウトを構築。
• グラデーションカラーストップ位置の微調整：各カラーストップの配置場所を正確に指定。
• Line-clampを標準搭載：プラグインなしで複数行のテキストを切り詰め。
• 新しい行の高さモディファイア：フォントサイズと行の高さを1つのクラスで設定。
• `var()`なしのCSS変数：任意の値を指定するための新しい短縮構文。
• 設定可能なfont-variation-settings：font-*ユーティリティに直接組み込み。
• 新しいlist-style-imageユーティリティ：箇条書きにひどいクリップアートを使用できるように。
• 新しいhyphensユーティリティ：ハイフネーションの動作を微調整するため。
• 新しいcaption-sideユーティリティ：スタイル付きでテーブルにタイトルを付ける。

これで最もエキサイティングな内容は網羅しましたが、前回のリリースからのすべての小さな改善点の詳細なリストについては、リリースノートをご覧ください。

プロジェクトのアップグレードは、npmからtailwindcssの最新バージョンをインストールするのと同じくらい簡単です

npm install -D tailwindcss@latest

ブラウザ上で直接、Tailwind Playですべての新機能を試すこともできます。

より暗い色合いのための拡張カラーパレット

長年にわたって最も多かった機能リクエストの1つは、すべての色に暗い色合いを追加することでした — 通常、ダークUIを構築していて、スペクトルの暗い端により多くのオプションが必要なためです。

よし、願いは叶えられた — Tailwind CSS v3.3では、すべての単色に新しい950シェードを追加しました。

グレーでは、基本的に色付きの黒として機能し、超ダークUIに最適です

そして、カラースペクトルの残りの部分では、高コントラストテキストと色付きのコントロール背景のために950を最適化しました

信じられないかもしれませんが、このプロジェクトで最も難しかったのは、色ごとに11シェードを持つことを受け入れるように自分たちを説得することでした。カラーパレットのドキュメントでそれを見栄え良くするのが悪夢でした。

また、かつてできた「50 shades of gray」ジョークに献杯。

ESMとTypeScriptのサポート

これで、ESMまたはTypeScriptでTailwind CSSを設定できます

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
};

npx tailwindcss initを実行すると、プロジェクトがESモジュールであるかどうかが検出され、適切な構文で設定ファイルが自動的に生成されます。

--esmフラグを使用すると、ESM設定ファイルを明示的に生成することもできます

npx tailwindcss init --esm

TypeScript設定ファイルを生成するには、--tsフラグを使用します

npx tailwindcss init --ts

多くの人は、自分自身のコードをすでにESMで記述しているため（ビルドツールによってトランスパイルされている場合でも）、これは簡単だと考えていますが、実際には非常にトリッキーです — 設定ファイルをその場でトランスパイルする必要があります。

TypeScriptの場合を考えると、これがなぜ起こる必要があるのか​​を理解するのが少し簡単になります。もちろん、TailwindはJavaScriptとして配布されており、コンパイルされていないTypeScriptファイルを魔法のようにインポートすることはできません。

これは、素晴らしいjitiライブラリを内部で使用し、Sucraseを使用して、インストールフットプリントを小さく保ちながら最高のパフォーマンスでコードをトランスパイルすることで処理しています。

論理プロパティによるRTLサポートの簡素化

しばらくの間、LTRおよびRTLバリアントを使用して多方向Webサイトをスタイル設定できるようにしてきましたが、論理プロパティを使用すると、このスタイル設定のほとんどをより簡単かつ自動的に行うことができます。

ms-3やme-3などの新しいユーティリティを使用すると、要素の*開始*と*終了*をスタイル設定して、ltr:ml-3 rtl:mr-3のようなコードを作成する代わりに、スタイルがRTLで自動的に適応するようにすることができます

左から右

Tom Cook

運営責任者

右から左

تامر كرم

الرئيس التنفيذي

<div class="group flex items-center">
  <img class="h-12 w-12 shrink-0 rounded-full" src="..." alt="" />
  <div class="ltr:ml-3 rtl:mr-3">
    <div class="ms-3">
      <p
        class="text-sm font-medium text-slate-700 group-hover:text-slate-900"
        dark-class="text-sm font-medium text-slate-300 group-hover:text-white"
      >
        ...
      </p>
      <p
        class="text-sm font-medium text-slate-500 group-hover:text-slate-700"
        dark-class="text-sm font-medium text-slate-500 group-hover:text-slate-300"
      >
        ...
      </p>
    </div>
  </div>
</div>

inset、margin、padding、border-radius、scroll-margin、およびscroll-padding用の新しい論理プロパティユーティリティを追加しました。

これが、追加したすべての新しいユーティリティと、それらがマッピングされるものの完全なリストです

これらは、LTR言語とRTL言語の両方をサポートする必要があるサイトを定期的に構築する場合に、大量のコードを節約するはずであり、より詳細な制御が必要な場合は、常にltrおよびrtlバリアントと組み合わせることができます。

グラデーションカラーストップ位置の微調整

グラデーションの各カラーストップの実際の位置を調整できる、from-5%、via-35%、to-85%などの新しいユーティリティを追加しました

<div class="bg-gradient-to-r from-indigo-500 from-10% via-purple-500 via-30% to-pink-500 to-90% ...">
  <!-- ... -->
</div>

0％から100％までのすべての値を5ステップ刻みで含めていますが、もちろん、任意の値を使用して、目的の効果を正確に得ることができます

<div class="bg-gradient-to-r from-cyan-400 from-[21.56%] ...">
  <!-- ... -->
</div>

詳細については、グラデーションカラーストップのドキュメントをご覧ください。

Line-clampを標準搭載

2年強前に公式line-clampプラグインをリリースしましたが、奇妙な非推奨の-webkit-*ものがたくさん使用されていますが、すべてのブラウザで動作し、永遠に動作するため、フレームワーク自体に組み込むことにしました。

2020年3月10日

コンバージョン率を向上させる

Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt。Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad。Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum。Labore enim duis nostrud eu。Est ut eiusmod consequat irure quis deserunt ex。Enim laboris dolor magna pariatur。Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim。

Lindsay Walton

<article>
  <div>
    <time datetime="2020-03-16" class="block text-sm/6 text-gray-600">Mar 10, 2020</time>
    <h2 class="mt-2 text-lg font-semibold text-gray-900">Boost your conversion rate</h2>
    >
    <p class="mt-4 line-clamp-3 text-sm/6 text-gray-600">
      Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut
      sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur
      fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis
      deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit
      consectetur enim.
    </p>
  </div>
  <div class="mt-4 flex gap-x-2.5 text-sm leading-6 font-semibold text-gray-900">
    <img src="..." class="h-6 w-6 flex-none rounded-full bg-gray-50" />
    Lindsay Walton
  </div>
</article>

したがって、v3.3にアップグレードすると、line-clampプラグインを使用していた場合は、安全に削除できます

module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/line-clamp') 
  ]
}

プラグインさん、さようなら。

まだ試したことがない場合は、新しいline-clampドキュメントをチェックして、その仕組みの詳細をご覧ください。

フォントサイズユーティリティの新しい行の高さ短縮形

Tailwindで美しいものを長年デザインしてきた中で気付いたことの1つは、フォントサイズを同時に設定せずに行の高さを設定することは*決して*ないということです。

そのため、カラー不透明度モディファイア構文に触発されて、1つのユーティリティでそれらを一緒に設定することで、数文字を節約できるようにすることにしました

<p class="text-lg leading-7 ...">
<p class="text-lg/7 ...">
  So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way
  past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living
  things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
</p>

行の高さスケールで定義された任意の値を使用することも、デザイントークンから逸脱する必要がある場合は任意の値を使用することもできます

<p class="text-sm/[17px] ..."></p>

さらにいくつかの例については、フォントサイズのドキュメントをご覧ください。

`var()`なしのCSS変数

入力数を減らすという精神で、CSS変数を任意の値として使用する場合に`var()`を省略できるようにしました

export function MyComponent({ company }) {
  return (
    <div
      style={{
        "--brand-color": company.brandColor,
        "--brand-hover-color": company.brandHoverColor,
      }}
      className="bg-[var(--brand-color)] hover:bg-[var(--brand-hover-color)]"
      className="bg-(--brand-color) hover:bg-(--brand-hover-color)"
    />
  );
}

ところで、データベースなどから取得したスタイルで`hover:`のようなものを使用する場合、これはかなりクールなトリックです。

カスタムフォントファミリーのfont-variation-settingsを設定する

カスタムフォントを使用する場合、フォントが提供する特定の調整をオプトインするために、font-feature-settingsやfont-variation-settingsなどを設定することがよくあります。

font-feature-settingsについてはしばらくの間簡単に行えるようにしてきましたが、設定ファイルのフォントリストの後に追加できるsort-of optionsオブジェクトで値を指定することで、font-variation-settingsでも同じことができます

module.exports = {
  theme: {
    fontFamily: {
      sans: [
        "Inter var, sans-serif"
        {
          fontFeatureSettings: '"cv11", "ss01"',
          fontVariationSettings: '"opsz" 32',
        },
      ],
    },
  },
};

上記の例では、見出しなどの大きいサイズに最適化されたフォントの「Display」バリエーションをトリガーするために、光学サイズ軸の使用をサポートするInterの最近のリリースを使用しています。

新しいlist-style-imageユーティリティ

リストアイテムマーカーとしてニンジンの写真を使用したかったことはありませんか？新しいlist-image-*ユーティリティを使用すれば、それが可能になります。

<ul class="list-image-[url(/carrot.png)] ...">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>

フレームワークに野菜のクリップアートを同梱するつもりはありませんが、任意の値を指定するか、テーマのlistStyleImageセクションで設定することで、任意の画像を使用できます。

詳細については、リストスタイルの画像ドキュメントをご覧ください。

新しいhyphensユーティリティ

­ HTMLエンティティを聞いたことがありますか？これらのhyphens-*ユーティリティのサポートを追加するまで、私も知りませんでした。

hyphens-manualと慎重に配置された­を使用すると、ブラウザに単語を複数行に分割する必要がある場合にハイフンを挿入する場所を指示できます

<p class="hyphens-manual ...">... Kraftfahrzeug&shy;haftpflichtversicherung is a ...</p>

あなたの解読不能なデスメタルバンドのプレスキットの一部として、このようなコードスニペットを含めると、ジャーナリストがあなたをシーンに最終的に登場させる記事でハイフネーションを台無しにしないようにするのに役立つかもしれません。

詳細については、ハイフンドキュメントをご覧ください。

新しいcaption-sideユーティリティ

私にとってまた新しいもの — <caption>要素！テーブルキャプションに新しいcaption-*ユーティリティを使用して、テーブルの上部または下部に表示するかどうかを制御できます。

<table>
  <caption class="caption-bottom">
    Table 3.1: Professional wrestlers and their signature moves.
  </caption>
  <thead>
    <tr>
      <th>Wrestler</th>
      <th>Signature Move(s)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>"Stone Cold" Steve Austin</td>
      <td>Stone Cold Stunner, Lou Thesz Press</td>
    </tr>
    <tr>
      <td>Bret "The Hitman" Hart</td>
      <td>The Sharpshooter</td>
    </tr>
    <tr>
      <td>Razor Ramon</td>
      <td>Razor's Edge, Fallaway Slam</td>
    </tr>
  </tbody>
</table>

その他の例については、キャプションサイドドキュメントをご覧ください。

というわけで、Tailwind CSS v3.3です！破壊的な変更はなく、楽しい新機能が満載です。npmで最新バージョンにアップデートして、今日のプロジェクトでお試しください

npm install -D tailwindcss@latest

ええ、また`text-shadow`ユーティリティなしのリリースです。クレイマーがガソリンを補給せずにどこまで運転できるか試そうとする、となりのサインフェルドのエピソードを覚えていますか？あれは私のお気に入りのエピソードです。