tailwindcssで、共通スタイルを使用する方法

2022年05月07日

tailwindcssの勉強をしていて、tailwindcssは、要素ごとにあらかじめ用意されたユーティリティクラスを付与していってレイアウトを調整していくのが基本ですが、例えばaタグとか、h1、h2とか、サイト全体で共通となる要素にそれぞれユーティリティクラスを付与していくことは面倒なことです。

通常のCSSでよくやるように、汎用的な要素は、共通的なスタイルを指定しておき、それぞれクラスを付与しなくていいようにしたいのですが、tailwindcssを読み込んでいると、普通にクラスごとの記載をcssに追加していっても、サイトに反映されないんですよね・・・。

公式サイトを見ると、要素 { @apply tailwindcssのクラス名; } とcssファイルに記載すれば反映されるとのことだったのですが、cssファイルに書いていっても反映されない・・・。

※ ちなみに、自分のtailwindcssの読み込みは、npmでインストールするタイプではないので、面倒なのでCDNを使って読み込んでいる方法です。

これを調べるのに時間がかかったのですが、分かりました。

<style type="text/tailwindcss">
属性名 {
    @apply tailwindcssクラス名;
}
</style>

上記の記載で無事解決しました。

styleを指定するところで、<style type=”text/tailwindcss”>と記載する必要があって、通常通りに<style type=”text/css”>の記載だと、@applyの構文は効かないわけですね。

以上、メモ書きでした。