Allow disabling of default margin spacing globally

[benfurfie]

Normally I write out custom solutions similar to Typography on projects for sections of content where I don't have direct access to the markup.

I figured I'd give Typography a try, but it's currently difficult to use because the plugin adds margin to elements within the prose class. This is particularly troublesome when working with preceeding components that have a consistent margin-bottom across the site, which would need to be adjusted to account for the additional margin added by Typography, or I would need to go through everything single element and add margin overrides in the config, which defaults the object of having a customisable solution off the shelf.

Being able to disable spacing, or use an override to apply margin only to the bottom or top of elements would help massively.

[adamwathan]

Can you share a more concrete example hopefully with code/demo? I feel like the spacing is 90% of the work when styling this sort of content so if you don't need the spacing I'm curious if you're fighting an uphill battle even trying to use this at all 🤔

[mikebronner]

(I deleted my previous comment, as my problem was a typo. I am now able to override spacing as needed on each element.) My use-case for customizing all spacing is to implement consistent vertical rhythm by manually setting spacing.

[christianwiedemann]

I think also that the spacing makes the plugin quite difficult to use.
For example, an "h2" has always top and bottom margins.

From my point of view, it would make more sense to apply the spacing only to the top of the next element. So the first element of the rich text does not have any additional top spacing.

Example:

h2 + p { margin-top: 20px }
h3 + p { margin-top: 15px }
p + p { margin-top: 15px }

[deadcoder0904]

@adamwathan here's a concrete example:

<div class="prose">
  <div className="mt-10">
    <div className="pt-4 pb-8">
      <div className="text-lg text-blueGray-500">Next Article</div>
      <h3 className="pb-2 mt-0 text-xl text-blueGray-600">
        <Link href={`/essay/hello-world`}>
          <a>Hello World</a>
        </Link>
      </h3>
    </div>
    <div className="mb-48 text-xl text-blueGray-600">
      <Link href="/essays">
        <a>&larr; Back to Essays</a>
      </Link>
    </div>
  </div>
</div>

If I apply prose on the topmost div, then I get a big margin between Next Article & Hello World. The reason is that .prose h3 has a higher-specificity than mt-0 applied on h3.

How do I use prose class then? All I want is the a tag to be styled like that. I know this isn't the reason Tailwind Typography is made but would love to find a solution to this.

Here's the Tailwind Play → https://play.tailwindcss.com/ADYgiu697d

[tekacs]

I also find myself coming across a number of places where I'd love to use the other aspects provided by Tailwind Typography in contexts where the margin spacing is far too dramatic to be usable in context.

As with @deadcoder0904 I wholly appreciate that this plugin seems to be made for body sections of blogs and similar, but the adjustments are pretty great -- I would only need to be able to either reduce or kill inter-element margins in order to use this.

Ideally I would love for a reduced-margins variant (similar to the size variants) that allowed for use in cases where outside margins (above/below the global prose element) or large margins inside were somewhat reduced.

I can currently do this by adjusting margins myself, but there are quite a few elements to adjust and it's quite difficult to do it whilst preserving a tasteful look.

I also don't believe there's a way to compose reduced margins with sizes (since all of the margins are defined explicitly in terms of the em-size of the text).

For now I've gone through and manually made a copy with all margins reduced, but an official variant with tasteful spacing would really help. :)

[Vantablack]

I am facing the same issue whereby I want to remove margins for the header element.

I managed to solve it by adding important: true to tailwind.config.js file after seeing this

By default, plugin utilities automatically respect the user's prefix and important preferences.
https://tailwindcss.com/docs/plugins#prefix-and-important-preferences

Before important: true, adding m-0 to the h1 (blue border) element produces this
with the following code sample

<div class="prose max-w-none">
  <h1 class="border-2 border-green-600">This is a h1 element</h1>
  <h1 class="m-0 border-2 border-blue-600">This is a h1 element without margins</h1>
  <h1 class="border-2 border-red-600">Another h1 below</h1>
</div>

https://play.tailwindcss.com/oN85EM9thP

After important: true, adding m-0 to the h1 (blue border) element produces this

https://play.tailwindcss.com/z1GdNenVmY

It is working well so far, but I am not sure if the !important rule will have any side effects or if this is the intended method to override plugins?

[styxlab]

You can avoid important: true in tailwind.config.js by setting the margin within a style attribute like so:

https://play.tailwindcss.com/Tzy1XftmV0

That's the best solution I could come up with to solve margin spacing modifications when using the typography packages.

[adamwathan]

Going to close this as a non-goal of the project at the moment. You can add new modifiers yourself using the configuration API if you want to create classes like prose-tight that have reduced margins though:

https://github.com/tailwindlabs/tailwindcss-typography#adding-new-modifiers

If I ever end up needing that myself and building it I'll definitely consider including it by default but in the mean time I would recommend handling this in user-land.

[siam6sense]

Element modifiers
Use element modifiers to customize the style of individual elements in your content directly in your HTML:

<article class="prose prose-headings:mt-0 prose-headings:mb-0 prose-p:mt-0 prose-a:text-blue-600">
  {{ markdown }}
</article>

This makes it easy to do things like style headings, paragraphs, links to match your brand, add a border radius to images, and more.