【CSSの常識が変わる】Tailwind CSSで実装するモダンUI構築

Next.jsプロジェクト開始時のコマンドにて、TailWind CSSをインストールするかどうか聞かれ、Yesとした場合は、Version3がインストールされてしまうため、別途Tailwind CSSをインストールするようにしています。

Next.jsプロジェクトにて説明していきますが、HTMLプロジェクトやNext.jsでも同様の実装ができますので、

使用するプロジェクトにて同じように記述していってください。

Next.jsやReactプロジェクトの場合は、classNameに記述していきますが、HTMLのプロジェクトでは、classに記述していってください。

使い始めは、各プロパティにどのようなclass名が付与されているか、わからないので、Tailwind CSSの公式ドキュメントから、調べていきましょう。

CSSでは、以下のように記述することで変数を定義でき、

:root {

  --main-bg-color: brown;

}

変数を参照する際は、以下のように記述します。

details {

  background-color: var(--main-bg-color);

}

上記を前提にTailwind CSSでは、デフォルトで変数が定義されています。

これらのデフォルトの変数をそのまま使用するのも良いですし、プロジェクトによっては、この変数の値をカスタマイズして使用するのも良いかと思います。

VSCodeにてファイル保存時に自動で並び替える際に、VSCodeの拡張機能でPrittierを入れており、VSCodeの設定で、formatOnSaveがtrueとなっており、defaultFormatterがprittierになっている必要があります。