Extracting table styles... to somewhere?

[MartinHughes-BPC]

Hi all,

I have a number of tables in my app, which should all look much the same. At the moment I'm copying lots of utility classes into each table, th, tr, td etc. It's quite messy - and if I ever want to update all of them... yikes!

Normally in this situation I'd extract to a component, however I've found with tables it gets crazy complicated, crazy fast.

In plain old css I'd just create some styles that I could apply to each table. What's the best approach to take in Tailwind?

Cheers,
Martin.

[simonswiss]

Hi Martin!

I would have suggested the component route for that. But if you feel like plain old CSS is the best tool for the job, it might be!

You could use @apply to compose utilities together for your table, th, tr etc to keep your styling consistent with the rest of the UI.

I would personally (especially if using React/Vue/Svelte/xxx) create a Table component which maybe also exports a Row and Cell components (and head, body, whatever you need), so you can compose your tables with a lot of flexibility and style the component in one place.

There is no right or wrong answer with using CSS vs abstracting a component - just a set of trade-offs between both approach you need to evaluate, and understand which one is worth pursuing 👍

[MartinHughes-BPC]

Thanks Simon - I look into the @apply route. If I'm feeling brave at any point in the near future, I might also have a look at components 👍