Tailwind CSS の一歩進んだ書き方
ARANK

はじめに「Tailwind CSS とは何か」については理解している前提で進めます。html<h1 class="text-3xl font-bold underline"> Hello world! </h1> 簡単な例として、上記 HTML を記述すると、以下のようにスタイリングされます。 Just-in-Time 改め arbitrary values上記例にある text-3xl などのスタイルは予め Tailwind CSS が用意しているものですが、tailwind.config.js を編集することで簡単に変更・追加できます。ただし、1 回しか使わないスタイルでもいちいち tailwind.config.js に登録しないといけないので、その不便さを解消する機能として v2.1 から Just-in-Time (JIT) モードが導入されました。v3.0 からは JIT がデフォルトになりましたので、わざわざ「JIT モード」ということもなくなり、ドキュメントではその機能を単に arbitrary values (任意値) と記述しています。html<h1 class="text-[10vw] font-bold underline"> Hello world! </h1> text-[10vw] のように記述することで、登録されていないスタイルでも以下の CSS が自動的に生成されます。css.text-\[10vw\] { font-size: 10vw; } 一歩進んだ記述方法まとめしかし、自由度が増したことで記述…

zenn.dev
Related Topics: CSS