A useful helper to add CSS classes to all of your HTML tags, created by the Bard editor.

Installs: 3 642

Dependents: 0

Suggesters: 0

Security: 0

Stars: 7

Watchers: 7

Forks: 0

Open Issues: 1


2.3.1 2021-09-30 10:08 UTC

This package is auto-updated.

Last update: 2021-11-30 10:34:14 UTC


Statamic 3.0+ Latest Version on Packagist


Classify is a useful helper to add CSS classes to your HTML tags, created by the Statamic 3 Bard editor.



  • Statamic v3
  • Laravel 8
  • PHP >= 7.4

Version Compatibility

Classify Statamic Laravel
^1.0 3.0 ^7.0
^2.0 3.0 ^8.0
^2.1 3.1 ^8.0
^2.2 3.1 ^8.0


There are two ways to install the Classify addon.

Control panel

Install Classify from the Tools > Addons section of your control panel.


Install Classify via composer:

composer require visuellverstehen/statamic-classify

Publish config file

The installation process will automatically publish the classify.php file into the config folder.



To add or change style sets, simply add or change an array with classes that should be added to the HTML tag.

'default' => [
    'h1' => 'text-2xl',
    'a'  => 'link hover:text-blue',
    'p' => 'mb-5',
    'li p' => 'mb-2 ml-4',

This example uses TailwindCSS, but you can use whatever kind of CSS you want.

Example Output

<h1 class="text-2xl">A headline</h1>
<p class="mb-5">Some text</p>

    <li><p class="mb-2 ml-4">A list item</p></li>
    <li><p class="mb-2 ml-4">A list item</p></li>
    <li><p class="mb-2 ml-4"><a class="link hover:text-blue" href="#">Klick me</a></p></li>

<p class="mb-5">Another text</p>


If you want to use the default style set, use the classify modifier.

{{ bard_text | classify }}

If you want to add multiple style sets, define those in the config file. For example:

'default' => [
'blog' => [
    'a'  => 'link hover:underline',
    'li p' => 'ml-3 font-bold',
    'p' => 'mb-5',

// Antlers view
{{ bard_text | classify:blog }}

Nested selectors (min version 2.2)

You can nest your selectors to flexible style elements in different contexts.

Let's assume you want to style links inside lists differently than a general link, you can make use of nesting:

`ul li p a` => 'my-secial-css-class-for-nested-links-in-lists`,
`a` => `a-general-link-class`,

The ordering does not matter. Classify will take care of that for you.

More about us


The MIT License (MIT). Please take a look at our License File for more information.