Tailwind CSSの初歩カスタマイズ

同一のTailwindクラス名を使い回す: 再利用スタイルについて

同じ複数のTailwindクラス名を割り当てることが何度もある場合など、複数の同一クラス名を使いまわしたい場合にどうするか？について。

簡易的な回避策

TailwindCSS公式Docsでは簡易的な方法として、次の方法が説明されています。

マルチカーソルで力技
CSSループ

Reusing Styles - Tailwind CSS

Tailwind encourages a utility-first workflow, where designs are implemented using only low-level utility classes. This is a powerful way to avoid premature abstraction and the pain points that come with it. But of course as a project grows, you'll inevitably find yourself repeating common utility combinations to recreate the same design in many different places.

tailwindcss.com

@applyを用いてクラス抽出を行う（おすすめ）

おすすめなのは@applyを用いてクラス抽出を行う方法。

Reusing Styles - Tailwind CSS

tailwindcss.com

ディレクティブを設定した src/input.cssに下記のように抽出クラスを記述します。

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

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

input.css

上記を適用させるHTMLは下記になります。

<button class="btn-primary">
  Save changes
</button>

CSSに記述する @layer components についての詳細は下記。

Functions & Directives - Tailwind CSS

Directives are custom Tailwind-specific at-rules you can use in your CSS that offer special functionality for Tailwind CSS projects. Use the @tailwind directive to insert Tailwind's base, components, utilities and variants styles into your CSS. Use the @layer directive to tell Tailwind which "bucket" a set of custom styles belong to.

tailwindcss.com

クラス名ではなく直接CSSスタイル名にTailwindデフォルトクラスを割り当てたい場合

クラス名ではなく直接CSSスタイル名にTailwindデフォルトクラスを割り当てたい場合、ディレクティブを記述しているsrc/input.cssに下記のように @layer base と記載して、その中にCSSスタイル名に割り当てるTailwindクラス名を記述します。


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

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

input.css

コンポーネントとしてインクルードされたスタイルをカスタマイズする場合

たとえば .btn-blue クラスとして利用しているコンポーネントをカスタマイズする場合には、下記のように @layer componentsと記述して、その中で該当クラスのカスタマイズを行います。

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

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

input.css

Adding Custom Styles - Tailwind CSS

Often the biggest challenge when working with a framework is figuring out what you're supposed to do when there's something you need that the framework doesn't handle for you. Tailwind has been designed from the ground up to be extensible and customizable, so that no matter what you're building you never feel like you're fighting the framework.

tailwindcss.com

ブレイクポイントのスクリーンサイズをカスタマイズ

Customizing Screens - Tailwind CSS

You define your project's breakpoints in the theme.screens section of your tailwind.config.js file. The keys become your responsive modifiers (like md:text-center), and the values are the min-width where that breakpoint should start. The default breakpoints are inspired by common device resolutions: Feel free to have as few or as many screens as you want, naming them in whatever way you'd prefer for your project.

tailwindcss.com

tailwind設定ファイル（tailwind.config.js）のtheme設定に、下記のようにscreens属性を記述します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.{html,js}"],
  theme: {
    screens: {
      sm: "480px",
      md: "765px",
      lg: "976px",
      xl: "1440px",
    },
    extend: {
  },
  plugins: [],
};

tailwind.config.js

自分で設定したカラーと独自カラーを追加

自分で命名したカラー名で、任意のカラーを追加することができます。

Customizing Colors - Tailwind CSS

Tailwind includes an expertly-crafted default color palette out-of-the-box that is a great starting point if you don't have your own specific branding in mind.

tailwindcss.com

下記はHSLでカラーを指定し、命名した例。HEXやRGBAでも指定が可能です。

theme拡張設定として記述。（theme > extend ）

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.{html,js}"],
  theme: {
    },
    extend: {
      colors: {
        strongCyan: "hsl(171, 66%, 44%)",
        lightBlue: "hsl(233, 100%, 69%)",
        darkGrayishBlue: "hsl(210, 10%, 33%)",
        grayishBlue: "hsl(201, 11%, 66%)",
      },
  },
  plugins: [],
};

tailwind.config.js

このように記述することで、フォントカラーや背景色としてTailwindクラスとして利用可能です。

<h3 class="text-darkGrayishBlue">
Text-Color: DarkGrayishBlue
</h3>

<a href="#" class="bg-strongCyan">Background Color: StrongCyan</a>

外部フォントを読み込みTailwindCSSクラスのフォントとして利用できるように

TailwindCSSデフォルトのフォントとは異なるフォントを設定することが可能です。

CDN経由でGoogleフォントを読み込み、そのフォントをTailwindで利用するフォントとして適用させる方法を紹介します。

GoogleフォントをCDNから参照する

まず、外部フォントを利用したいHTMLファイル内にlinkタグとしてCDNインポートの参照を記述します。

<head>
...
<link rel="stylesheet" href="./dist/output.css" />
<!-- Google Fonts Bai -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;600&display=swap"
      rel="stylesheet"
    />
<title> Document </title>
</head>

index.html

Tailwind設定ファイルにフォント設定を追加

次に、Tailwind設定ファイルで適用させるフォントクラス名を指定します。

sansフォントを指定した際に、読み込んだGoogleフォントを適用させるようTailwind設定file内に記述します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.{html,js}"],
  theme: {
    },
    extend: {
      colors: {
        strongCyan: "hsl(171, 66%, 44%)",
        lightBlue: "hsl(233, 100%, 69%)",
        darkGrayishBlue: "hsl(210, 10%, 33%)",
        grayishBlue: "hsl(201, 11%, 66%)",
      },
    },
    fontFamily: {
      sans: ["Bai Jamjuree", "sans-serif"],
    },
  },
  plugins: [],
};

tailwind.config.js

TailwindCSSプラグインを導入する

TailwindCSSを利用した公式のUIコンポーネントライブラリ”TailwindUI”のコンポーネントでは、いくつかのコンポーネントで下記のような記述が見られます。

<!--
  This example requires some changes to your config:
  
  ```
  // tailwind.config.js
  module.exports = {
    // ...
    plugins: [
      // ...
      require('@tailwindcss/aspect-ratio'),
    ],
  }
  ```
-->

これは該当のUIコンポーネントがTailwindCSSプラグインの”@tailwindcss/aspect-ratio”を利用するものとなっており、そのプラグインを利用しないと意図したデザインを実現することができません。

Plugins - Tailwind CSS

Extending Tailwind with reusable third-party plugins.

tailwindcss.com

TailwindCSSプラグインの追加は、npmインストールとTailwindCSS設定ファイルへの記述という2ステップで完了します。

TailwindCSSプラグインをnpmでインストールする

例としたUIコンポーネントが必要とする”@tailwindcss/aspect-ratio”をnpmでインストールします。

$ npm install --save-dev @tailwindcss/aspect-ratio

このaspect-ratioというプラグインですが、似た名前の”tailwindcss-aspect-ratio”というプラグインもあるので注意が必要です。tailwindcssフォルダ直下にインストールさせる”@tailwindcss/aspect-ratio”を指定しましょう。

TailwndCSS設定ファイルに追加プラグイン設定を記述する

npmによるインストールが完了したら、TailwindCSS設定ファイルであるtailwind.config.jsに追加したプラグインを記述します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.{html,js}"],
  theme: {
    extend: {},
  },
// ここにプラグインを記述
  plugins: [require("@tailwindcss/aspect-ratio")],
};

tailwind.config.js

複数プラグインをインストールした場合には、リスト形式で記述しましょう。