Add CSS writing-mode classes to Tailwind

[MartinHughes-BPC]

Hi Adam and team,

I've been experimenting with writing my first plugin, which adds CSS writing-mode utilities to Tailwind. This might be useful for languages that are laid out that way, but my use is far more pragmatic - they make it super simple and easy to have vertical text with other content without having to use absolute positioning, large extended borders for background color and the other complexities that ensue. They also pay nicely with other utilities such as rotate and text align so you can get the effect you want.

Here is my attempt at the plug-in:

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)
    })

And here are a couple of example of it in action:

        <!-- Default example -->
        <div class="bg-blue-200 flex">
            <div class="text-blue-50 vertical-rl bg-blue-700 p-6">
                <h1 class="text-2xl text-left">Some text</h1>
            </div>
            <div class="w-64 ml-2 p-4">
                <p>
                    Lorem ipsum dolor
                </p>
            </div>
        </div>

        <!-- Rotate the text and set the alignment -->
        <div class="bg-blue-200 flex">
            <div class="text-blue-50 vertical-rl bg-blue-700 p-6">
                <h1 class="text-2xl text-left transform rotate-180">Some text</h1>
            </div>
            <div class="w-64 ml-2 p-4">
                <p>
                    Lorem ipsum dolor
                </p>
            </div>
        </div>

[simonswiss]

That's some good stuff right there, @MartinHughes-BPC 🎉

This is a pretty neat first plugin, thanks for sharing! 👍

Just copy/pasted your plugin + example HTML in my local project, and confirming it works nicely!

That's a great example of how straightforward it is to add new utilities to Tailwind CSS.

Thanks again for sharing!

[adjenks]

I think this should just be added to tailwind by default.

[rodrigopv]

After some frustration using just transform and rotate, I think this would be the final solution as using rotation methods tend to screw up layout.

[benwoodward]

This works great, thanks. Perhaps a good idea to add browser-specific variants to the classes too:

-webkit-writing-mode: vertical-lr;
-ms-writing-mode: vertical-lr;

[wanbinkimoon]

any updates on this?

[adamwathan]

Would be cool to add for sure — the hard/slow part is always nailing down the API. Right now we're busy with higher priority things so not actively working on this, but you can use arbitrary properties for this until we add it as a feature of the framework:

<div class="[writing-mode:vertical-lr] ...">

[CodingRuo]

I have tried this with the properties, but unfortunately it does not work. At least not with writing-mode. I had to control this directly via pure css.

As you can see I have set the class but it is not recognized by Windi unfortunately.

[benwoodward]

As you can see I have set the class but it is not recognized by Windi unfortunately.

This is not something Tailwind can fix. It's a problem with Windy's compiler. I recommend leaving an issue on the Windy repo.

I use Windy too (because Tailwind's compiler is too slow in Svelte).

[ghost]

Thanks @adamwathan it works with arbitrary properties.

[mrienstra]

Related discussions:
#5237
#6845
#9240

[julienheng]

thank you so much @MartinHughes-BPC!!! I was stuck on this issue for the days. Came across this post and it solved everything. Thank you so so much and really appreciate your contribution to the community!

[robcrock]

I really appreciate this! And I agree that this should be added to Tailwind Core

[gochitashvili]

Really good solution and I am also think that it should be added to Tailwind CORE.

[domsantini]

This is incredible. Thank you!! @MartinHughes-BPC

[peteruithoven]

Just a note, if you also need to use <sub> or <sup> in vertical texts you'll probably run into issues, because Tailwind uses:

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

[peteruithoven]

For now I've solved it by adding a sub style to my writing-vertical util class:

const config = {
  // other config
  plugins: [
    plugin(({ addUtilities }) => {
      addUtilities({
        ".writing-vertical": {
          "writing-mode": "vertical-rl",
          "& sub": {
            bottom: "0",
            right: "0.25em",
          },
        },
      });
    }),
  ],
}

[peteruithoven]

Tailwind play example: https://play.tailwindcss.com/IyZMMeZFD4

<div class="m-2 flex flex-col gap-2">
  <div>Horizontal text <sub>sub</sub><sup>super</sup></div>
  <div class="flex gap-2">
    <div class="[writing-mode:vertical-lr]">Vertical text <sub>sub</sub><sup>super</sup></div>
    <div class="[writing-mode:vertical-lr]">Vertical text <sub class="-left-1 bottom-0">sub</sub><sup class="-right-1 top-0">super</sup></div>
  </div>
</div>