TailwindCSS has an excellent typography plugin that allows you to stylize a set of elements by applying a simple class .prose to the parent container.

The Typography plugin can make a boring piece of content look amazing and easy to read. Perhaps a little demo might help. Take a look at this codepen 👇

Now, take a look at this same content that uses the typography plug-in 🧙‍♂️

Pretty cool, right!

But, what happens when you want to dyanmically include a partial or a component in the middle of your article. The content inside the component or partial will have all the .prose styles applied by default...

Well, thanks to the awesome Tailwind team, you can easily override this by applying the class of .not-prose to the parent element and all children inside will not be stylized (allowing you to apply your own styles). Here is a quick example:

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

You can see that the first <ul> element has the .not-prose class applied and it does not have the default styles applied by the typography plug-in 👏

You can learn more about the official PR of this feature here https://github.com/tailwindlabs/tailwindcss-typography/pull/205 🤙