ベーススタイルを追加する

Tailwindに独自のグローバルベーススタイルを追加するためのベストプラクティス。


ベース(またはグローバル)スタイルは<a>タグ、見出しなどの基本的なHTML要素に役立つデフォルトを設定するスタイルシートの先頭にあるスタイルです。 または、独善的なCSSリセットを適用すること。例えばbox-sizing resetは人気あるCSSリセットです。

Tailwindには、すぐに使える便利な基本スタイルのセット(Preflightと呼びます)が含まれています。 これは、単なるnormalize.cssにより独善的なスタイルの薄いレイヤーを加えたものです。

Preflightはほとんどのプロジェクトの出発点として最適ですが、独自のベーススタイルを追加したい場合のために、慣例的に行うための推奨事項をいくつか示します。


HTMLでクラスを使う

htmlまたは body要素にグローバルスタイルを適用したいだけの場合は、新しいCSSを作成する代わりに、HTMLのこれらの要素に既存のクラスを追加することを検討してください。

<!doctype html>
<html lang="en" class="text-gray-900 antialiased leading-tight">
  <!-- ... -->
  <body class="min-h-screen bg-gray-100">
    <!-- ... -->
  </body>
</html>

CSSを使う

特定の要素にいくつかのベーススタイルを適用する場合、最も簡単な方法は、CSSにそれらを追加することです。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

@ layerディレクティブを使用することにより、Tailwindはそれらのスタイルを自動的に @tailwind baseと同じ場所に移動し、意図しない特異性の問題を回避します。

@ layerディレクティブを使用すると、 baseレイヤーをパージするときにそれらのスタイルをパージすることを考慮するようにTailwindに指示します。 詳細については、Controlling File Sizeのドキュメントをお読みください。

@apply またはtheme() を使用してこれらのスタイルを定義し、 新しいマジックナンバーの導入、または誤ってデザインシステムから逸脱することを回避することは素晴らしいアイディアです。

@font-faceルール

同じアプローチを使用して、使用しているカスタムフォントに @ font-faceルールを追加できます。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: Proxima Nova;
    font-weight: 400;
    src: url(/fonts/proxima-nova/400-regular.woff) format("woff");
  }
  @font-face {
    font-family: Proxima Nova;
    font-weight: 500;
    src: url(/fonts/proxima-nova/500-medium.woff) format("woff");
  }
}

プラグインを使う

writing a plugin と「addBase」関数を使用して、ベーススタイルを追加することもできます。

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

module.exports = {
  plugins: [
    plugin(function({ addBase, config }) {
      addBase({
        'h1': { fontSize: config('theme.fontSize.2xl') },
        'h2': { fontSize: config('theme.fontSize.xl') },
        'h3': { fontSize: config('theme.fontSize.lg') },
      })
    })
  ]
}

addBaseを使用して追加したスタイルは、自動的に @tailwind baseスタイルに含まれます。

プラグインをいつ使うか

一般に、プラグインを作成するよりも、CSSでプロジェクトにベーススタイルを追加する方が簡単です。

次の場合はプラグインをお勧めします:

  • ベーススタイルを一般に公開し、他のユーザーが簡単にインストールできるようにしたい場合。
  • 社内の複数のプロジェクトでベーススタイルを再利用し、CSSの依存関係ではなくJSの依存関係を共有したい場合。

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

Tailwind UI is now in early access!