Your web browser is out of date. Update your browser for more security, speed and the best experience on this site.

Update your browser

We’re looking for a web developer to join our growing team. Learn more!

Styling Redactor Output with Retcon (and Tailwind)

It’s not rare to be working with a rich text field in Craft CMS and want to style some elements of the output without creating classes. This is especially true when you’re working with Utility CSS frameworks like Tailwind CSS so you’re not writing custom classes very often.

Thanks to Retcon, this is easy! In this video we’ll look at how to replace and style elements using the Retcon plugin for Craft CMS.

<div class="content">
  {{ entry.body|retcon([
    ['change', 'h1', 'h2'],
    ['attr', 'h2', { class: 'text-3xl font-bold mb-4' }],
    ['attr', 'p + p', { class: 'mt-4' }],
    ['attr', 'code', { class: 'bg-gray-300 rounded text-red-500 text-sm' }],
    ['attr', 'p > a', { class: 'text-blue-700' }]
  ]) }}