PHPackages visuellverstehen/statamic-classify - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. visuellverstehen/statamic-classify ActiveStatamic-addon[Utility & Helpers](/categories/utility) visuellverstehen/statamic-classify ================================== A useful helper to add CSS classes to all HTML tags generated by the bard editor. v4.0.0(1mo ago)20116.8k↓31.3%9MITPHPPHP ^8.3CI passing Since Aug 20Pushed 1mo ago5 watchersCompare [ Source](https://github.com/visuellverstehen/statamic-classify)[ Packagist](https://packagist.org/packages/visuellverstehen/statamic-classify)[ RSS](/packages/visuellverstehen-statamic-classify/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (11)Versions (25)Used By (0) [![Statamic 5](https://camo.githubusercontent.com/133ea659dd6319605925acc9f85cfb2dbb79198289b62794132a2985e410429c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f53746174616d69632d76352d4646323639453f7374796c653d666f722d7468652d6261646765266c696e6b3d68747470733a2f2f73746174616d69632e636f6d)](https://statamic.com/addons/visuellverstehen/classify)[![Statamic 6](https://camo.githubusercontent.com/7dd3f615a35a036614027a1afa75bbc0ddd71d85065366e6f7e7be6252f72d48/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f53746174616d69632d76362d4646323639453f7374796c653d666f722d7468652d6261646765266c696e6b3d68747470733a2f2f73746174616d69632e636f6d)](https://statamic.com/addons/visuellverstehen/classify)[![Latest version on Packagist](https://camo.githubusercontent.com/f5a1f89f4544a0b63bf9950409acb96b2f8a0b3fc4e6d2c3c2aa5d1aea62cde3/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f76697375656c6c76657273746568656e2f73746174616d69632d636c6173736966792e7376673f7374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/visuellverstehen/statamic-classify) Classify ======== [](#classify) Classify is a useful helper to add CSS classes to all HTML tags generated by the Statamic [Bard](https://statamic.dev/fieldtypes/bard) editor. Installation ============ [](#installation) Requirements ------------ [](#requirements) - Statamic v5 || v6 - Laravel 11 || 12 || 13 - PHP 8.3+ Installation ------------ [](#installation-1) Install Classify via composer: ``` composer require visuellverstehen/statamic-classify ``` Publish config file ------------------- [](#publish-config-file) The installation process will automatically publish the `classify.php` file into the `config` folder. Usage ----- [](#usage) ### Configuration [](#configuration) 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 [](#example-output) ``` A headline Some text A list item A list item Click me Another text ``` ### Usage [](#usage-1) If you want to use the default style set, use the `classify` modifier. ``` {{ bard_text | classify }} ``` If you want to add multiple style sets, you can define those in the config file: ``` 'default' => [ // ], 'blog' => [ 'a' => 'link hover:underline', 'li p' => 'ml-3 font-bold', 'p' => 'mb-5', ], // Antlers view {{ bard_text | classify:blog }} ``` If you want to get the defined classes for a certain element, you can get them straight from your config or use the `classify` tag: ``` {{ classify:h1 }} // output: text-2xl {{ classify element="li p" }} // output: mb-2 ml-4 {{ classify:a styleset="blog" }} // output: link hover:underline ``` Usage with Blade ---------------- [](#usage-with-blade) If you wish to use classify with Blade instead of Antlers: ``` // no param is needed to use the 'default' styleset {!! Statamic::modify($bard_text)->classify() !!} {!! Statamic::modify($bard_text)->classify('blog') !!} ``` Nested selectors ---------------- [](#nested-selectors) You can nest your selectors to style elements differently in varying contexts. Let's assume you want to style links inside lists differently to 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`, ``` Classify will take care of the order, so you don't need to define the nested selector before the general selector. ### Important: Direct child relationships [](#important-direct-child-relationships) **Note:** Nested selectors use CSS direct child selectors (`>`), which means each element must be a **direct child** of the previous element in the selector. For example: - `'li p'` matches `content` ✅ - `'ul p'` does **not** match `content` ❌ (because `p` is not a direct child of `ul`) If you need to target elements with intermediate elements, define the complete path: - Use `'ul li p'` to match `content` ✅ Working with CSS frameworks (like TailwindCSS) ---------------------------------------------- [](#working-with-css-frameworks-like-tailwindcss) Some CSS frameworks utilize JIT compiling, or have some other means of purging CSS classes from production builds to reduce file size. Your classify CSS classes may not appear anywhere else in your template files, as they will be added dynamically. To make sure that your classes will be considered for compiling, you have to include the classify config file as content: ``` module.exports = { content: [ // all of your content files // './pages/**/*.{html,js}' // './components/**/*.{html,js}', './config/classify.php', ], } ``` More about us ============= [](#more-about-us) - [www.statamic-agency.com](https://statamic-agency.com) - [www.visuellverstehen.de](https://visuellverstehen.de) License ======= [](#license) The MIT License (MIT). Please have a look at our [license file](LICENSE.md) for more information. ### Health Score 62 — FairBetter than 99% of packages Maintenance89 Actively maintained with recent releases Popularity42 Moderate usage in the ecosystem Community23 Small or concentrated contributor base Maturity79 Established project with proven stability Bus Factor3 3 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~97 days Recently: every ~199 days Total 22 Last Release 53d ago Major Versions 1.0.4 → 2.0.02020-11-09 2.6.2 → v3.0.02024-05-22 v3.2.0 → v4.0.02026-03-26 PHP version history (5 changes)1.0.0PHP ^7.4 2.0.1PHP ^7.4 || ^8.0 v3.0.0PHP ^8.2 || ^8.3 v3.1.0PHP ^8.2 || ^8.3 || ^8.4 v4.0.0PHP ^8.3 ### Community Maintainers ![](https://www.gravatar.com/avatar/57dcd9370600b66b5ad7d99dd2b633e36d3a9458e656d650045f5f5eaf540e2d?d=identicon)[visuellverstehen](/maintainers/visuellverstehen) --- Top Contributors [![simonerd](https://avatars.githubusercontent.com/u/7941370?v=4)](https://github.com/simonerd "simonerd (16 commits)")[![juliawarnke](https://avatars.githubusercontent.com/u/44929138?v=4)](https://github.com/juliawarnke "juliawarnke (14 commits)")[![flemming-pr](https://avatars.githubusercontent.com/u/7942983?v=4)](https://github.com/flemming-pr "flemming-pr (10 commits)")[![el-schneider](https://avatars.githubusercontent.com/u/26460248?v=4)](https://github.com/el-schneider "el-schneider (9 commits)")[![lakkes-ra](https://avatars.githubusercontent.com/u/63732644?v=4)](https://github.com/lakkes-ra "lakkes-ra (4 commits)")[![sylvesterdamgaard](https://avatars.githubusercontent.com/u/2431914?v=4)](https://github.com/sylvesterdamgaard "sylvesterdamgaard (2 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (2 commits)")[![Jamesking56](https://avatars.githubusercontent.com/u/253237?v=4)](https://github.com/Jamesking56 "Jamesking56 (2 commits)")[![malteriechmann](https://avatars.githubusercontent.com/u/656568?v=4)](https://github.com/malteriechmann "malteriechmann (2 commits)")[![aerni](https://avatars.githubusercontent.com/u/23167701?v=4)](https://github.com/aerni "aerni (2 commits)")[![ito-ito-ito-ito](https://avatars.githubusercontent.com/u/260886217?v=4)](https://github.com/ito-ito-ito-ito "ito-ito-ito-ito (1 commits)")[![laravel-shift](https://avatars.githubusercontent.com/u/15991828?v=4)](https://github.com/laravel-shift "laravel-shift (1 commits)")[![stoffelio](https://avatars.githubusercontent.com/u/65236157?v=4)](https://github.com/stoffelio "stoffelio (1 commits)")[![doriengr](https://avatars.githubusercontent.com/u/57871803?v=4)](https://github.com/doriengr "doriengr (1 commits)")[![JohnathonKoster](https://avatars.githubusercontent.com/u/5232890?v=4)](https://github.com/JohnathonKoster "JohnathonKoster (1 commits)")[![JustBronkoDE](https://avatars.githubusercontent.com/u/19305746?v=4)](https://github.com/JustBronkoDE "JustBronkoDE (1 commits)") --- Tags laravelphpstatamicstatamic-addonstatamic-bardstatamic-v3tailwindcsscsstypographyaddonstatamicbardv5prosev6 ### Code Quality TestsPest ### Embed Badge ![Health badge](/badges/visuellverstehen-statamic-classify/health.svg) ``` [![Health](https://phpackages.com/badges/visuellverstehen-statamic-classify/health.svg)](https://phpackages.com/packages/visuellverstehen-statamic-classify) ``` ### Alternatives [marcorieser/statamic-livewire A Laravel Livewire integration for Statamic. 2381.5k10](/packages/marcorieser-statamic-livewire)[withcandour/aardvark-seo Save time and get your Statamic site to rank better with the SEO addon for Statamic. 13128.3k](/packages/withcandour-aardvark-seo)[visuellverstehen/statamic-picturesque A Statamic tag for building HTML-only responsive images. 1016.9k](/packages/visuellverstehen-statamic-picturesque)[aerni/livewire-forms A Statamic forms framework powered by Laravel Livewire 2912.8k](/packages/aerni-livewire-forms)[mitydigital/feedamic A fully-featured RSS and Atom feed generator for Statamic. 1064.0k](/packages/mitydigital-feedamic) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)