Tailwind CSS 縦書き対応 :writing-mode

Tailwind CSS 日本語対応
#Tailwind CSS 日本語対応
★★★ イベント情報 ★★★
◇【参加登録受付中】Kong Summit, Japan 2022◇
今年は12月15日に開催決定!最新情報とデモとともにKongと事例/ユースケースのご紹介などAPIエコノミーやマイクロサービスに関心のある開発者の方にとっては必見です。ぜひお申し込みください!イベントの詳細・お申込はこちら

★★★ Live配信告知 ★★★
◇11月29日開催 19:00~ 世界一わかりみの深いクラウドネイティブon Azure◇
テーマは「Web App for ContainersとKeycloakで最速OpenID Connect」です!

◇11月30日開催 17:00〜 知ってると ちょっと便利なコマンド集◇
知っていると少し効率の上がるようなコマンドをいくつかご紹介します!

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





ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!


ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる