❔

Tailwind CSSを使ってはてなブログのテーマを作ってみる

ik2m

2025/12/15に公開

Tailwind CSS

はてなブログ

tech

Social Databank Advent Calendar 2025 の16日目です。

こんにちは、ik2mです。

皆さんはTailwind CSSが好きでしょうか。私は大好きです。
特にあらかじめ用意されたわずかなデザイントークンにより、膨大な選択肢から整理されたスタイルを提供してくれる点がいいですよね。

例えば、文字サイズを決める際、通常は12pxにするか14pxにするか、あるいは16pxか18pxか……と様々な値から選ばなければなりません。
しかしTailwind CSSではtext-baseやtext-smといったユーティリティクラスで「とりあえず」のサイズを決定できます。
色やスペーシングについても同様で、無限にある選択肢の中から悩む苦労が低減されます。

この点が特に魅力的で、最近は個人開発でも専らスタイリングにTailwind CSSを使用しています。

そして先日、個人的に作成したはてなブログのテーマもTailwind CSSで書いてみました。
今回はそこで得た知見をまとめます。

💡 はてなブログのテーマをTailwind CSSで書きたいな

はてなブログは、自分で作成したCSSファイルを「デザインテーマ」としてインストールできます。
あらかじめ用意されたCSSクラスにスタイルを指定する仕組みです。

例えばブログのタイトルを装飾したいときは、このようにクラスへスタイルを指定します。

#blog-title {
	font-size: 1.25rem;
}

さて、これをTailwind CSSで書きたいところですが、ここで疑問が生まれます。
「Tailwind CSSってhtmlにtext-smなどのユーティリティクラスを付与してスタイルを指定するものでしょ？自分でCSSクラスを付与できないのにTailwind CSSが使えるの？」

確かにはてなブログはHTMLを直接編集できないため（カスタムHTMLを除く）、Tailwind CSS の「ユーティリティクラスをHTMLに書く」方法はそのまま使えません。
しかし、Tailwind CSSの@applyディレクティブを活用すれば、これを解決できます。

#blog-title {
	@apply text-xl;
}

上記のように、@apply ディレクティブを利用することで、はてなブログのCSSクラスへTailwindCSSのスタイルを指定できます。

📦 公式のテンプレート「Boilerplate」

無からテーマ開発環境を用意してもいいですが、はてなブログは公式で「Hatena-Blog-Theme-Boilerplate」というリポジトリを公開しています。

このテンプレートには、はてなブログのテーマ開発に必要な環境構築やビルド設定があらかじめ用意されています。
テーマ開発の出発点として活用できる便利なリポジトリです。

ただし、SCSS×Viteで書かれています。
今回はこちらをViteのホットリロードやビルド構成は残しつつ、SCSSをすべて削除し、Tailwind CSSで書き換えることにします。

なぜSCSSと混在させないの？

Tailwind CSSの公式ドキュメントには下記のように記載されています。
Tailwind CSS v4.0 is a full-featured CSS build tool designed for a specific workflow, and is not designed to be used with CSS preprocessors like Sass, Less, or Stylus.
Think of Tailwind CSS itself as your preprocessor — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus.
Since Tailwind is designed for modern browsers, you actually don't need a preprocessor for things like nesting or variables, and Tailwind itself will do things like bundle your imports and add vendor prefixes.
訳）
Tailwind CSS v4.0 は、特定のワークフロー向けに設計されたフル機能の CSS ビルド ツールであり、Sass、Less、Stylus などの CSS プリプロセッサで使用するようには設計されていません。
Tailwind CSS 自体をプリプロセッサとして考えてください。Stylus で Sass を使用しないのと同じ理由で、Tailwind を Sass と一緒に使用しないでください。
Tailwind は最新のブラウザ向けに設計されているため、ネストや変数などのプリプロセッサは実際には必要なく、Tailwind 自体がインポートのバンドルやベンダー プレフィックスの追加などの処理を実行します。
このように、Tailwind CSSはSCSS(Sass)との混在は推奨されていません。
また、SCSSで便利だった構文は、ある程度Tailwind CSS がサポートしています。

むしろSCSSを残すと構成が複雑になり、管理が難しくなります。

では boilerplate テンプレートを Tailwind CSS 用に書き換えていきましょう。

🔄 BoilerplateをTailwind CSSで書き換える

完成形はこちらのリポジトリになります。

書き換えの全体像

行う作業は大きく分けて2つです

viteがtailwindcssをコンパイル可能にする
ソースとなるファイルを.scssから.cssに変更する

置き換えイメージ Before

置き換えイメージ After

特に、.scssと.cssの書き換えに関しては、SCSS版のディレクトリ構造と同じ構造で書き換えることを目指しました。
以下のようにソースとなるcssファイルを作成します。

/** Before **/
scss/
├─ lib/
│  ├─ _core.scss
│  └─ _variable.scss
└─ boilerplate.scss

/** After **/
src/
├─ lib/
│  ├─ _core.css
│  └─ _variable.css
└─ boilerplate.css

※（必須ではありませんが）ソースのファイルがSCSSではなくなったので、ディレクトリ名もsrcに変えています。

package install

Tailwind CSS関連のnpmパッケージをinstallします。

npm i tailwindcss @tailwindcss/vite -D

vite.config.js

以下のような書きかえを行います。

pluginsにtailwindcssを追加
inputにsrc/boilerplate.cssを指定

vite.config.js

import { defineConfig } from "vite";
import autoprefixer from "autoprefixer";
+import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
+  plugins: [tailwindcss()],
  build: {
    rollupOptions: {
-      input: ["scss/boilerplate.scss"],
+      input: ["src/boilerplate.css"],
      output: {
        assetFileNames: ({ name }) => name,
      },
    },
    outDir: "build",
    cssMinify: false,
  },
  css: {
    devSourcemap: true,
    postcss: {
      plugins: [autoprefixer()],
    },
  },
});

SCSSの構文をTailwind CSSを使って書き換える

さて、次はこの新しく作ったsrc/boilerplate.cssなどのソースファイルの中身に注目します。
これらはCSSファイルであるため、SCSS版のままのソースだとビルドに失敗します。そのため、中身のソースもTailwind CSSの構文で書き換えなければなりません。

実際のboilerplateの一部を例に、SCSSからTailwind CSSへの書き換えを紹介します。

書き換え全体像を見たい方はこちらへ👇

変数

変数部分はTailwind CSSのテーマ変数という機能を使って書き換えることができます。
テーマ変数とはテーマとして定義可能なCSS変数で、定義することでその変数を用いたユーティリティクラスを呼び出すことができます。

lib/_variable.scss

// Font
$font-family-base: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic';

// Background color
$background: #fff;

// Media Queries
$mq-xs: "(max-width: 480px)";

lib/_variable.css

@theme {
  /* Font */
  --font-sans: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic';

  /* Background color */
  --color-background: #fff;

  /** Media Queries **/
  --breakpoint-xs: 480px;
}

例えば、このようにテーマ変数を書くことで、background-colorに--color-backgroundのCSS変数を適用したいとき

@apply bg-background

と書くことで呼び出すことができます。

ブレークポイント

ブレークポイントの変数を使ったメディアクエリは、ユーティリティ名の前に sm:,md:といったブレークポイントの変数名のprefixを付けることで表現できます。

lib/_core.scss

#blog-title {
    margin: 2em 0;
    text-align: center;
    @media #{$mq-sm} {
        margin: 3em 0;
        text-align: left;
    }
}

lib/_core.css

  #blog-title {
    @apply mx-0 my-8 text-center sm:my-12 sm:text-left;
  }

ほかにも@variantディレクティブでも表現できます。（個人的にはこちらのほうがネストをSCSSに寄せることができるため好みです。）

lib/_core.css

  #blog-title {
    @apply mx-0 my-8 text-center;

    @variant sm {
      @apply my-12 text-left;
    }
  }

そのほかの変更点

ソースのファイルが変わったことにより、開発用ブログで呼び出すlinkタグも書き換える必要があります。

 <script type="module" src="http://localhost:5173/@vite/client" crossorigin="anonymous"></script>
-<link rel="stylesheet" type="text/css" href="http://localhost:5173/scss/boilerplate.scss" crossorigin="anonymous" />
+<link rel="stylesheet" type="text/css" href="http://localhost:5173/src/boilerplate.css" crossorigin="anonymous" />

✅ まとめ

以上のように、はてなブログ公式のboilerplateをもとにTailwind CSSでのCSS開発環境を構築できました。
もしかするとSCSSでしか書けない処理があるのではないか、と不安に思うこともありましたが、実際に取り組んでみるとスムーズに置き換えることができました。
𝑻𝒂𝒊𝒍𝒘𝒊𝒏𝒅 𝑪𝑺𝑺 𝑳𝒐𝒗𝒆𝒓の方に参考になれば幸いです。ありがとうございました！

ソーシャルデータバンクテックブログ

ソーシャルデータバンク株式会社の開発チームです。インフラ、品質、UI/UX、DevOpsなど様々な活動に取り組んでいます。

💡 はてなブログのテーマをTailwind CSSで書きたいな

📦 公式のテンプレート「Boilerplate」

🔄 BoilerplateをTailwind CSSで書き換える

書き換えの全体像

package install

vite.config.js

SCSSの構文をTailwind CSSを使って書き換える

変数

ブレークポイント

そのほかの変更点

✅ まとめ

Discussion