LoginSignup
3
2
@tanimoto-hikari(たにもと ひかり)in株式会社エイチームライフデザイン

【TailwindCSS v3.4】ドキュメントを隅から隅まで読んでみた

Last updated at Posted at 2024-08-14

はじめに

記事作成し始めた当初はドキュメントを読んで確認した内容全てを1記事にまとめる予定でしたが、ストックしてもらった時に読み返ししやすいように一部は切り出して別記事にしております。

本記事はそのハブとなる記事です。
分割した記事一覧です。読みたいセクションがあれば下記から遷移してください。

TailwindCSSのドキュメントを読めばわかることは記載せず、要点に絞ってお届けできればと考えています。詳細を確認したい場合は公式ドキュメントのリンクから確認いただけますと幸いです！

なぜドキュメントを読み直したのか？

TailwindCSSを利用していますが、まだまだ知識不足は否めないです…。
恥ずかしながら端から端まで読んでなかったので全て目を通してみることにしました！

記事はめちゃくちゃ長くなっているので時間の許す方のみご一読いただけるようお願いします。
読みたい！と思ってくださった方は一旦ストックに入れておくことをオススメします。

Tailwind CSS ドキュメントバージョン

今回読み進めるドキュメントのバージョンは3.4です。
インストールの方法など、一部は本記事には記載せず省きたいと思います。

改めて抜き出す必要がないと判断したものはタイトルの横に「省略」と記載します。
気になる方はリンクからドキュメントを確認してください！

目次

  1. Getting Started
  2. Core Concepts
  3. Customization
  4. Base Styles
  5. Layout
  6. Flexbox & Grid
  7. Spacing
  8. Sizing
  9. Typography
  10. Backgrounds
  11. Borders
  12. Effects
  13. Filters
  14. Tables
  15. Transitions & Animation
  16. Transforms
  17. Interactivity
  18. SVG
  19. Accessibility
  20. Official Plugins

Getting Started

環境設定がメインのセクションです。

  1. Installation　（省略）
  2. Editor Setup
  3. Using with Preprocessors（省略）
  4. Optimizing for Production（省略）
  5. Browser Support（省略）
  6. Upgrade Guide

Editor Setup

vscodeを利用する場合は必ずTailwind CSS IntelliSenseを入れましょう！
あるのとないのとで開発効率が全く違います！

Prettierを入れると推奨される順番にクラスを並び変えてくれるのでインストールするのがオススメ。

Upgrade Guide

TailwindCSSv2からv3へアップグレードする際のガイドです。
TailwindCSSをアップグレードする際は確認してみてください！

Core Concepts

  1. Utility-First Fundamentals
  2. Handling Hover, Focus, and Other States
  3. Responsive Design
  4. Dark Mode
  5. Reusing Styles
  6. Adding Custom Styles
  7. Functions & Directives

Utility-First Fundamentals

ご存知の通り、ユーティリティファーストなのがTailwindCSSです。
カスタムCSSを1行も記述せずにユーティリティのセットから実装できます！

利点は以下の通り。

  • クラス名を考案する必要がない
  • CSSのファイルが大きくなるのを防ぐ
  • グローバルスコープをローカルスコープに

TailwindCSSを使い始める前はピンときませんでしたが、ドキュメントで挙げられている利点は非常に大きいと思っています。
これまで膨大な時間をクラス名を考えるのに消費していましたし、グローバルに定義されるCSSの影響を確認するために多くの時間をビジュアルの確認に使ってました。

時間が節約できたことによって、コンポーネントの設計など本質的な部分に時間を使うことができるようになりました！

Why not just use inline styles?

TailwindCSSとインラインスタイルとは異なる点やTailwindCSSを利用することの利点が述べられています！

  • 一貫性あるUIの構築が簡単
  • レスポンシブユーティリティーが使える
  • ホバー、フォーカスなどの表現が可能

インラインスタイルはマジックナンバー1であると表現されますが、確かにそうだと思いました。インラインスタイルは書いた人にしか理解しづらい側面があります。

TailwindCSSはレスポンシブユーティリティが用意されているので従来より簡単にレスポンシブ対応が可能です！

インラインスタイルではホバーやフォーカスなどの状態をスタイリングできませんがTailwindCSSなら可能です！

Maintainability concerns

TailwindCSSはユーティリティが繰り返されることで保守性に対する懸念が語られます。

  • コンポーネントの部分抽出
  • エディターの機能

を使うことで解決できると書かれています！
いくつか参考例も提示してくれているので気になる人は確認してください！

TailwindCSSは定義が長くなり冗長的に見えます…。
ただ、ライブラリやユーティリティ関数を利用することでも読みやすさを上げることが可能だと思います!

Tailwind Variantsの利用

TailwindCSSを宣言的な書き方をするためのライブラリです。
HTML部分に記述していたclassをまとめられるのでコードを見やすくできます！

過去に記事を書いてますのでよろしければご覧ください！

tailwind-mergeを利用する

classNameのコンフリクトを処理してくれるライブラリです！
tailwind-mergeを使うと下記のようにコードを書けます！

// tailwind-merge利用前
<button class="bg-blue-500 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 active:bg-blue-800 text-white font-bold py-2 px-4 rounded-full transition duration-150 ease-in-out">
  Click me
</button>

// tailwind-mergeを利用した時のコード
import { twMerge } from 'tailwind-merge'

<button
  className={twMerge(
    'bg-blue-500 text-white font-bold py-2 px-4 rounded-full',
    'hover:bg-blue-700',
    'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500',
    'active:bg-blue-800',
    'transition duration-150 ease-in-out'
  )}
>
  Click me
</button>

tailwind-mergeを利用することで行を分割できるので可読性を改善することは可能だと思います！

Handling Hover, Focus, and Other States

かなり長い章です…。
ざっと確認したい場合はQuick referenceやPseudo-class referenceを確認するのが良いと思います！
それ以外のところは別記事にまとめました！

擬似クラス・擬似要素

属性セレクタ・カスタム修飾子

Responsive Design

TailwindCSSでは簡単にレスポンシブインターフェイスを表現できます。
メタタグは忘れずheadに記載していることを確認してください。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

あとは利用するユーティリティクラスの前にブレークポイント名:を付与するだけです！

<div class="w-16 md:w-32 lg:w-48">

Tailwwindには5つのブレイクポイントが用意されています。

プレフィックス 最小幅 CSS
sm 640px @media (min-width: 640px) {}
md 768px @media (min-width: 768px) {}
lg 1024px @media (min-width: 1024px) {}
xl 1280px @media (min-width: 1280px) {}
2xl 1536px @media (min-width: 1536px) {}

モバイルファースト

プレフィックス付きのユーティリティクラスは指定されたブレイクポイント以降でのみ有効になります！

プレフィックスのないユーティリティでモバイルのスタイルを定義し、より大きいデバイスはプレフィックスを使用したユーティリティでオーバライドするようにスタイリングすることに注意していください…

targeting-mobile-screens

ブレークポイントの範囲の設定

ブレークポイントのプレフィックスを利用して下記のような記述が可能です。

<div className="md:max-xl:bg-red-500 w-10 h-10">

flexの適用を特定の範囲に制限する手法です。
先ほどの例だとmdは768px、max-xlは1280pxなのでこの間は背景色が赤色になります。

ブレークポイントはtailwind.configに記述することでカスタマイズできます！

module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      'laptop': '1024px',
      'desktop': '1280px',
    },
  }
}

ブレイクポイントの設定はTailwindCSSSが用意してくれている通りのsmやmdも良いのですが、上記の例のようにセマンティックな命名でブレイクポイントを設定した方が、利用用途が明瞭になり良いと感じています！

もちろん任意の値を設定することも可能です。

<div className="min-[320px]:text-center">

Dark Mode

TailwindCSSSではダークモードでのスタイル設定をdark:を利用することで対応できます。

<div className="bg-white dark:bg-slate-800">

ダークモードは、手動で切り替えることが設定の変更で可能です。

tailwind.config
module.exports = {
  darkMode: 'selector',
}

クラスはに基づいて適用されるのではなく、クラスが HTML ツリーの前の部分に存在するprefers-color-scheme場合はいつでも適用されるようになります。

<!-- Dark mode not enabled -->
<html>
<body>
  <div className="bg-white dark:bg-black"></div>
</body>
</html>

<!-- Dark mode enabled -->
<html className="dark">
<body>
  <div className="bg-white dark:bg-black"></div>
</body>
</html>

一部のフレームワークにはダークモード設定時に独自のクラスを付与することがあります。
その場合はTailwindCSSの設定でダークモードのセレクターをカスタムします！

module.exports = {
  darkMode: ['selector', '[data-mode="dark"]'],
}

TailwindCSSは、カスタムダークモードセレクターを:where()疑似クラスで自動的にラップし、詳細度が高くならないように対応してくれます。

window.matchMedia()APIを使用することで手動選択したモードとシステム設定の両方をサポートできます。

細かい設定についてはこちらの記事がわかりやすいかったです。

ダークモードバリアントを独自で定義

tailwind.configでdarkModeをvariantを設定することでバリアントを独自で定義し直せます。

module.exports = {
  darkMode: ['variant', '&:not(.light *)'],
}

TailwindCSSは提供されたセレクターを一切変更しないため、:where()で詳細度の調整が行われないため他のclassと同じ詳細度を確保するように考慮していください。

複数設定したい場合はセレクターの部分を配列にして指定します。
​

darkMode: ['variant', [
  '@media (prefers-color-scheme: dark) { &:not(.light *) }',
  '&:is(.dark *)',
]],

Reusing Styles

TailwindCSSには繰り返し利用されるスタイルを再利用する方法がいくつか提案されています。

繰り返し同じスタイルが定義されている例
<div class="mt-3 flex -space-x-2 overflow-hidden">
  <img className="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
  <img className="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
  <img className="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80" alt=""/>
  <img className="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
  <img className="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
</div>

上記を効率よく編集するためのプラクティス

  • エディタの機能を使ったマルチカーソル編集
  • ループさせる
  • コンポーネントと部分抽出

Extracting classes with @apply

@applyを利用して繰り返し使用されるユーティリティをカスタムクラスとして抽出できます。

カスタムクラスを作る前
<button className="py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75">
  Save changes
</button>
カスタムクラスの定義
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75;
  }
}
カスタムクラスを利用したclassの指定
<button className="btn-primary">
  Save changes
</button>

ただ、@applyを見た目を綺麗にするため利用してはいけません。
理由は…

  • クラス名は常に考えなければならない
  • 変更を加えるには複数のファイルを行き来する必要がある
  • スタイルはグローバルなので影響範囲が広く、変更後の確認が難しい
  • CSSのバンドルが大きくなる

カスタムクラスを定義することはTailwindCSSが提供する利点を全て捨てることにつながることを意識して導入の検討には細心の注意を払ってください。

Adding Custom Styles

TailwindCSSで独自のカスタムクラスを追加する時のプラクティスが示されています。

この章のサマリーは以下の通りです。

  • デザイン トークンのカスタマイズ
  • 必要に応じて制約を解除する方法、独自のカスタムCSSの追加
  • プラグインによるフレームワークの拡張

テーマのカスタマイズ

カラーパレット、間隔スケール、タイポグラフィスケール、ブレークポイントなどを変更する場合は、ファイルthemeのセクションに追加します。

tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
  }
}

任意の値を利用する

任意の値を指定することが可能です。
別の章で詳しく説明がありましたが、任意で値を指定するには下記のように書けます。

<div className="top-[117px]">
<div className="top-[117px] lg:top-[344px]">
<div className="bg-[#bada55] text-[22px] before:content-['Festivus']">

tailwind.configに定義したデザイントークンを利用する場合は下記のように記述できます。

<div className="grid grid-cols-[fit-content(theme(spacing.32))]">

また、CSS変数はvar()を使う必要はありません。

<div className="bg-[--my-color]">

TailwindCSSで定義されていないユーティリティを使いたい場合には下記のようにします。

<div className="[mask-type:luminance]">

任意のバリアント

こちらは別の章で詳しく説明されているので割愛します。
記事も別でまとめておりますのでそちらをご一読ください。

空白の処理

_（アンダースコア）を使用すると、TailwindCSSはスペースへ変換します。

<div className="grid grid-cols-[1fr_500px_2fr]">

下記のようなURLの場合はアンダースコアを保持します。

<div className="bg-[url('/what_a_rush.png')]">

_（アンダースコア）が必要になる場合にはバックスラッシュでエスケープしてください。

<div className="before:content-['hello\_world']">

バックスラッシュが JavaScript エスケープ文字として扱われないようにするにはString.raw()を利用します。

<div className={String.raw`before:content-['hello\_world']`}>

曖昧さの解決

TailwindCSSのユーティリティは共通の名前空間を共有しています。
text-lgとtext-black両方ともtext-名前空間を共有していますが、一方はfont-size、もう一方はcolorです。

<div className="text-lg">
<div className="text-block">

TailwindCSSは、渡された値に基づいてこの曖昧さを自動的に処理します！
それは任意で定義された値も同様です。

<div className="text-[22px]">
<div className="text-[#bada55]">

ただ、CSS変数を利用した場合曖昧さが解決されません。
値の前にCSSデータ型を追加することで回避できます！

- <div className="text-[var(--my-var)]">
+ <div className="text-[color:var(--my-var)]">

CSSと@layerの使用

TailwindCSSではレイヤーが3つ存在しています。

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

それぞれの役割は、下記の通り

レイヤー名 役割
base リセットルールやプレーンHTML要素に適用されるデフォルトスタイル
components ユーティリティでオーバーライドできるようにしたいクラスベースのスタイル用
utilities 他のスタイルよりも常に優先される、小さな単一目的のクラス用

この@layerディレクティブは、対応するディレクティブに自動的に再配置することで宣言の順序を制御し@tailwind、独自のカスタムCSSに対して修飾子やツリー シェイキングなどの機能も有効にします。

2つのclassの詳細度が同じ場合、スタイルシート内の順序によってどちらが優先されるか決定します。
それを管理するための3つのレイヤーがあります。
これはITCSSの概念とのことです。

ユーティリティクラスをオーバーライドしたい場合は@layer componentsを利用します。
また、使用しているサードパーティコンポーネントのカスタムスタイルを配置するのにも適しています。

@layer components {
  .card {
    background-color: theme('colors.white');
    border-radius: theme('borderRadius.lg');
    padding: theme('spacing.6');
    box-shadow: theme('boxShadow.xl');
  }
}

@layer utilitiesには独自のユーティリティクラスを追加する場合に利用します。

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
}

utilitiesレイヤーに定義することでTailwindCSSの他のユーティリティクラスと同じように修飾子構文を自動でサポートしてくれます！

<div class="lg:dark:content-auto">

レイヤーに追加したカスタムスタイルはTailwindCSSの機能により使用されている場合にのみコンパイルされるツリーシェイキングの機能が有効になります！

ツリーシェイキングの機能を有効にしたくない場合は、@layerディレクティブを利用しないで定義します。

レイヤーとコンポーネントごとのCSS

@layerコンポーネントスタイルでは使用しないでください。

after
<style>
  @layer components {
    div {
      background-color: theme('colors.white');
      border-radius: theme('borderRadius.lg');
      padding: theme('spacing.6');
      box-shadow: theme('boxShadow.xl');
    }
  }
</style>

上記はエラーになります。
回避するためには@layerを使わないことです。

<style>
  div {
    background-color: theme('colors.white');
    border-radius: theme('borderRadius.lg');
    padding: theme('spacing.6');
    box-shadow: theme('boxShadow.xl');
  }
</style>

ただ、これの対応は避けるべきです。

TailwindCSSはスタイルシート内で直接的なスタイル定義を行うのではなく、@tailwindディレクティブ1を使用してプリファビケーションされたクラスを生成します。

このプロセスは、ビルド時に一度だけ実行されるべきですがフレームワークが各styleブロックを個別に扱うことで、このプロセスを複数回実行する可能性があります。

TailwindCSSは<style>タグが書かれてコンポーネントの数だけ生成しようとします。各styleブロック間でのスタイルの整合性が保証されないため、最終的な出力CSSが期待通りのレイヤー構造を得られない可能性があります。

TailwindCSSのプラグインを使用してカスタムCSSを追加できます。

tailwind.config
module.exports = {
  plugins: [
    plugin(function ({ addBase, addComponents, addUtilities, theme }) {
      addBase({
        'h1': {
          fontSize: theme('fontSize.2xl'),
        },
        'h2': {
          fontSize: theme('fontSize.xl'),
        },
      })
      addComponents({
        '.card': {
          backgroundColor: theme('colors.white'),
          borderRadius: theme('borderRadius.lg'),
          padding: theme('spacing.6'),
          boxShadow: theme('boxShadow.xl'),
        }
      })
      addUtilities({
        '.content-auto': {
          contentVisibility: 'auto',
        }
      })
    })
  ]
}

Functions & Directives

TailwindCSSが公開するカスタム関数とディレクティブについて紹介されています。

TailwindCSSによって提供されるディレクティブは以下の4つです。

  • @tailwind
    • base、components、utilities、variantsのレイヤーに追加します
  • @layer
    • カスタムスタイルのセット先を指定します
  • @apply
    • 独自のカスタムスタイルを定義するために利用します
  • @config
    • CSSファイルをコンパイルするときにTailwindCSSが使用する構成ファイルを指定します
@configの利用方法
@config "./tailwind.site.config.js";

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

@configは@importの宣言前に利用はできません。

ダメな例
@config "./tailwind.admin.config.js";
@import "tailwindcss/base";

TailwindCSSのカスタム関数

TailwindCSSでは固有の値にアクセスするためのカスタム関数があります。
関数はビルド時に評価され、最終的なCSSで静的な値に置き換えられます。

  • theme()
    • tailwind.configのthemeで定義した値にアクセスできます
  • screen()
    • ブレークポイントを参照するメディアクエリを作成できます
theme()の使い方

基本はドット記法を用いてアクセスし、ドットを含む値の場合[]（ブラケット）を利用します。
色の不透明度を指定することも可能ですが、ダッシュ構文は利用できません。

.content-area {
  height: calc(100vh - theme(spacing.12));
  height: calc(100vh - theme(spacing[2.5]));
  background-color: theme(colors.blue-500);　 /* これは利用できない */
  background-color: theme(colors.blue.500 / 75%);
}
screen()の使い方

@mediaの後に関数を続けて利用します。

@media screen(sm) {}
@media (min-width: 640px) {} /* ビルドされた後 */

Customization

  1. Configuration
  2. Content
  3. Theme
  4. Screens
  5. Colors
  6. Spacing
  7. Plugins
  8. Presets

tailwind.config.jsの設定について書かれています。
tailwind.config.jsへの定義はオプションであるため変更したい部分だけ記載します。
不足している箇所はデフォルトの設定が反映されます！

Configuration

TailwindCSSをカスタマイズするためには、tailwind.config.jsに追記していく必要があります。

全てを設定する必要はなく、不足しているセクションはデフォルトの設定が反映されます！
変更を加えたい箇所のみを指定するだけでOKです。

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

設定ファイルを作成するにはnpx tailwindcss initを実行すると下記の内容のファイルがプロジェクトルートに作成されます。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

initの後に拡張しを含めたファイル名を指定することで任意のファイル名で作成できます！

カスタムのファイル名を使う場合はCSSをコンパイルしているツールの設定ファイルにパスを追加してやる必要があるので注意が必要です…。

contentにはTailwindCSSが含まれるファイルのパスを指定します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
}

themaでは元々存在するtailwindのスタイルを上書きしたり、追加できます。

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  theme: {
    colors: {},
    fontFamily: {},
    extend: {
      spacing: {},
      borderRadius: {}
    }
  }
}

presetsには、独自のカスタム基本構成を指定することができます。

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('@acmecorp/base-tailwind-config')
  ],
  theme: {},
}

prefixオプションを使用すると、Tailwindが生成したすべてのユーティリティクラスにカスタムプレフィックスを追加できます。

/** @type {import('tailwindcss').Config} */
module.exports = {
  prefix: 'tw-',
}

名前の競合が発生する可能性のある既存のCSSの上にTailwindCSSを重ねる場合に非常に便利です。

出力されるcss
.tw-text-left {
  text-align: left;
}

.tw-text-center {
  text-align: center;
}

バリアント修飾子の場合は修飾子の後に追加されます。
負の値のダッシュ修飾子の場合は-tw-mt-8のようになります。

独自のカスタムクラスにはプレフィックスは付与されないことに注意してください…

独自のクラスにプレフィックスを付与したい場合は定義する時にプレフィックスを追加しないといけません。

importantが付与されたTailwindCCSのクラスを生成したい場合はconfigに下記の設定を追加することで可能です。

/** @type {import('tailwindcss').Config} */
module.exports = {
  important: true,
}

サードパティーのJSライブラリを利用する場合importantオプションを設定しているとJSによってインラインで付与されたスタイルが無効になり、意図したデザインが崩れる可能性もあります。

/** @type {import('tailwindcss').Config} */
module.exports = {
-  important: true,
+  important: '#app', 
}

!を先頭につけることでimportantを設定することが可能です。

<p class="!font-medium">
<div class="sm:hover:!tw-font-bold">

修飾子とユーティリティクラスのセパレーターをカスタムすることが可能です。

/** @type {import('tailwindcss').Config} */
module.exports = {
  separator: '_',
}

ユースケースとしては、class名に特殊記法をサポートしていないテンプレート言語を利用する場合などが想定されます！

corePluginsではプロジェクトには必要がないクラスを無効にできます。
無効にする場合はオブジェクトを提供します。
セーフリストにする場合は配列、全てを無効にする場合は空配列を指定します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  corePlugins: {
    float: false,
    objectFit: false,
    objectPosition: false,
  }
}

// セーフリストを追加したい場合
module.exports = {
  corePlugins: [
    'margin',
    'padding',
    'backgroundColor',
  ]
}

// TailwindCSSを無効にする
module.exports = {
  corePlugins: []
}

コアプラグインの一覧はドキュメントのコアプラグインのセクションにありますので必要があれば確認してみてください。

TailwindCSSは@configディレクティブを利用してCSSのエントリポイントに使用する構成ファイルを指定することが可能です。

@config "./tailwind.site.config.js";

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

定義したtailwind.configにアクセスするには下記のように記述すると可能です！

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

const fullConfig = resolveConfig(tailwindConfig)

fullConfig.theme.width[4]

TypeScript型を手動で構成するには、構成オブジェクトの上に型注釈を追加するだけです。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Content

TailwindCSSは、すべてのファイルをスキャンしてクラス名を検索し、それらのスタイルに対応するすべての CSSを生成します。

プロジェクト内のTailwindクラス名を含むすべてのファイルについて認識させるためにcontent構成ファイルのセクションで、ファイルへのパスを記述します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}'
  ],
}

ファイルパターンは下記の記号が使えます。

記号 意味
* スラッシュと隠しファイル以外の文字に一致させる
** 0個以上のディレクトリに一致させる
{} オプションのリストと一致させるには、値をカンマで区切って使用

パスはファイルではなくプロジェクトのルートを基準とするため、プロジェクトのルートを基準としたパスを記述する必要があります。

Tailwindは内部でfast-globライブラリが使用されているので上記の表以外にもサポートされているので詳細を知りたい方はgithubを確認してください！

避けるべきパスの設定方法

パフォーマンスの観点から広い範囲指定は避けましょう。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './**/*.{html,js}',
  ],
}

CSSファイルはスキャンさせないように設定します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.css',
  ],
}

また実装する時にクラス名を動的に作成してしまうとTailwindはクラスを検知できないので注意が必要です。

クラス名が検知されない例
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
<button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>

相対パスの利用

relativeプロパティをtrueに設定します。
tailwind.configファイルの対して相対的なパスで指定できます。

module.exports = {
  content: {
    relative: true,
    files: [
      './pages/**/*.{html,js}',
      './components/**/*.{html,js}',
    ],
  },
}

非絶対的なコンテンツパスを使用することで、tailwind.configファイルが配置されている場所に関係なく、同じパス構造を持つ他のプロジェクトでも同じ設定を再利用できます。これは、開発者がプロジェクト間でコードを共有したり、異なる環境（開発、本番など）で同じ設定を適用したい場合に便利です。

This will likely become the default behavior in the next major version of the framework.

こちらの設定は次のメジャーバージョンでは相対的なパスで指定する設定がデフォルトの動作になる可能性があるとのことです。

生コンテンツのスキャンとセーフリスト＆ブラックリスト

ファイルではなくコンテンツをスキャンしないといけない場合はrawを設定すれば可能です。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    { raw: '<div class="font-bold">', extension: 'html' },
  ],
}

ただ、rawを利用することに有効な例は少ないようで、safelistを利用するのが一般的だそうです。
正規表現で指定することも可能です。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  safelist: [
    'bg-red-500',
    'text-3xl',
    'lg:text-4xl',
    {
      pattern: /bg-(red|green|blue)-(100|200|300)/,
    },
  ]
}

safelistは、サイトがユーザー生成コンテンツを表示していて、サイトのソースに存在しない可能性のあるTailwindクラスのセットをユーザーがコンテンツ内で使用できるようにしたい場合利用します。

blocklistを利用するとコンテンツ内で検出された特定のクラスを無視するように指示できます。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  blocklist: [
    'container',
    'collapse',
  ],
}

ファイル形式がマークダウンの場合は、スキャンする前にHTMLへ変換されることが望ましいです。
その場合はtransformを利用します。

const remark = require('remark')

module.exports = {
  content: {
    files: ['./src/**/*.{html,md}'],
    transform: {
      md: (content) => {
        return remark().process(content)
      }
    }
  },
}

Theme

tailwind.configにthemeを定義するとカラー、タイプスケール、フォント、ブレークポイント、境界線の半径の値などを定義できます。

定義できるthemeの一覧はページ下部に表示されています。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      sm: '480px',
    },
    colors: {
      'blue': '#1fb6ff',
    },
  }
}

DEFAULTのキーの利用

DEFAULTを使用すると、サフィックス（接尾辞）のないクラスが作成されます。

extendの利用

extendを利用すると新しいクラスとして定義できます。
theme直下に定義するとデフォルトのthemeが上書きされるので注意しましょう。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // デフォルトテーマをオーバーライド
    opacity: {
      '0': '0',
      '20': '0.2',
      '40': '0.4',
    },
    // デフォルトテーマに追加
    extend: {
      fontFamily: {
        display: 'Oswald, ui-serif',
      }
    }
  }
}

指定されなかったキーはデフォルトのThemeが適用されます。
逆にデフォルトのキーの値を全てオーバーライドしたい場合は全てのキーをtheme直下で指定します。

themeの他の値を参照したい場合

テーマ内の他の値を参照したい場合はthema()を使います。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    backgroundSize: ({ theme }) => ({
      contain: 'contain',
      ...theme('spacing')
    })
  }
}

この方法はトップレベルのthemeのキーのみで利用でき、
ここの値では利用できません。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
-    fill: {
-      // ここでは使えない
-      gray: ({ theme }) => theme('colors.gray')
-    }
+    // themeのトップレベルキーでのみ利用できる
+    fill: ({ theme }) => ({
+      gray: theme('colors.gray')
+    })
  }
}

特定のコアプラグインのクラスを生成したくない場合

コアプラグイン名をキーにしてfalseを設定します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  corePlugins: {
    opacity: false,
  }
}

下記のようにthemeの中でキーに対して空のオブジェクトを設定する方法は推奨されていません。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    opacity: {},
  }
}

Customizing Screens

Tailwindのブレイクポイントはmim-widthで設定されます。
デフォルトのブレイクポイント完全に置き換えるときはtailwind.configのtheme直下に記述します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }
      'md': '768px',
      // => @media (min-width: 768px) { ... }
    }
  }
}

定義されたキー以外は利用できなくなるので注意してください、

一部だけ上書きしたい場合にはextendの直下にscreensを定義して記述を追記します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        'lg': '992px',
        // => @media (min-width: 992px) { ... }
      },
    },
  },
}

小さいブレイクポイントを追加するときは注意が必要

大きいブレイクポイントを追加する場合はextendの直下にscreensを定義することで可能です。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '1600px',
      },
    },
  },
}

ただ、小さいブレイクポイントをextendで追加しても動作しません。
それはextendが、ブレークポイントリストの最後に追加するためです。

なので小さいブレイクポイントを追加する場合は小さいものから順番に並べる必要があるためtheme直下に上書きする形式で記述します。

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    screens: {
      'xs': '475px',
      ...defaultTheme.screens,
    },
  },
}

スクリーン名のカスタム

xsなどではなく独自でカスタム名を設定できます。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }
      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

最大幅のブレイクポイントを設定する

TailwindCSSのブレイクポイントはmin-widthを設定されます。
max-widthでブレイクポイントを設定することもできます。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      '2xl': {'max': '1535px'},
      // => @media (max-width: 1535px) { ... }
       'xl': {'max': '1279px'},
      // => @media (max-width: 1279px) { ... }
  }
}

最大幅を定義するときは降順で定義する必要があります。
min-widthとmax-width両方指定する場合には、minも合わせて定義します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': {'min': '640px', 'max': '767px'},
      // => @media (min-width: 640px and max-width: 767px) { ... }
      'md': {'min': '768px', 'max': '1023px'},
      // => @media (min-width: 768px and max-width: 1023px) { ... }
    },
  }
}

複数の範囲のブレイクポーンとを設定したいときは下記のように設定します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '500px',
      'md': [
        {'min': '668px', 'max': '767px'},
        {'min': '868px'}
      ],
    }
  }
}

767pxを超えて868pxまでの間はsmで設定したスタイルが適用されます。
その後868pxになればmdで設定したスタイルが適用されるようになります。

rawを使って定義することでメディアクエリを独自に定義できます。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        'tall': { 'raw': '(min-height: 800px)' },
        // => @media (min-height: 800px) { ... }
      }
    }
  }
}

Customizing Colors

カラーの設定をカスタマイズする場合は、theme直下のcolorsキーで定義します！

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
       'white': '#ffffff',
       'purple': '#3f3cbb',
    },
    extend: {
      colors: {
        brown: {
          50: '#fdf8f6',
          100: '#f2e8e5',
        },
      }
    },
  }
}

theme.colorsに定義するとデフォルトのカラーパレットを置き換えられます。
デフォルトのカラーパレットに色を追加したい場合はtheme.extendの直下にcolorsをキーとしてオブジェクトを定義します。
定義したカラーはテキスト、境界線、背景色で利用できます。

whiteの部分をprimaryなどのセマンティックな命名を利用できます。

同じパレットの中に色の種類がある場合はネストすることで実現できます。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      'tahiti': {
        light: '#67e8f9',
        DEFAULT: '#06b6d4',
        dark: '#0e7490',
        100: '#cffafe',
        200: '#a5f3fc',
        300: '#67e8f9',
      },
    },
  },
}

bg-tahiti-300と記述することでカラーを指定できます。
また、DEFAULTで定義するとサフィックスのないbg-tahitiでカラーを指定できる値を定義できます。

デフォルトの色を使用する

tailwindcss/colorsファイルをインポートすることでtailwindがデフォルト定義されているカラーを利用できます。

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      black: colors.black,
      white: colors.white,
    },
  },
}

CSS変数を使用する

CSS変数を利用してカラーを定義する場合、不透明度修飾子text-blue-600/80のように/80で不透明度を設定するためには下記のように実装します。

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

@layer base {
  :root {
-    --color-primary: rgb(255 115 179);
+    --color-primary: 255 115 179;
  }
}

次にtailwind.configの設定を変えます。

module.exports = {
  theme: {
    extend: {
      colors: {
-        primary: 'var(--color-primary)',
+        primary: 'rgb(var(--color-primary) / <alpha-value>)', 
      }
    },
  },
}

Customizing Spacing

Spacingはtheme直下にspacingをキーとしてオブジェクトを定義します。
theme直下に定義するとデフォルトのSpacingが上書きされます。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    spacing: {
      '1': '8px',
      '2': '12px',
    }
  }
}

拡張するときはextendの直下にspacinngをキーとしてオブジェクトを定義します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      spacing: {
        '13': '3.25rem',
        '15': '3.75rem',
      }
    }
  }
}

Plugins

プラグインを利用する場合はtailewindcss/pluginをimportして関数を呼び出して利用します。

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities, addComponents, e, config }) {
      // Add your custom styles here
    }),
  ]
}

npm経由でインストールして利用できる公式のプラグインもあります。

/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/container-queries'),
  ]
}

utilitiesレイヤーにクラスを追加する

addUtilitiesとmatchUtilitiesを使うとTailwindのutilitiesレイヤーに新しいスタイルを登録できます。

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.content-auto': {
          'content-visibility': 'auto',
        },
      })
    })
  ]
}

matchUtilitiesを利用するとthemeに定義した値をマップしてユーティリティクラスとして定義する時に利用します。

const plugin = require('tailwindcss/plugin')

module.exports = {
  theme: {
    tabSize: {
      1: '1',
      2: '2',
      4: '4',
      8: '8',
    }
  },
  plugins: [
    plugin(function({ matchUtilities, theme }) {
      matchUtilities(
        {
          tab: (value) => ({
            tabSize: value
          }),
        },
        { values: theme('tabSize') }
      )
    })
  ]
}

上記のように定義するとtab-1やtab-4をclassとして使えます。
この方法で定義するとtab-[13]のような任意の値もサポートされます。

prefixとimportanatの利用

tailwind.configのに設定を追加すると自動で追加してくれます。

/** @type {import('tailwindcss').Config} */
module.exports = {
  prefix: 'tw-',
  important: true,
}

上記の設定でCSSは下記のようにスタイルを生成されます。

.tw-content-auto {
  content-visibility: auto !important;
}

セレクター内のクラスにもプレフィックスが付与されます。

const plugin = require('tailwindcss/plugin')

module.exports = {
  prefix: 'tw-',
  plugins: [
    plugin(function({ addComponents }) {
      const components = {
        '.navbar-inverse a.nav-link': {
            color: '#fff',
        }
      }

      addComponents(components)
    })
  ]
}

設定したプレフィックスは、navi-linkにも付与されます。

.tw-navbar-inverse a.tw-nav-link {
    color: #fff;
}

コンポーネントの追加

addComponentsを利用することで新しいスタイルを登録できます。

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addComponents }) {
      addComponents({
        '.btn': {
          padding: '.5rem 1rem',
          borderRadius: '.25rem',
          fontWeight: '600',
        },
      })
    })
  ]
}

baseレイヤーに新しいクラスを追加する

addBaseを利用して追加します。

const plugin = require('tailwindcss/plugin')

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

baseはdivのようなセレクタをターゲットのすることを目的にしているため、prefixやinportantは付与されません。

バリエーションの追加

独自のカスタム修飾子を定義できます。

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addVariant }) {
      addVariant('optional', '&:optional')
      addVariant('hocus', ['&:hover', '&:focus'])
      addVariant('inverted-colors', '@media (inverted-colors: inverted)')
    })
  ]
}

上記のように定義した場合下記のように利用できます。

<form class="flex inverted-colors:outline">
  <input class="optional:border-gray-300" />
  <button class="bg-blue-500 hocus:bg-blue-600">...</button>
</form>
ダイナミックバリアント

matchVariantを利用してdata-*やaria-*のような新しいバリアントを登録できます。

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

module.exports = {
  plugins: [
    plugin(function({ matchVariant }) {
      matchVariant(
        'nth',
        (value) => {
          return `&:nth-child(${value})`;
        },
        {
          values: {
            1: '1',
            2: '2',
            3: '3',
          }
        }
      );
    })
  ]
}

新しく追加したバリアントでは[]を利用した任意の値も指定できます！

<div class="nth-[3n+1]:bg-blue-500">

親と兄弟の状態

カスタム修飾子は、親と兄弟の状態修飾子で利用するには、個別のバリアントとして登録する必要があります。

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

module.exports = {
  plugins: [
    plugin(function({ addVariant }) {
      addVariant('optional', '&:optional')
      addVariant('group-optional', ':merge(.group):optional &')
      addVariant('peer-optional', ':merge(.peer):optional ~ &')
    })
  ]
}

記述のルールとしてクラスの最終セレクターに1回だけ表示されるように記述する必要があるとのことです。

ちなみに:mergeはTailwindCSSが用意しているカスタムディレクティブで、たくさんバリアントが重なった場合にtailwind.configでまとめられます。

Presets

presetsを利用して別で定義した構成をデフォルトの構成とマージして利用できます。
複数の別ブランドのTailwindプロジェクトを管理する場合に便利です。

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('@acmecorp/tailwind-base')
  ],
  // ...
}

デフォルトを無効にするにはpresetsを空にすることで可能です。
tailwind.configがマージされる時、以下の項目は置き換えられます。

  • content
  • darkMode
  • prefix
  • important
  • variantOrder
  • separator
  • safelist

それ以外の項目に関しては、別の挙動になるので確認しておきましょう。

複数のpresetsを利用する場合

presetsで複数指定する場合注意が必要です。

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('@acmecorp/configuration-a'),
    require('@acmecorp/configuration-b'),
  ]
}

上記のように複数設定した場合、それぞれでカラーパレットを提供されていたとき後に定義された方が有効になります。

Preflight

Tailwindで定義されているいわゆるリセットCSSです。
@tailwind baseを記述すれば自動的に設定されます。

Tailwindのpreflightが実行していることは下記の通りです。

  • マージンの削除
  • 見出しスタイルの無効化
  • リストスタイルの無効化
  • borderスタイルの無効化
  • 画像にはdisplay: block、アスペクト比を保つための設定

リストはスタイルが無効化されている場合、VoiceOverによってリストとして認識されません。
アクセシビリティを考慮する場合はrole属性を追加しましょう。

<ul role="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

preflightを反映したくない場合は、tailwind.configの設定で無効にできます。

module.exports = {
  corePlugins: {
    preflight: false,
  }
}

設定や仕様のパートが終わり次からTailwindで利用できるクラスについてです。

Tanilwindで利用できるクラス

Tailwindで利用できるクラスは下記のようにカテゴリで分けられています。
基本的にtailwindの命名規則について書かれているのであえてまとめることはしないでおこうと思います。

ただ、tailwind特有の作法のようが書かれていた場合、抜粋してまとめておこうと思います。

  • Layout
  • Flexbox & Grid
  • Spacing
  • Sizing
  • Typography
  • Backgrounds
  • Border
  • Effects
  • Filters
  • Tables
  • Transitions & Animation
  • Transforms
  • Interactivity
  • SVG
  • Accessibility

Container

コンテナをデフォルトでセンタリングしたい場合は下記のように設定すると実現できます。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    container: {
      center: true,
    },
  },
}

水平paddingを追加したい場合は、paddingを利用します。
また、ブレイクポイントごとにpaddingを設定する場合はDEFAULTとブレイクポイントに対応したあたいを定義します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    container: {
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
      },
    },
  },
};

Overscroll Behavior

スクロールコンテンツがスクロールし終えると親のコンテンツがスクロールし始めます。
overscroll-containを設定すると

overscroll-contain.gif

さらに、一番下までスクロールすると跳ね返るような動作をoverscroll-noneを設定すると動作を削除できます。

Spacing

space-*ユーティリティは分割ユーティリティとはペアリングできない用に設計されているので利用時に注意が必要です。

Transforms

transform-gpuを追加することでハードウェアアクセラレーション2を強制できます。
ハードウェアアクセラレーションを強制することで、アニメーションがよりスムーズになり読み込み時間が短縮され、全体的なパフォーマンスの向上が見込めます。

Official Plugins

  • tailwindcss-typography
    • proseMarkdownからレンダリングされたHTMLやCMSから取得されたHTMLなど、制御できない通常のHTMLに美しいタイポグラフィのデフォルトを追加するために使用できるクラスのセットを提供
  • tailwindcss-forms
    • フォームスタイルのリセットを提供。ユーティリティを使用してフォーム要素を簡単に上書きできるようにするプラグイン
  • tailwindcss-aspect-ratio
    • 要素に固定のアスペクト比を与えるための構成可能なAPIを提供するプラグイン
  • tailwindcss-container-queries
    • コンテナクエリ用のユーティリティを提供するTailwindCSSv3.2+用のプラグイン

  1. @tailwindで定義されるbase、components、utilitiesの3つのレイヤーのこと ↩ ↩2

  2. GPUアクセラレーションとも呼ばれます。プロセッシングユニット(GPU)を使用して、アプリ内の視覚要素のレンダリングを高速化する機能です。 ↩

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
2