How do apply tailwind classes across multiple pages without duplication?

[redonkulus]

For example, say I want all p tags to have a specific margin-top. Instead of adding <p class="mt-3">Blah</p> to every tag, I'd like to apply that class more generally.

I know there is the @apply solution to do it in CSS, but I read that using @apply is not really recommended. I could create a "Paragraph" component or re-useable function in my app, but that seems like overkill.

I'm curious how others are solved this very simple problem with Tailwind?

[wongjn]

Generally, I'd only want a "general" margin-top to <p> tags if they were for some prose, in which case, I'd reach for the @tailwindcss/typography plugin and use the associated classes on a parent element.

Otherwise, I'd create a "Paragraph" component or re-useable function.

Another option without using @apply would be to use theme() or "plain" CSS.

[redonkulus]

Ya my use case is an article page where I need all the <p> tags to have some spacing in between. It could be margin or line-height. Having to add the same tailwind class to every tag is a pain. I guess in some cases it makes more sense to back to plain CSS to keep it simple.

[mybearworld]

Could you use the space utilities? Play

[redonkulus]

I didn't know this existed, this could work too. Will check it out, thanks!