【Tailwind和訳】CORE CONCEPTS/Function & Directives
この記事について
この記事は、CORE CONCEPTS/Function & Directivesの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Functions & Directives
Tailwind がお客様の CSS に公開するカスタム関数やディレクティブのリファレンスです。
@tailwind
Tailwind のbase、components、utilities、screensスタイルを CSS に挿入するには、@tailwindディレクティブを使用します。
/**
* Tailwindのベーススタイルと、プラグインによって登録されたベーススタイルを注入します。
* プラグインで登録されたベーススタイルを注入します。
*/
@tailwind base;
/**
* Tailwindのコンポーネント・クラスと、プラグインによって登録されたコンポーネント・クラスを注入します。
* プラグインで登録されたコンポーネントクラスを注入します。
*/
@tailwind components;
/**
* これは、Tailwindのユーティリティ・クラスおよびプラグインによって登録されたユーティリティ・クラスを注入します。
* プラグインで登録されたユーティリティクラスを注入します。
*/
@tailwind utilities;
/**
* このディレクティブを使用して、Tailwindが各ユーティリティのレスポンシブ・バリエーションをどこに注入するかを制御します。
* 各ユーティリティのバリエーションを
*
* 省略された場合、Tailwindはこれらのクラスをデフォルトでスタイルシートの一番最後に追加します。
* 省略された場合、Tailwindはこれらのクラスをスタイルシートの最後に追加します。
*/
@tailwind screens;
@apply
既存のユーティリティークラスを独自のカスタム CSS にインライン化するには、@applyを使用します。
これは、HTML の中に共通のユーティリティーパターンがあり、それを新しいコンポーネントに抽出したい場合に便利です。
.btn {
@apply font-bold py-2 px-4 rounded;
}
.btn-blue {
@apply bg-blue-500 hover:bg-blue-700 text-white;
}
クラスは、@applyディレクティブの後にリストアップされた順番ではなく、オリジナルの CSS 内の位置に基づいて適用されることに注意してください。
これは、@applyでクラスのリストを抽出したときに得られる動作が、それらのクラスが HTML に直接リストされたときの動作と一致するようにするためです。
/* Input */
.btn {
@apply py-2 p-4;
}
/* Output */
.btn {
padding: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
クラスが適用される順番を細かく制御したい場合は、複数の@apply文を使用します。
/* Input */
.btn {
@apply py-2;
@apply p-4;
}
/* Output */
.btn {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding: 1rem;
}
また、@apply宣言と通常の CSS 宣言を混在させることも可能です。
/* Input */
.btn {
transform: translateY(-1px);
@apply bg-black;
}
/* Output */
.btn {
background-color: #000;
transform: translateY(-1px);
}
@applyでインライン化されたルールは、特異性の問題を避けるために、デフォルトで!importantが削除されます。
/* Input */
.foo {
color: blue !important;
}
.bar {
@apply foo;
}
/* Output */
.foo {
color: blue !important;
}
.bar {
color: blue;
}
既存のクラスを @apply して !important にしたい場合は、宣言の最後に !important を追加するだけです。
/* Input */
.btn {
@apply font-bold py-2 px-4 rounded !important;
}
/* Output */
.btn {
font-weight: 700 !important;
padding-top: .5rem !important;
padding-bottom: .5rem !important;
padding-right: 1rem !important;
padding-left: 1rem !important;
border-radius: .25rem !important;
}
なお、Sass/SCSS を使用している場合は、Sass の補間機能を使って動作させる必要があります。
.btn {
@apply font-bold py-2 px-4 rounded #{!important};
}
@layer
カスタムスタイルのセットがどの"bucket"に属するかを Tailwind に伝えるには、@layerディレクティブを使用します。
有効なレイヤーは、base、components、utilitiesです。
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
h1 {
@apply text-2xl;
}
h2 {
@apply text-xl;
}
}
@layer components {
.btn-blue {
@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
}
@layer utilities {
@variants hover, focus {
.filter-none {
filter: none;
}
.filter-grayscale {
filter: grayscale(100%);
}
}
}
Tailwind は、@layerディレクティブ内の CSS を、対応する@tailwindルールと同じ場所に自動的に移動させますので、特異性の問題を避けるために CSS を特定の順序で作成することを、それほど心配する必要はありません。
また、カスタム CSS を@layerディレクティブで囲むと、そのレイヤーをパージする際に、それらのスタイルをパージ対象として考慮するようになります。
詳しくは、本番環境への最適化についてのドキュメントをご覧ください。
@variants
responsive, hover, focus, active などのユーティリティの定義を @variants ディレクティブで囲むことで、独自のユーティリティの亜種を生成することができます。
@variants focus, hover {
.rotate-0 {
transform: rotate(0deg);
}
.rotate-90 {
transform: rotate(90deg);
}
}
これにより、以下のような CSS が生成されます。
.rotate-0 {
transform: rotate(0deg);
}
.rotate-90 {
transform: rotate(90deg);
}
.focus\:rotate-0:focus {
transform: rotate(0deg);
}
.focus\:rotate-90:focus {
transform: rotate(90deg);
}
.hover\:rotate-0:hover {
transform: rotate(0deg);
}
.hover\:rotate-90:hover {
transform: rotate(90deg);
}
注意すべき点は、バリアントは指定した順に生成されるということです。
例えば、フォーカスユーティリティーをホバーユーティリティーよりも優先させたい場合は、リストの中でフォーカスがホバーの後に来るようにします。
/* Input */
@variants hover, focus {
.banana {
color: yellow;
}
}
/* Output */
.banana {
color: yellow;
}
.hover\:banana:hover {
color: yellow;
}
.focus\:banana:focus {
color: yellow;
}
@variants アトリビュートは、設定ファイルの variants セクションでサポートされているすべての値と、プラグインで追加されたカスタムバリアントをサポートします。
@responsive
自分のクラスの定義を @responsive ディレクティブで囲むことで、そのクラスのレスポンシブバージョンを生成することができます。
@responsive {
.bg-gradient-brand {
background-image: linear-gradient(blue, green);
}
}
これは、@variants responsive { ... }と書き出すためのショートカットです。を書くためのショートカットですが、これも同様に機能します。
デフォルトのブレークポイントを使用すると、以下のようなクラスが生成されます。
.bg-gradient-brand {
background-image: linear-gradient(blue, green);
}
/* ... */
@media (min-width: 640px) {
.sm\:bg-gradient-brand {
background-image: linear-gradient(blue, green);
}
/* ... */
}
@media (min-width: 768px) {
.md\:bg-gradient-brand {
background-image: linear-gradient(blue, green);
}
/* ... */
}
@media (min-width: 1024px) {
.lg\:bg-gradient-brand {
background-image: linear-gradient(blue, green);
}
/* ... */
}
@media (min-width: 1280px) {
.xl\:bg-gradient-brand {
background-image: linear-gradient(blue, green);
}
/* ... */
}
レスポンシブバリアントは、スタイルシートの最後にある Tailwind の既存のメディアクエリに追加されます。
これにより、レスポンシブの接頭辞を持つクラスが、同じ CSS プロパティを対象としたレスポンシブではないクラスに常に勝てるようになります。
@screen
@screenディレクティブを使うと、ブレイクポイントの値を自分の CSS に重複して記述するのではなく、ブレイクポイントを名前で参照するメディアクエリを作成することができます。
例えば、640pxにsmのブレークポイントがあり、このブレークポイントを参照するカスタム CSS を書く必要があるとします。
下記のように値を複製した生のメディアクエリを書くのではなく
@media (min-width: 640px) {
/* ... */
}
... @screenディレクティブを使用して、ブレークポイントを名前で参照することができます。
@screen sm {
/* ... */
}
screen()
screen関数は、mdのようなスクリーンネームを受け取り、それに対応するメディア機能の表現を生成します。
/* Input */
@media screen(sm) {
/* ... */
}
/* Output */
@media (min-width: 640px) {
/* ... */
}
これは、Tailwind を他の CSS ツールと一緒に使っていて、@screenディレクティブをうまく扱えない場合に役立ちます。例えば、postcss-nesting は @screen を理解せず、@media を理解するので、screen() 関数と一緒に @media を使うと、より正しく動作します。
theme()
theme()関数を使って、Tailwind の設定値にドット記法でアクセスします。
これは、宣言の一部だけにテーマ設定の値を参照したい場合に、@applyの代わりとして便利です。
.content-area {
height: calc(100vh - theme('spacing.12'));
}
ドットを含む値（spacing scale の2.5のような値）にアクセスする必要がある場合は、角括弧記法を使用します。
.content-area {
height: calc(100vh - theme('spacing[2.5]'));
}
Tailwind では、デフォルトのカラーパレットを定義するために、ネストされたオブジェクト構文を使用しているため、ネストされたカラーにアクセスする際には、必ずドット表記を使用してください。
× ネストされた色値にアクセスする際にダッシュ構文を使用しない
.btn-blue {
background-color: theme('colors.blue-500');
}
○ ドット表記でネストした色値にアクセスする
.btn-blue {
background-color: theme('colors.blue.500');
}
Discussion