TailwindCSSではarea-*やdata-*やopenなどの属性をもとにスタイルを付与する方法があります。
覚えておくことで複雑なスタイリングも可能になるのでドキュメントの方も一読してみてください！
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"',
},
},
};
- <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;
}