<p dir="auto"><code class="notranslate">.text-center</code> and <code class="notranslate">.text-right</code> do not apply to table td / th elements, as the align left rule for those takes precedence.</p>
<p dir="auto">I've added this as a workaround; an alternative might be to add <code class="notranslate">!important</code> to the <code class="notranslate">.text-</code> rules</p>
<div class="highlight highlight-source-css-less notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".table th, .table td {
  &amp;.text-center { text-align: center; }
  &amp;.text-right { text-align: right; }
}"><pre class="notranslate"><span class="pl-e">.table</span> <span class="pl-ent">th</span>, <span class="pl-e">.table</span> <span class="pl-ent">td</span> {
  <span class="pl-e">&amp;</span><span class="pl-e">.text-center</span> { <span class="pl-c1">text-align</span>: <span class="pl-c1">center</span>; }
  <span class="pl-e">&amp;</span><span class="pl-e">.text-right</span> { <span class="pl-c1">text-align</span>: <span class="pl-c1">right</span>; }
}</pre></div>
<p dir="auto">Hi,</p>
<p dir="auto">The new <code class="notranslate">text-left</code>, <code class="notranslate">text-center</code> and <code class="notranslate">text-right</code> classes doesn't work on the table cells. Maybe it would be nice to add an <code class="notranslate">!important</code> hack to force alignment ?</p>