theme関数とは？
「tailwind.config.js」のthemeに定義されている定数の値を返す関数です。
メリット
- デザインの統一化
- コードやテーマ修正の際の保守性向上になる。
tailwind.css.config
extendを使うかどうかで2通りの書き方があります。
extendに包まずに書くパターン
既存設定を上書きします。（既存設定が消えてしまうので注意です。）
|
1 2 3 4 5 6 7 |
module.exports = { theme: { spacing: { 1: '0.25rem', }, }, } |
extendの中に書くパターン
既存設定を拡張します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
module.exports = { theme: { extend: { colors: { red: '#FF0000', primary: { green: "#xxxxxx" } }, spacing: { 1: '0.25rem', }, }, }, } |
設定項目一覧
たくさんの項目があります。
| 設定項目 | 説明 |
|---|---|
| screen | レスポンシブの境界値を指定できる。 |
| colors | 色を定義できる。例：text-red、bg-redなど
ネストしてもかけます。例：text-primary-greenなど。 |
| spacing | 幅 |
| animation | アニメーションクラスを適用できる。例：animate-apper |
| backgroundColor | 背景色 |
| backgroundImage | 背景イメージ |
なお、各項目にはデフォルト値が設定されています。TailwindのGitHubの以下のファイルを見れば何がデフォルトで入っているかは確認することが可能です。
https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js
まずはデフォルト値で使えるものがないか探した上でそれでもなければカスタマイズするようにしましょう。（またデフォルト値は上書きもできるので使いやすいようにカスタマイズしてしまうのが良いかもです。）
呼び出し方
configでの定義名をドット区切りで指定します。
|
1 2 3 |
.クラス名 { プロパティ名: theme('spacing.1'); } |
この記事へのコメントはありません。