-
-
Notifications
You must be signed in to change notification settings - Fork 4.8k
Utilities for writing-mode
#18362
rozsazoltan
started this conversation in
Show and tell
Utilities for `writing-mode`
#18362
-
Doesn't tailwind 4 support writing-mode? (LoSti)
If by "support" you mean "are there utility classes for it", then no. But you can easily just add it yourself. (Moni)
Just a quick example:
@import "tailwindcss"; @utility writing-* { writing-mode: --value('horizontal-tb', 'vertical-lr', 'vertical-rl', 'sideways-lr', 'sideways-rl'); }
<div class="flex flex-col gap-4 [&>*]:w-32 [&>*]:p-4 [&>*]:bg-sky-300"> <div class="writing-horizontal-tb">Example</div> <div class="writing-vertical-lr">Example</div> <div class="writing-vertical-rl">Example</div> <div class="writing-sideways-lr">Example</div> <div class="writing-sideways-rl">Example</div> </div>
And with your own custom namespace:
@import "tailwindcss"; @theme { --writing-normal: horizontal-tb; --writing-vertical: vertical-lr; --writing-vertical-reverse: vertical-rl; --writing-sideways: sideways-lr; --writing-sideways-reverse: sideways-rl; } @utility writing-* { writing-mode: --value(--writing-*); }
<div class="flex flex-col gap-4 [&>*]:w-32 [&>*]:p-4 [&>*]:bg-sky-300"> <div class="writing-normal">Example</div> <div class="writing-vertical">Example</div> <div class="writing-vertical-reverse">Example</div> <div class="writing-sideways">Example</div> <div class="writing-sideways-reverse">Example</div> </div>
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment