JSFiddle - React, Tailwind, and code Playground

by yonatan

HTML

<body>
    <div dir="ltr">
         <h2>LTR</h2>

        <div class="box red-start"></div>
        <div class="box green red-start"></div>
    </div>
    <div dir="rtl">
         <h2>RTL</h2>

        <div class="box red-start"></div>
        <div class="box green red-start"></div>
    </div>
</body>

CSS

.box {
    width: 100px;
    height: 100px;
    margin: 10px;
    border: 10px solid blue;
    display: inline-block;
}
.green {
    border-color: green;
}
.red-start {
    border-left-color: red;
}
[dir="rtl"] .red-start {
    border-right-color: red;
    /* border-left-color: blue? green? auto? inherit? what?? */
}