ARIA属性を利用する

<div class="aria-checked:bg-sky-700">

デフォルトで使える修飾子

aria-busy
aria-checked
aria-disabled
aria-expanded
aria-hidden
aria-pressed
aria-readonly
aria-required
aria-selected

tailwind.configを編集することで追加できます。

module.exports = {
  theme: {
    extend: {
      aria: {
        asc: 'sort="ascending"',
        desc: 'sort="descending"',
      },
    },
  },
};

その場限りで使いたい場合は[]を利用して定義します。

area-[sort=ascending]:****

擬似クラスや擬似要素と同じように親や兄弟要素を起点にしてスタイルを適用させることもできます。

見やすいように改行しています

<th aria-sort="ascending" class="group">
  <svg
    className="
      group-aria-[sort=ascending]:rotate-0
      group-aria-[sort=descending]:rotate-180"
  >
  </svg>
</th>

データ属性を利用する

ARIA属性とは異なりdata-*は任意の値のみがサポートされています。

<div data-ui="checked" className="data-[ui=checked]:p-8">

tailwind.configを編集しショートカットを設定できます。

module.exports = {
  theme: {
    data: {
      checked: 'ui~="checked"',
    },
  },
};

data-ui="checked" は省略

- <div className="data-[ui=checked]:p-8">
+ <div className="data-checked:p-8">

RTLのサポート

テキストの方向を右からと左からで指定できます。

<div class="ltr:ml-3 rtl:mr-3">

注意点として方向を明示的に指定しない限りスタイルが有効になりません。
常にデフォルトの方向を指定する場合はHTMLタグにdir属性で指定できます。

左から右がデフォルトの場合

<html dir="ltr">

上記の設定は単一方向のみ対応するサイトには必要ありません。

要素が開いている状態`open`に基づくスタイル適用

<details>や<dialog>の要素が開いている状態に対してスタイルを適用させます。

<details className="open:bg-white">

任意のバリアントの利用

任意のバリアントとは、角括弧で囲まれたセレクターを表す書式文字列のこと。
下記の記述は3番目の子である場合にスタイルを適用させます。

<li className="[&:nth-child(3)]:underline">{item}</li>

&は変更されるセレクターを表します。
:hoverと組み合わせることも可能です！

<li className="lg:[&:nth-child(3)]:hover:underline">{item}</li>

セレクターにスペースが必要な場合はアンダースコアを利用します。
下記は、クラスを付与した要素内にあるpタグに対してスタイルを適用させます。

<div className="[&_p]:mt-4">

@mediaのような＠ルールも下記のように利用できます！

<div className="[@supports(display:grid)]:grid">

@ルールの後{}で通常のセレクターを組み合わせることも可能。

<div class="[@media(any-hover:hover){&:hover}]:opacity-100">

任意の修飾子を複数回利用するTailwindCSSのAPIを利用してプラグインを作ることもできます。

// tailwind.config.jsに記述します
let plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function ({ addVariant }) {
      addVariant('third', '&:nth-child(3)')
    })
  ]
}

// コンポーネントでの呼び出し
<div className="third:bg-blue-600">

独自のクラスを使う

独自でクラスを作ることも可能です。

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
}

<div class="content-auto">

スタックされた修飾子の順序

使用する順序によって実際に意味のある異なるCSSが生成されることに注意してください。

/* dark:group-hover:opacity-100 */
.dark .group:hover .dark\:group-hover\:opacity-100 {
  opacity: 1;
}

/* group-hover:dark:opacity-100 */
.group:hover .dark .group-hover\:dark\:opacity-100 {
  opacity: 1;
}