2023-06-29

Tailwind CSS Typography plugin

TLDR: This plugin helped me style html that was not under my control(generated by Astro from markdown). If not for plugin I would have been slightly mad at tailwind and myself.

When styling the /til/[..slug].astro page, I realized that I cannot style html content rendered by Astro. I tried using the @apply directive along with !important, which did not work as these styles were overwritten by some other reset styles in tailwindcss. As a last resort, I planned to manually reset the div’s CSS using all and style manually, which I wanted to avoid. Finally, after looking hard in Astro docs, I discovered that they can be styled using this plugin. So I added the typography colours in tailwind.config.js, and it works well to style the content you are viewing. It would have been better if this plugin had created typography styles using the existing colour scheme. I wonder how hard it would be to configure this plugin for something more complex.