如何使用 Tailwind CSS 增加旋转文本

Question

我有这个 html 示例：

  <div class="h-screen">
    <div class="absolute inset-0 -z-1 bg-black"></div>
    <div class="flex flex-col text-white h-screen">
      <div class="flex justify-between h-full">
        <div class="flex flex-col justify-between space-y-5 w-24">
          <div class="h-2/3 bg-red-300">
            <div class="block origin-left-top transform -rotate-90">
              SUBSCRIBE AND CANCEL ANYTIME ANYWHERE
            </div>
          </div>
          <div class="flex flex-col items-center space-y-5">
            <div class="pb-5">
              <button
                class="border-white flex items-center justify-center border-2 w-10 h-10"
              >
                <i-uil-comment-alt-dots />
              </button>
            </div>
          </div>
        </div>
        <div>mid</div>
        <div class="w-24">right</div>
      </div>
    </div>
  </div>

我希望文本看起来像这样：

但由于某种原因，它并没有占用所有空间，如下所示：

Answer 1

必须将writing-mode设置为vertical-rl，然后旋转180\xc2\xb0

\n

<div className="rotate-180 bg-black text-white"\n  style={{ writingMode: 'vertical-rl' }}\n>\n  SUBSCRIBE AND CANCEL ANYTIME ANYWHERE\n</div>\n

\n

Answer 2

对于如此简单的任务来说，其中的 HTML 内容太多了。从这里开始，它将为您提供所需的基础知识

<div class="transform -rotate-90 bg-black text-white">SUBSCRIBE AND CANCEL ANYTIME ANYWHERE</div>