Fix for the table `text-align: start`

[lopez-marc]

After this commit, text alignment in tables no longer works as intended. It appears that text-align: start; does not apply correctly to the table tag.

To address this, I propose applying text-align: start; directly to the th and td tags, ensuring correct alignment.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tailwindcss-typography	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 10, 2024 0:41am

[adamwathan]

Hey! Can you explain more what you mean when you say it doesn't apply properly? Looking at our demo site the alignment looks correct to me and has the correct computed style:

[lopez-marc]

Thanks for the quick answer! I hope the following examples are useful to understand my point:

Before the mentioned commit was set left and this was the result:

How is currently with start the headers are centered:

This is how it looks with my proposed change:

And for debugging purposes, if I change in my PR to end:

[adamwathan]

Ah I see now, that is absolutely bizarre! 🤯 That almost seems like a browser bug but it's the same in all browsers so there must be a reason. Tweeted about it in case anyone who follows me happens to possess this arcane knowledge:

https://twitter.com/adamwathan/status/1778098728601055467

I think the reason we did this on the table element was to avoid specificity issues or something, wish I could remember exactly why but I have a vague memory of it being important 🤔 Will have to think about if there's a case where it's an issue.

[emmadesilva]

Hey @adamwathan! After updating a minor version of this plugin, the table headers in HydePHP are now center aligned instead of left aligned. This was caught by our Browserstack integration. See https://github.com/hydephp/develop/pull/1689

You can also view our public Browserstack page where this was caught https://percy.io/9d5269d1/hydephp/builds/33912142/changed/1856671999

[emmadesilva]

I can confirm that @lopez-marc's proposed changes work as intended. Here is their patch applied to the HydePHP testing fixture:

[reinink]

@lopez-marc Hey thanks for this fix! 🙏

[lopez-marc]

@reinink Happy to contribute!

[frank-laemmer]

I may have found a regression here. The rule specific rule added here prevents me to have text aligned right from a markdown table: https://github.com/tailwindlabs/tailwindcss/discussions/15863