TailwindCSSでクラス名を一つにまとめる方法

2022/02/05

#Web

やりたいこと


下のボタンみたいに共通して使うTailwindCSSのクラス名を”white-button”みたいなクラス名にまとめたい

<button class="border p-2 mt-2 w-36 rounded-full border-slate-300">ボタン</button>


まとめ方


適当なCSSファイルを用意

.white-button{
    @apply border p-2 mt-2 w-36 rounded-full border-slate-300;
}


@applyに続けてTailwindCSSのクラス名を書くことで一つのクラス名にまとめられます。


関連記事:Web

JavaScriptであいまい検索を行う

Web

CloudFlare経由でのアクセスでNginxが受け取るIPアドレスを正しくする方法

Web