Tailwindで縦書き対応をする

@import "tailwindcss";

@layer components {
  .shadow-card {
    box-shadow: 8px 8px #0a5f77;
  }
  .shadow-bottom-menu {
    box-shadow: 4px 4px #0a5f77;
  }

  .writing-vertical-rl {
    writing-mode: vertical-rl;
  }
  .writing-vertical-lr {
      writing-mode: vertical-lr;
  }
  
  .writing-horizontal-tb {
      writing-mode: horizontal-tb;
  }
}

import { type Config } from "tailwindcss";
import type { PluginAPI } from 'tailwindcss/types/config'; 

export default {
  content: [
    "{routes,islands,components}/**/*.{ts,tsx}",
  ],
  darkMode: 'media', // media を選択すると端末の設定に自動で追従する
  theme: {
  },
  plugins: [
    function ({ addUtilities }: PluginAPI) {
      addUtilities({
        '.writing-vertical-rl': {
          writingMode: 'vertical-rl',
        },
        '.writing-vertical-lr': {
          writingMode: 'vertical-lr',
        },
        '.writing-horizontal-tb': {
          writingMode: 'horizontal-tb',
        },
      })
    },
  ],
  
} satisfies Config;

<p class="writing-vertical-rl">縦書きになりますyo</p>