How to align text right in table column using Tailwind Typography and Markdown parser?

[frank-laemmer]

I have this markdown :

| Category                | Share |
| ----------------------- | ----: |
| Maintenance             |   20% |
| Customer support        |   20% |
| Research & development  |   30% |

The colon character (:) will align text in the Share column right. I use Nuxt Content to render HTML. It looks like this:

<td align="right">20%</td>

But in the browser it's aligned left. That is, as far as I see, because of this rule:

.prose :where(th, td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  text-align: start;
}

I assume it's related to Tailwind Typography.

Now, if so, what's the best way to deal with this?

[frank-laemmer]

Here is a screenshot of how that looks like:

Might be related to this commit:
tailwindlabs/tailwindcss-typography@53bba7a

Based on this issue:
tailwindlabs/tailwindcss-typography#346

[wongjn]

You could apply text-align: right to the td via an arbitrary variant like:

<div class="prose … [&[align=right]]:prose-td:text-right">

Or you could adjust your Tailwind configuration:

/** @type {import('tailwindcss').Config} */
module.exports = {
  …
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            'td[align="right"]': {
              textAlign: 'right',
            },
          },
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography')
  ],
}

[frank-laemmer]

Those are both excellent Tailwind-style solution I haven't thought about so far. My solution below is less elegant. Looking forward to migrate to Tailwind 4 to have CSS configuration.

[vdsabev]

You could apply text-align: right to the td via an arbitrary variant like:

<div class="prose … [&[align=right]]:prose-td:text-right">

I had to modify the classes like this to get it to work for me:

<div class="prose [&_th[align=right]]:text-right [&_td[align=right]]:text-right">

[wongjn]

Yes, the above solution was for v3. In v4, the variants are reversed:

<div class="prose … prose-td:[&[align=right]]:text-right">

[frank-laemmer]

The solution I came up for now is to customize Nuxt Content. I created a component called ProseTd.vue (and similar ProseTh.vue) with the following content:

<template>
  <td>
    <slot />
  </td>
</template>

<style scoped>
td[align='right'] {
  text-align: right;
}
</style>

I have tested a different markdown to HTML parser and it also used align=right to render the table. So far I'll consider that a bug/regression with Tailwind Typography. At best this should work without any extra config, so the optimal answer here would be that not extra config/code is required. If I see correctly, the rule with text-align: start; was added only in April 2024 and it worked before.

There are three workarounds for the issue now.