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

Update your browser

May 13, 2020 • By Jake Dohm

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' }]
  ]) }}
An illustration of Donkeytail for Craft CMS + Tailwind and Alpine JS

Further Reading

Jan 19, 2022 • By Robin Mannering

A practical example of using the Donkeytail plugin with Tailwind and Alpine JS

Overview In this article we'll explore a practical example of using the Donkeytail plugin to display points of interest (pins) on an image of a lounge, highlighting the different pieces of furniture for sale and labelling the name of each item with a short description and price. We'll use Tailwind to style each Donkeytail pin, and Alpin…

Don’t let chaotic web projects get you down.

Get a web project — and a development process — that wows.

Sign up for our newsletter.

We send a few emails every month with helpful articles and resources for people who make and manage websites.