テーマコンフィギュレーション

プロジェクトのデフォルトテーマをカスタマイズします。


tailwind.config.jsファイルのthemeセクションでは、プロジェクトのカラーパレット、タイプスケール、フォントスタック、ブレークポイント、境界線の半径の値などを定義します。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    borderWidth: {
      default: '1px',
      '0': '0',
      '2': '2px',
      '4': '4px',
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      spacing: {
        '96': '24rem',
        '128': '32rem',
      }
    }
  }
}

実用的なデフォルトテーマには、開始するための非常に寛大な値のセットが用意されていますが、変更または拡張することを恐れないでください。 デザインの目標に合わせて、必要なだけカスタマイズすることをお勧めします。

Theme structure

themeオブジェクトには、screens,colorsおよびspacingのキーと、カスタマイズ可能な各コアプラグインのキーが含まれています。

テーマオプションの完全なリストについては、テーマ構成リファレンスまたはデフォルトテーマを参照してください。

Screens

screensキーを使用すると、プロジェクトのレスポンシブブレークポイントをカスタマイズできます。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
    }
  }
}

詳細については、ブレークポイントのカスタマイズに関するドキュメントを参照してください。

Colors

colorsキーを使用すると、プロジェクトのグローバルカラーパレットをカスタマイズできます。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      black: '#000',
      white: '#fff',
      gray: {
        100: '#f7fafc',
        // ...
        900: '#1a202c',
      },

      // ...
    }
  }
}

デフォルトでは、これらの色はbackgroundColor,textColorおよびborderColorコアプラグインに継承されます。

詳細については、カラーカスタマイズドキュメントを参照してください。

Spacing

spacingキーを使用すると、プロジェクトのグローバル間隔とサイズスケールをカスタマイズできます。

// tailwind.config.js
module.exports = {
  theme: {
    spacing: {
      px: '1px',
      '0': '0',
      '1': '0.25rem',
      '2': '0.5rem',
      '3': '0.75rem',
      '4': '1rem',
      '5': '1.25rem',
      '6': '1.5rem',
      '8': '2rem',
      '10': '2.5rem',
      '12': '3rem',
      '16': '4rem',
      '20': '5rem',
      '24': '6rem',
      '32': '8rem',
      '40': '10rem',
      '48': '12rem',
      '56': '14rem',
      '64': '16rem',
    }
  }
}

デフォルトでは、これらの値は、padding, margin, negativeMargin, widthおよびheightコアプラグインに継承されます。

詳細については、間隔のカスタマイズに関するドキュメントを参照してください。

Core plugins

themeセクションの残りの部分は、個々のコアプラグインで使用できる値を構成するために使用されます。

たとえば、borderRadiusキーを使用すると、生成される境界半径ユーティリティをカスタマイズできます。

module.exports = {
  theme: {
    borderRadius: {
      'none': '0',
      'sm': '.125rem',
      default: '.25rem',
      'lg': '.5rem',
      'full': '9999px',
    },
  }
}

キーは生成されたクラスのサフィックスを決定し、値は実際のCSS宣言の値を決定します。

上記のborderRadius構成の例では、次のCSSクラスが生成されます。

.rounded-none { border-radius: 0 }
.rounded-sm   { border-radius: .125rem }
.rounded      { border-radius: .25rem }
.rounded-lg   { border-radius: .5rem }
.rounded-full { border-radius: 9999px }

テーマ構成でdefaultのキーを使用すると、接尾辞のないクラスroundedが作成されたことがわかります。 これは、多くの(すべてではありませんが)コアプラグインでサポートされているTailwindの一般的な規則です。

特定のコアプラグインのカスタマイズの詳細については、そのプラグインのドキュメントにアクセスしてください。

使用可能なテーマのプロパティとそのデフォルト値の完全なリファレンスについては、デフォルトのテーマ構成を参照してください。

Customizing the default theme

プロジェクトはデフォルトのテーマ構成から値を自動的に継承します。 デフォルトのテーマをカスタマイズしたい場合は、目標に応じていくつかの異なるオプションがあります。

Overriding the default theme

デフォルトのテーマのオプションをオーバーライドするには、tailwind.config.jsファイルにthemeセクションを作成し、オーバーライドするキーを追加します。

// tailwind.config.js
module.exports = {
  theme: {
    // Replaces all of the default `opacity` values
    opacity: {
      '0': '0',
      '20': '0.2',
      '40': '0.4',
      '60': '0.6',
      '80': '0.8',
      '100': '1',
    }
  }
}

これにより、そのキーに対するTailwindのデフォルト構成が完全に置き換えられるため、上記の例では、デフォルトの不透明度ユーティリティは生成されません。

あなたが提供しないキーはデフォルトのテーマから継承されるため、上記の例では、色、間隔、境界線の半径、背景の位置などのデフォルトのテーマ構成が保持されます。

Extending the default theme

テーマオプションのデフォルト値を保持するだけでなく、新しい値を追加する場合は、theme.extendキーの下に拡張機能を追加します。

たとえば、ブレークポイントを追加したいが既存のブレークポイントは保持したい場合は、screensプロパティを拡張できます。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      // Adds a new breakpoint in addition to the default breakpoints
      screens: {
        '2xl': '1440px',
      }
    }
  }
}

もちろん、デフォルトテーマの一部をオーバーライドすることも、同じ構成内でデフォルトテーマの他の部分を拡張することもできます。

// tailwind.config.js
module.exports = {
  theme: {
    opacity: {
      '0': '0',
      '20': '0.2',
      '40': '0.4',
      '60': '0.6',
      '80': '0.8',
      '100': '1',
    },
    extend: {
      screens: {
        '2xl': '1440px',
      }
    }
  }
}

Referencing other values

テーマで別の値を参照する必要がある場合は、静的な値の代わりにクロージャを指定することで参照できます。 クロージャーは、ドット表記を使用してテーマ内の他の値を検索するために使用できるtheme()関数を受け取ります。

たとえば、fill構成でtheme('colors')を参照することにより、カラーパレットのすべての色に対してfillユーティリティを生成できます。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      // ...
    },
    fill: theme => theme('colors')
  }
}

theme()関数は、完全にマージされたテーマオブジェクトから探している値を見つけようとするため、デフォルトのテーマ値だけでなく、独自のカスタマイズも参照できます。 また、チェーンの最後に静的な値がある限り、再帰的に機能し、探している値を解決できます。

Referencing the default theme

何らかの理由でデフォルトテーマの値を参照したい場合は、tailwindcss/defaultThemeからインポートできます。

これが役立つ一例は、Tailwindのデフォルトのフォントスタックの1つにフォントファミリーを追加したい場合です。

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: [
          'Lato',
          ...defaultTheme.fontFamily.sans,
        ]
      }
    }
  }
}

Disabling an entire core plugin

特定のコアプラグインのクラスを生成したくない場合は、theme構成でそのキーに空のオブジェクトを提供するよりも、corePlugins構成でそのプラグインをfalseに設定することをお勧めします。

テーマ構成で空のオブジェクトを割り当てないでください

// tailwind.config.js
module.exports = {
  theme: {
    opacity: {},
  }
}

corePlugins構成でプラグインを無効にしてください

// tailwind.config.js
module.exports = {
  corePlugins: {
    opacity: false,
  }
}

最終結果は同じですが、多くのコアプラグインは構成を公開しないため、とにかくcorePluginsを使用してのみ無効にできます。したがって、一貫性を保つことをお勧めします。

Adding your own keys

themeオブジェクトに独自のキーを追加すると便利な状況がいくつかあります。

この一例は、新しいキーを追加して、複数のコアプラグイン間で共通の値の信頼できる唯一の情報源を作成することです。 たとえば、backgroundPositionプラグインとobjectPositionプラグインの両方で参照できる共有のpositionsオブジェクトを抽出できます。

// tailwind.config.js
module.exports = {
  theme: {
    positions: {
      bottom: 'bottom',
      center: 'center',
      left: 'left',
      'left-bottom': 'left bottom',
      'left-top': 'left top',
      right: 'right',
      'right-bottom': 'right bottom',
      'right-top': 'right top',
      top: 'top',
    },
    backgroundPosition: theme => theme('positions'),
    objectPosition: theme => theme('positions'),
  }
}

別の例は、カスタムプラグイン内で参照する新しいキーを追加することです。 たとえば、プロジェクトのgradientsプラグインを作成した場合、プラグインが参照するthemeオブジェクトにgradientsキーを追加できます。

// tailwind.config.js
module.exports = {
  theme: {
    gradients: theme => ({
      'blue-green': [theme('colors.blue.500'), theme('colors.green.500')],
      'purple-blue': [theme('colors.purple.500'), theme('colors.blue.500')],
      // ...
    })
  },
  plugins: [
    require('./plugins/gradients')
  ],
}

themeオブジェクト全体がtheme functionを使用してCSSで利用できるため、CSSで参照できるようにするためだけにキーを追加することもできます。

Configuration reference

screens,colorおよびspacingを除いて、themeオブジェクトのすべてのキーはTailwindのコアプラグインの1つにマップされます。

多くのプラグインは静的な値のセット(たとえばfloatなど)のみを受け入れるCSSプロパティを担当するため、すべてのプラグインがthemeオブジェクトに対応するキーを持っているわけではないことに注意してください。

これらのキーはすべて、theme.extendキーの下でも使用でき、デフォルトテーマの拡張を有効にします。

KeyDescription
screensYour project's responsive breakpoints
colorsYour project's color palette
spacingYour project's spacing scale
backgroundColorValues for the background-color property
backgroundImageValues for the background-image property
gradientColorStopsValues for the gradient-color-stops property
backgroundOpacityValues for the background-opacity property
backgroundPositionValues for the background-position property
backgroundSizeValues for the background-size property
borderColorValues for the border-color property
borderOpacityValues for the border-opacity property
borderRadiusValues for the border-radius property
borderWidthValues for the border-width property
boxShadowValues for the box-shadow property
containerConfiguration for the container plugin
cursorValues for the cursor property
divideColorValues for the divide-color property
divideOpacityValues for the divide-opacity property
divideWidthValues for the divide-width property
fillValues for the fill property
flexValues for the flex property
flexGrowValues for the flex-grow property
flexShrinkValues for the flex-shrink property
fontFamilyValues for the font-family property
fontSizeValues for the font-size property
fontWeightValues for the font-weight property
heightValues for the height property
insetValues for the top, right, bottom, and left properties
letterSpacingValues for the letter-spacing property
lineHeightValues for the line-height property
listStyleTypeValues for the list-style-type property
marginValues for the margin property
maxHeightValues for the max-height property
maxWidthValues for the max-width property
minHeightValues for the min-height property
minWidthValues for the min-width property
objectPositionValues for the object-position property
opacityValues for the opacity property
orderValues for the order property
outlineValues for the outline property
paddingValues for the padding property
placeholderColorValues for the placeholderColor plugin
placeholderOpacityValues for the placeholderOpacity plugin
spaceValues for the space plugin
strokeValues for the stroke property
strokeWidthValues for the stroke-width property
textColorValues for the text-color property
textOpacityValues for the textOpacity plugin
widthValues for the width property
zIndexValues for the z-index property
gapValues for the gap property
gridTemplateColumnsValues for the grid-template-columns property
gridAutoColumnsValues for the grid-auto-columns property
gridColumnValues for the grid-column property
gridColumnStartValues for the grid-column-start property
gridColumnEndValues for the grid-column-end property
gridTemplateRowsValues for the grid-template-rows property
gridAutoRowsValues for the grid-auto-rows property
gridRowValues for the grid-row property
gridRowStartValues for the grid-row-start property
gridRowEndValues for the grid-row-end property
transformOriginValues for the transform-origin property
scaleValues for the scale plugin
rotateValues for the rotate plugin
translateValues for the translate plugin
skewValues for the skew plugin
transitionPropertyValues for the transition-property property
transitionTimingFunctionValues for the transition-timing-function property
transitionDurationValues for the transition-duration property
transitionDelayValues for the transition-delay property
animationValues for the animation property
keyframesValues for the keyframes property

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!