Tailwind CSSを用いて縦書き対応を行う際のナレッジを共有します。

ピュアCSSを使用する場合は、「writing-mode」を使用することで対応することができます。こちらのプロパティに関する資料はこちらから。今回は、前回の資料で作成した環境を用いて、Tailwind CSSに対して縦書きのプラグインを作成します。Tailwind CSSでは、一発で縦書きに関するプロパティは存在しません。ですので、Tailwind CSSで縦書き対応を行う方法を2つ紹介します。今回もGitHubのリポジトリで公開していますので、環境だけ欲しい方はこちらから覗いてみてください。目指す形はこちらです。

どもども！Tailwindと共に歩みたい新米フロントエンドエンジニア・龍ちゃんがTailwindの情報を紹介します。僕の作業記録は、こちらのライトブログで紹介しているので興味がある方は、ご一読ください。

事前準備

Tailwind CSSの環境構築は、こちらの資料を参考にしています。こちらの資料では、作業環境がGitに公開されているので、環境で試したい方はGitHubからクローンして使用してください。Tailwind CSSを用いて環境をすでに使用している方は、そのまま読み進めてください。

簡単に試す縦書き対応

こちらは、Tailwindを導入した環境があれば特に考えることもなく実装することができます。無理矢理にTailwindの書き方に合わせる場合であれば、以下のような書き方になります。

<h1 class="text-4xl [writing-mode:vertical-rl]">簡単な方法1</h1>

普通にCSSファイルを別途導入・HTMLファイルに書き込む場合は、CSSファイルを書きましょう。

<h1 class="jp-vertical">簡単な方法2</h1>
    <style>
      .jp-vertical {
        font-size: 36px;
        line-height: 40px;
        writing-mode: vertical-rl;
      }
    </style>

この場合では簡単に導入ができますが、再利用性が低いですね。style.cssに追記することで、再利用可能になりますが、できることならTailwindのプロパティで書きたいですよね。次章でその方法について紹介したいと思います。

Pluginで試す縦書き対応

こちらは、「tailwind.config.js」に追記することで実現することができます。書き方に関しては設定ファイルを読み解かないといけないので、コピー＆ペーストでより知りたくなったら戦いに行きましょう。例の設定ファイルがこちらになります。上部のpluginの宣言とpluginsの中身部分が追記となります。困った場合は、下の方のコードを丸まるコピーしましょう。

/** @type {import('tailwindcss').Config} */
    const plugin = require("tailwindcss/plugin");
    module.exports = {
      content: ["./public/**/*.{html,js}"],
      theme: {
        extend: {},
      },
      plugins: [
        plugin(function ({ addUtilities, addComponents, e, prefix, config }) {
          const newUtilities = {
            ".horizontal-tb": {
              writingMode: "horizontal-tb",
            },
            ".vertical-rl": {
              writingMode: "vertical-rl",
            },
            ".vertical-lr": {
              writingMode: "vertical-lr",
            },
          };
          addUtilities(newUtilities);
        }),
      ],
    };

こちらの設定が完了したら、普段通りにTailwindを書いていきましょう。

<h1 class="text-4xl vertical-rl">複雑な方法</h1>

このように書いたらうまく動作するかと思います。もしうまくいっていない場合は、こちらのリポジトリからクローンして、試したものと見比べてみてください。

終わりに

今回は、Tailwind CSSを用いて縦書き対応を行う際のナレッジを共有しました。縦書きは日本語の表現としてとても有用なものです。デザインとしても利用する価値がとてもあるので、新しいデザインの足掛かりにもなるかと思います。私も別記事にて、縦書きでデザインしてみたサイトがあります。こちらのライトブログぜひ読んでみてくださいね。

About 龍：Ryu 107 Articles

2022年入社で主にフロントエンドの業務でTailwindと遊ぶ日々。お酒とうまいご飯が好きで、運動がちょっと嫌いなエンジニアです。しゃべれるエンジニアを目指しておしゃべりとブログ執筆に注力中（業務もね）//

Twitter YouTube