2020年7月15日

Tailwind CSS v1.5.0

Adam Wathan

v1.5.0はもっと本当にエキサイティングな何かのために取っておきたかったのですが、新しい@tailwindcss/typographyプラグインをサポートするための新機能が必要になったので、ええい、新しいものを早めに公開することにしました。

破壊的な変更はありません。これはマイナーリリースであり、私たちはプロフェッショナルです、おバカさん。

新機能

Tailwind CSS v1.5.0まで、「ユーティリティ」クラスのみがvariants（「responsive」、「hover」、「focus」など）で使用されることを意図していました。

これらは他のどのタイプのクラスよりもユーティリティにとって依然としてはるかに有用ですが、コンポーネントクラスのバリアントも生成できるようになりました。新しい@tailwindcss/typographyプラグインのproseクラスなどです。

<article class="prose md:prose-lg">
  <!-- Content -->
</article>

この機能を独自のコンポーネントクラスで活用するには、addComponentsプラグインAPIの2番目の引数で新しいvariantsオプションを使用します。

plugin(function ({ addComponents })) {
  addComponents({
    '.card': {
      // ...
    }
  }, {
    variants: ['responsive']
  })
})

...または、addUtilities APIでおなじみの配列の省略形を使用します。

plugin(function ({ addComponents })) {
  addComponents({
    '.card': {
      // ...
    }
  }, ['responsive'])
})

（プラグインAPIを使用するのではなく）カスタムCSSでこれらの機能を活用するには、新しい@layerディレクティブを使用して、スタイルが「components」バケットに属することをTailwindに明示的に指示できます。

@layer components {
  @responsive {
    .card {
      /* ... */
    }
  }
}

これにより、Tailwindが未使用のCSSを正しくパージし、デフォルトの「conservative」パージモードを使用しているときに、レスポンシブコンポーネントのバリアントが削除されないようにします。

新しいコンポーネントのvariantsサポートに乗じて、containerクラスがバリアントをサポートするようになりました！

<!-- Only lock the width at `md` sizes and above -->
<div class="md:container">
  <!-- ... -->
</div>

レスポンシブバリアントはデフォルトで有効になっていますが、頭がおかしい場合は、focus、group-hoverなどの他のバリアントを手動で有効にすることもできます。

module.exports = {
  // ...
  variants: {
    container: ["responsive", "focus", "group-hover"],
  },
};

新しいfocus-visibleバリアントを使用して、:focus-visible疑似クラスのサポートを追加しました。

これは、キーボードユーザーにのみ表示され、マウスユーザーには無視されるフォーカススタイルを追加するのに非常に役立ちます。

<button class="focus-visible:shadow-outline focus-visible:outline-none ...">Click me</button>

デフォルトでは何も有効になっていませんが、configファイルのvariantsセクションで有効にできます。

module.exports = {
  // ...
  variants: {
    backgroundColor: ["responsive", "hover", "focus", "focus-visible"],
  },
};

ブラウザのサポートはまだ弱いですが、改善されています。それまでの間、すぐにすべてのブラウザで使用したい場合は、polyfillと対応するPostCSSプラグインをチェックしてみてください。

チェックボックスやラジオボタンのようなものを条件付きでスタイルするために使用できる新しいcheckedバリアントを追加しました。

<input type="checkbox" class="bg-white checked:bg-blue-500" />

デフォルトでは何も有効になっていませんが、configファイルのvariantsセクションで有効にできます。

module.exports = {
  // ...
  variants: {
    backgroundColor: ["responsive", "hover", "focus", "checked"],
  },
};

この投稿について話しませんか？ GitHubでディスカッションする →