search

zeon-studio / astroplate

Astroplate is a free starter template built with Astro, TailwindCSS & TypeScript providing everything you need to jumpstart your Astro project. Get started with Astroplate and save yourself hours of work!
https://zeon.studio/preview?project=astroplate
MIT License
576 stars 176 forks source link

Target inline and block code separately in Tailwind Typography #45

Open imochoa opened 2 months ago

imochoa commented 2 months ago

Before

Screenshot from 2024-08-24 10-21-20

After

Screenshot from 2024-08-24 10-43-09

Tailwind Typography cannot currently distinguish between inline and block code.

There is also a PR open to get this plugin into upstream typography, so adding it like will probably not required at some point

What is kind of annoying is that in astro Class-based modifiers do not work with @apply directives

That means that you cannot just add @apply prose-inline-code:p-[.2em_.4em] to the src/styles/components.scss, but have to put the styles inline. That's what the astro documentation recommends anyway, but it does not look great

Can you think of a better solution here?

netlify[bot] commented 2 months ago

Deploy Preview for astroplate ready!

Name Link
Latest commit 6074cd525f7456eb123df74faefcbd86d9442574
Latest deploy log https://app.netlify.com/sites/astroplate/deploys/66c9a11bb2d28a0008bfaf2f
Deploy Preview https://deploy-preview-45--astroplate.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.