【TailwindCSS】@applyと@layerを使用してカスタムCSSクラスを作る

CSS
管理人
管理人

こんにちは、さえと申します👩‍💻
フロントエンドエンジニアになるために 日々勉強をしています
このブログは その勉強の記録と アウトプットのために運営をしています✨

今回はtailwindCSSの@apply@layerの違いについてを調べました
また、それらを使用しカスタムCSSクラスの作成を行いました!


環境については下記のもりけん先生のブログを参考に進めています

【明日から使える!】tailwindCSSの使い方。初学者の為ハンズオン。viteで。 | 武骨日記
この「【明日から使える!】tailwindCSSの使い方。初学者の為ハンズオン。viteで。」記事はtailwindcssを今から触る方向けです。 つまり私もです。 index 1. tailwindCSSの思想。ユーティリティCSSに至る考えが分かる資料 2. tailwindCSSを使うためにvite環境を構築 3...

環境

vite 3.0.0
tailwindcss 3.1.6

@layer

@layer内で定義したカスタムスタイルがどのレイヤーに属するかを指定することができる。
定義したカスタムスタイルは対象のレイヤーへ自動的に移動する

例えば以下のようにすることで、hogeクラスはcomponentsに属することになる

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .hoge {
    background-color: skyblue;
  }
}
Functions & Directives - Tailwind CSS
A reference for the custom functions and directives Tailwind exposes to your CSS.

デフォルトのレイヤーの役割

@tailwind base; // リセットCSS的な存在。デフォルトのスタイル調整
@tailwind components; // クラスベースのスタイル用
@tailwind utilities;  // 最優先されるユーティリティクラス

使用例

2つのクラスを付与する場合、後に定義したもののスタイルが優先され実装される

例えば、下記のようにstyle.cssでカスタムクラスをそれぞれのレイヤーの一番下に定義した場合

@tailwind base;
@tailwind components;
@tailwind utilities;

// here
.text {
  background-color: skyblue;
}

index.htmlに先ほど作成したクラスと、デフォルトで定義されているクラスを付与する

<p class="text bg-pink-200">テスト</p>

結果はカスタムクラスが優先され、bg-pink-200 は適応されていない

理由は@tailwind utilitiesの後にtextクラスが定義されているため

@layerでどこに属するかを指定し、その中で定義することで解決する

@layer components {
  .text {
    background-color: skyblue;
  }
}

また、以下のように@tailwind utilities の前に定義することで解決することもできる

@tailwind base;
@tailwind components;
.text {
  background-color: skyblue;
}
@tailwind utilities;

例の通り、@layerを使用することで定義順を気にする必要がなくなる点もメリットと言えそう。

ドキュメントを読むともう一つ特徴があって
@layer内で追加されたカスタムCSSは使用されない限り、最終的なビルドに含まれないと書いてあった。また、逆に@layerに含めず定義したカスタムCSSは使用の有無関係なく、最終的なビルドに含まれるそう。これも頭に入れとこう…

@apply

Use @apply to inline any existing utility classes into your own custom CSS.

既存のユーティリティクラスを独自のカスタム CSS にインライン化するには、@apply を使用します。

https://tailwindcss.com/docs/functions-and-directives#apply

使用例

.text {
  @apply bg-yellow-200;
}

theme

theme関数を使用して指定することもできる

.text {
  background-color: theme(colors.yellow.200);
}
Functions & Directives - Tailwind CSS
A reference for the custom functions and directives Tailwind exposes to your CSS.

参考記事

Organize your CSS in the Tailwind style with @layer directive — kinopyo — Bloggie
Tailwind provides a @layer directive to help you better organize your CSS. This post is a detailed breakdown of the directive for my own learning purposes as...
Reusing Styles - Tailwind CSS
Managing duplication and creating reusable abstractions.

コメント

タイトルとURLをコピーしました