コンフィギュレーション

Tailwindインストールをコンフィギュアおよびカスタマイズするためのガイド


Tailwindは、特注のユーザーインターフェイスを構築するためのフレームワークであるため、カスタマイズを念頭に置いてゼロから設計されています。

デフォルトでは、Tailwindはプロジェクトのルートでオプショナルの tailwind.config.jsファイルを探します。このファイルで、カスタマイズを定義できます。

// Example `tailwind.config.js` file

module.exports = {
  important: true,
  theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      margin: {
        '96': '24rem',
        '128': '32rem',
      },
    }
  },
  variants: {
    opacity: ['responsive', 'hover']
  }
}

設定ファイルのすべてのセクションはオプションであるため、変更する内容を指定するだけで済みます。

未設定のセクションはTailwindのdefault configurationに従います。

Creating your configuration file

tailwindcssnpmパッケージのインストール時に含まれているTailwind CLIユーティリティを使用して、プロジェクトのTailwind構成ファイルを生成します。

npx tailwindcss init

これにより、プロジェクトのルートに最小限のtailwind.config.jsファイルが作成されます。

// tailwind.config.js
module.exports = {
  future: {},
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Using a different file name

tailwind.config.js以外の名前を使用するには、コマンドラインで引数として渡します。

npx tailwindcss init tailwindcss-config.js

カスタムファイル名を使用する場合は、PostCSS構成にプラグインとしてTailwindを含めるときにも、それを指定する必要があります。

// postcss.config.js
module.exports = {
  plugins: [
    require('tailwindcss')('./tailwindcss-config.js'),
  ],
}

Scaffolding the entire default configuration

ほとんどのユーザーの場合、構成ファイルをできるだけ最小限に抑え、カスタマイズしたいものだけを指定することをお勧めします。

Tailwindのデフォルト構成のすべてを含む、完全なコンフィギュレーションファイルをスキャフォールディングしたい場合は、--fullオプションを使用します。

npx tailwindcss init --full

Tailwindが内部で使用するのと一致するdefault configuration fileを取得できます。

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 configuration guideをご覧ください。

Variants

variantsセクションでは、コアユーティリティプラグインごとに生成されるvariantsを制御できます。

// tailwind.config.js
module.exports = {
  variants: {
    appearance: ['responsive'],
    backgroundColor: ['responsive', 'hover', 'focus'],
    fill: [],
  },
}

詳細はvariants configuration guideをご覧ください。

Plugins

pluginsセクションでは、サードパーティのプラグインをTailwindに登録して、追加のユーティリティ、コンポーネント、基本スタイル、またはカスタムバリアントを生成することができます。

// tailwind.config.js
module.exports = {
  plugins: [
    require('tailwindcss-transforms'),
    require('tailwindcss-transitions'),
    require('tailwindcss-border-gradients'),
  ],
}

独自のプラグインの作成についての詳細はplugin authoring guideをご覧ください。

Prefix

prefixオプションを使用すると、Tailwindで生成されたすべてのユーティリティクラスにカスタムプレフィックスを追加できます。 これは、名前の競合が発生する可能性がある既存のCSS上にTailwindを重ねるときに非常に役立ちます。

たとえば、次のようにprefixオプションを設定することで、tw-プレフィックスを追加できます。

// tailwind.config.js
module.exports = {
  prefix: 'tw-',
}

これで、すべてのユーティリティが設定されたプレフィックスで生成されます。

.tw-text-left {
  text-align: left;
}
.tw-text-center {
  text-align: center;
}
.tw-text-right {
  text-align: right;
}
/* etc. */

このプレフィックスは、クラス名全体ではなく、各ユーティリティ名の先頭に追加されることを理解することが重要です。

つまり、sm:hover:のようなレスポンシブプレフィックスまたは状態プレフィックスを持つクラスには、引き続きレスポンシブプレフィックスまたは状態プレフィックスが最初にあり、カスタムプレフィックスはコロンの後に表示されます。

<div class="tw-text-lg md:tw-text-xl tw-bg-red-500 hover:tw-bg-blue-500">
  <!-- -->
</div>

プレフィックスは、Tailwindによって生成されたクラスにのみ追加されます。 独自のカスタムクラスにプレフィックスは追加されません。

つまり、次のような独自のレスポンシブユーティリティを追加するとこのようになります。

@responsive {
  .bg-brand-gradient { /* ... */ }
}

生成されたレスポンシブクラスには、設定されたプレフィックスがありません。

.bg-brand-gradient { /* ... */ }
@media (min-width: 640px) {
  .sm\:bg-brand-gradient { /* ... */ }
}
@media (min-width: 768px) {
  .md\:bg-brand-gradient { /* ... */ }
}
@media (min-width: 992) {
  .lg\:bg-brand-gradient { /* ... */ }
}
@media (min-width: 1280px) {
  .xl\:bg-brand-gradient { /* ... */ }
}

独自のユーティリティにもプレフィックスを付ける場合は、クラス定義にプレフィックスを追加するだけです。

@responsive {
  .tw-bg-brand-gradient { /* ... */ }
}

Important

importantオプションを使用すると、Tailwindのユーティリティを!importantでマークするかどうかを制御できます。 これは、特異性の高いセレクターを持つ既存のCSSでTailwindを使用する場合に非常に役立ちます。

ユーティリティを!importantとして生成するには、設定オプションのimportantキーをtrueに設定します。

// tailwind.config.js
module.exports = {
  important: true,
}

これで、Tailwindのすべてのユーティリティクラスが !importantとして生成されます。

.leading-none {
  line-height: 1 !important;
}
.leading-tight {
  line-height: 1.25 !important;
}
.leading-snug {
  line-height: 1.375 !important;
}
/* etc. */

このオプションを有効にしても、独自のカスタムユーティリティは自動的に!importantとしてマークされないことに注意してください。

独自のユーティリティ!importantを作成する場合は、各宣言の最後に!importantを自分で追加するだけです。

@responsive {
  .bg-brand-gradient {
    background-image: linear-gradient(#3490dc, #6574cd) !important;
  }
}

Setting important to true is useful, but can introduce some issues when incorporating third-party JS libraries that add inline styles to your elements—in those cases, Tailwind's !important utilities defeat the inline styles. This is really common with animation libraries, for example.

If you're not facing that issue, feel free to skip to the next section! But if you are facing that issue, you can make utilities "important" in a less aggressive manner by providing a CSS selector instead of a boolean to the important option:

// tailwind.config.js
module.exports = {
  important: '#app',
}

This configuration will prefix all of your utilities with the given selector, effectively increasing their specificity without actually making them !important.

After you specify the important selector, you'll need to ensure that the root element of your site matches it. Using the example above, we would need to set our root element's id attribute to app in order for styles to work properly.

After your configuration is all set up and your root element matches the selector in your Tailwind config, all of Tailwind's utilities will have a high enough specificity to defeat other classes used in your project, without interfering with inline styles:

<html>
<!-- ... -->
<style>
  .high-specificity .nested .selector {
    color: blue;
  }
</style>
<body id="app">
  <div class="high-specificity">
    <div class="nested">
      <!-- Will be red-500 -->
      <div class="selector text-red-500"><!-- ... --></div>
    </div>
  </div>

  <!-- Will be #bada55 -->
  <div class="text-red-500" style="color: #bada55;"><!-- ... --></div>
</body>
</html>

Separator

The separator option lets you customize what character or string should be used to separate variant prefixes (screen sizes, hover, focus, etc.) from utility names (text-center, items-end, etc.).

We use a colon by default (:), but it can be useful to change this if you're using a templating language like Pug that doesn't support special characters in class names.

// tailwind.config.js
module.exports = {
  separator: '_',
}

Core Plugins

The corePlugins section lets you completely disable classes that Tailwind would normally generate by default if you don't need them for your project.

If you don't provide any corePlugins configuration, all core plugins will be enabled by default:

// tailwind.config.js
module.exports = {}

If you'd like to disable specific core plugins, provide an object for corePlugins that sets those plugins to false:

// tailwind.config.js
module.exports = {
  corePlugins: {
    float: false,
    objectFit: false,
    objectPosition: false,
  }
}

If you'd like to whitelist which core plugins should be enabled, provide an array that includes a list of the core plugins you'd like to use:

// tailwind.config.js
module.exports = {
  corePlugins: [
    'margin',
    'padding',
    'backgroundColor',
    // ...
  ]
}

If you'd like to disable all of Tailwind's core plugins and simply use Tailwind as a tool for processing your own custom plugins, provide an empty array:

// tailwind.config.js
module.exports = {
  corePlugins: []
}

Here's a list of every core plugin for reference:

Core PluginDescription
preflightTailwind's base/reset styles
containerThe container component
accessibilityThe sr-only and not-sr-only utilities
alignContentThe align-content utilities like content-end
alignItemsThe align-items utilities like items-center
alignSelfThe align-self utilities like self-end
animationThe animation utilities like animate-none
appearanceThe appearance utilities like appearance-none
backgroundAttachmentThe background-attachment utilities like bg-local
backgroundClipThe background-clip utilities like bg-clip-padding
backgroundColorThe background-color utilities like bg-green-700
backgroundImageThe background-image utilities like bg-gradient-to-br
backgroundOpacityThe background-color opacity utilities like bg-opacity-25
backgroundPositionThe background-position utilities like bg-left-top
backgroundRepeatThe background-repeat utilities like bg-repeat-x
backgroundSizeThe background-size utilities like bg-cover
borderCollapseThe border-collapse utilities like border-collapse
borderColorThe border-color utilities like border-green-700
borderOpacityThe border-color opacity utilities like border-opacity-25
borderRadiusThe border-radius utilities like rounded-l-3xl
borderStyleThe border-style utilities like border-dotted
borderWidthThe border-width utilities like border-l-2
boxShadowThe box-shadow utilities like shadow-lg
boxSizingThe box-sizing utilities like box-border
clearThe clear utilities like clear-right
cursorThe cursor utilities like cursor-wait
displayThe display utilities like table-column-group
divideColorThe between elements border-color utilities like divide-gray-500
divideOpacityThe divide-opacity utilities like divide-opacity-50
divideStyleThe divide-style utilities like divide-dotted
divideWidthThe between elements border-width utilities like divide-x-2
fillThe fill utilities like fill-current
flexThe flex utilities like flex-auto
flexDirectionThe flex-direction utilities like flex-row-reverse
flexGrowThe flex-grow utilities like flex-grow-0
flexShrinkThe flex-shrink utilities like flex-shrink-0
flexWrapThe flex-wrap utilities like flex-wrap-reverse
floatThe float utilities like float-left
fontFamilyThe font-family utilities like font-serif
fontSizeThe font-size utilities like text-xl
fontSmoothingThe font-smoothing utilities like antialiased
fontStyleThe font-style utilities like italic
fontVariantNumericThe font-variant-numeric utilities like lining-nums
fontWeightThe font-weight utilities like font-medium
gapThe gap utilities like gap-x-12
gradientColorStopsThe gradient-color-stops utilities like via-green-700
gridAutoColumnsThe grid-auto-columns utilities like auto-cols-min
gridAutoFlowThe grid-auto-flow utilities like grid-flow-col
gridAutoRowsThe grid-auto-rows utilities like auto-rows-min
gridColumnThe grid-column utilities like col-span-6
gridColumnEndThe grid-column-end utilities like col-end-7
gridColumnStartThe grid-column-start utilities like col-start-7
gridRowThe grid-row utilities like row-span-3
gridRowEndThe grid-row-end utilities like row-end-4
gridRowStartThe grid-row-start utilities like row-start-4
gridTemplateColumnsThe grid-template-columns utilities like grid-cols-7
gridTemplateRowsThe grid-template-rows utilities like grid-rows-4
heightThe height utilities like h-16
insetThe inset utilities like top-0
justifyContentThe justify-content utilities like justify-center
justifyItemsThe justify-items utilities like justify-items-end
justifySelfThe justify-self utilities like justify-self-end
letterSpacingThe letter-spacing utilities like tracking-normal
lineHeightThe line-height utilities like leading-9
listStylePositionThe list-style-position utilities like list-inside
listStyleTypeThe list-style-type utilities like list-disc
marginThe margin utilities like mb-4
maxHeightThe max-height utilities like max-h-full
maxWidthThe max-width utilities like max-w-3xl
minHeightThe min-height utilities like min-h-full
minWidthThe min-width utilities like min-w-0
objectFitThe object-fit utilities like object-fill
objectPositionThe object-position utilities like object-left-top
opacityThe opacity utilities like opacity-50
orderThe order utilities like order-8
outlineThe outline utilities like outline-white
overflowThe overflow utilities like overflow-x-hidden
overscrollBehaviorThe overscroll-behavior utilities like overscroll-y-contain
paddingThe padding utilities like pr-2
placeContentThe place-content utilities like place-content-between
placeholderColorThe placeholder color utilities like placeholder-red-600
placeholderOpacityThe placeholder color opacity utilities like placeholder-opacity-25
placeItemsThe place-items utilities like place-items-end
placeSelfThe place-self utilities like place-self-end
pointerEventsThe pointer-events utilities like pointer-events-none
positionThe position utilities like absolute
resizeThe resize utilities like resize-y
rotateThe rotate utilities like rotate-180
scaleThe scale utilities like scale-x-95
skewThe skew utilities like -skew-x-1
spaceThe "space-between" utilities like space-x-4
strokeThe stroke utilities like stroke-current
strokeWidthThe stroke-width utilities like stroke-1
tableLayoutThe table-layout utilities like table-auto
textAlignThe text-align utilities like text-center
textColorThe text-color utilities like text-green-700
textDecorationThe text-decoration utilities like line-through
textOpacityThe text-opacity utilities like text-opacity-50
textTransformThe text-transform utilities like lowercase
transformThe transform utility (for enabling transform features)
transformOriginThe transform-origin utilities like origin-bottom-right
transitionDelayThe transition-delay utilities like delay-200
transitionDurationThe transition-duration utilities like duration-200
transitionPropertyThe transition-property utilities like transition-colors
transitionTimingFunctionThe transition-timing-function utilities like ease-in
translateThe translate utilities like translate-x-full
userSelectThe user-select utilities like select-text
verticalAlignThe vertical-align utilities like align-middle
visibilityThe visibility utilities like visible
whitespaceThe whitespace utilities like whitespace-pre
widthThe width utilities like w-1/4
wordBreakThe word-break utilities like break-words
zIndexThe z-index utilities like z-30

Referencing in JavaScript

It can often be useful to reference your configuration values in your own client-side JavaScript — for example to access some of your theme values when dynamically applying inline styles in a React or Vue component.

To make this easy, Tailwind provides a resolveConfig helper you can use to generate a fully merged version of your configuration object:

import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from './tailwind.config.js'

const fullConfig = resolveConfig(tailwindConfig)

fullConfig.theme.width[4]
// => '1rem'

fullConfig.theme.screens.md
// => '768px'

fullConfig.theme.boxShadow['2xl']
// => '0 25px 50px -12px rgba(0, 0, 0, 0.25)'

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

Tailwind UI is now in early access!