Next.jsを使って静的なブログサイトを作成する(4)
はじめに
Next.jsのBlog Starter Kitを使ったサイト作成。Tailwind CSSで使用できる色の名前についてです。
Tailwind CSSのスタイルを定義する
プロジェクトフォルダ直下にあるTailwind.config.tsで色の名前を定義できます。
import type { Config } from "tailwindcss";
const config: Config = {
theme: {
extend: {
colors: {
"accent-1": "#FAFAFA",
"accent-2": "#EAEAEA",
"accent-7": "#333",
success: "#0070f3",
cyan: "#79FFE1",
+ nihonkai: "#1f1e63",
},
},
},
};
export default config;
色の定義nihonkaiを追加しました。文字の色をtext-nihonkaiと指定したり、背景色をbg-nihonkaiと指定することができます。
デフォルトで使える色
先ほどの設定ファイルに記載されてなくても、以下の名前が使用可能です。
- black
- white
以下の名前はslate-300のように数値50、100、200、300、400、500、600、700、800、900、950を付けて使用します。
- slate
- gray
- zinc
- neutral
- stone
- red
- orange
- amber
- yellow
- lime
- green
- emerald
- teal
- cyan
- sky
- blue
- indigo
- violet
- purple
- fuchsia
- pink
- rose
数値は小さいほど明るく、大きいほど暗い色になります。
色の見本は下にあるリンク先にあります。
使用例
tsxファイル内で以下のように使います。
<p className="text-white bg-red-500">注意！！</p>
注意！！