How to override content helper html tags?

Developer help
1

Hello !

I would like to override {{content}} helper html tags when I edit my text from ghost admin to add specific classes :

  • <h1>Title 1</h1> -> <h1 class="font-bold text-3xl">Title 1</h1>
  • <h2>Title 2</h2> -> <h2 class="font-bold text-2xl">Title 2</h2>
  • <h3>Title 3</h3> -> <h3 class="font-bold text-xl">Title 3</h3>
  • <p>Text</p> -> <p class="my-2">Text</p>

It’s because I use tailwindcss :wink:

Thanks :smiley:

2

Hey @johackim,

You could either use JavaScript to grab each element type and apply the Tailwind classes, or (and this would be the more sane route) create newly compiled selectors that encapsulate the styles from those classes. Maybe you could utilise this method of applying base typography to your theme?

3

Thanks :slight_smile:

1 Like