皆さん、こんにちは。管理人です。この記事では、Tailwind CSS で色を設定する方法について述べたいと思います。
背景色の指定
Tailwind CSS で背景色を指定するには、基本的には bg-{色}-{数字} というふうにすれば良いです。bg はおそらく background の略だと思います。数字は色の濃さを表します。例えば、HTML の class 属性に bg-red-{数字} を指定すると次のようになります。（h-5 は高さを指定するクラスです。また、{数字} が 50 と 950 の場合は省略しています。）
See the Pen 背景色（Tailwind CSS） by Shigotoron@GitHub (@s31104989) on CodePen.
赤だけ示しても少し物足りないので、他の色もいくつか示したいと思います。
See the Pen 背景色（Tailwind CSS） by Shigotoron@GitHub (@s31104989) on CodePen.
これら以外の色など、より詳細な情報については、
https://tailwindcss.com/docs/background-color
を参照して下さい。
テキストの色の指定
Tailwind CSS でテキストに色を指定するには、基本的には text-{色}-{数字} とすれば良いです。これについてもいくつか例を示したいと思います。
See the Pen テキストの色（赤、Tailwind CSS） by Shigotoron@GitHub (@s31104989) on CodePen.
これら以外の色など、より詳細な情報については、
https://tailwindcss.com/docs/text-color
を参照して下さい。
枠線の色の指定
Tailwind CSS で枠線（Border）の色を指定するには、基本的には border-{色}-{数字} とします。次の例では、border-red-500 と border-green-300 と border-blue-400 をクラスに指定しています。
See the Pen Border の色（Tailwind CSS） by Shigotoron@GitHub (@s31104989) on CodePen.
なお、上の例で border-2 の指定（詳しくは Border Width を参照）がないと、border の幅（border-width）が 0 となってしまうので注意しましょう。
これら以外の色など、より詳細な情報については、
https://tailwindcss.com/docs/border-color
を参照して下さい。
ボタンにカーソルをあてたときの色を変える
次のように hover:{背景色} に別の色を指定することで、カーソルがボタンの上にあるときのボタンの色を変えることができます。
See the Pen カーソルをあてた際のボタンの色（Tailwind CSS） by Shigotoron@GitHub (@s31104989) on CodePen.
これに関するより詳しい情報については、
https://v1.tailwindcss.com/components/buttons
あるいは
https://tailwindcss.com/docs/hover-focus-and-other-states
を参照して下さい。
コメント