plakart/contao-css-utilities

Tailwind-style spacing utility classes assignable to Contao content elements, articles and form fields

1.0.0 2026-07-21 10:23 UTC

Requires

• php: >=8.2
• contao/core-bundle: ^5.0
• doctrine/dbal: ^3.6 || ^4.0
• symfony/config: ^6.4 || ^7.0
• symfony/dependency-injection: ^6.4 || ^7.0
• symfony/http-kernel: ^6.4 || ^7.0

Requires (Dev)

• contao/manager-plugin: ^2.12
• friendsofphp/php-cs-fixer: ^3.40
• phpstan/phpstan: ^2.0
• phpunit/phpunit: ^11.0

Conflicts

• contao/manager-plugin: <2.0

LGPL-3.0-or-later

Published on Packagist.org on 2026-07-22 06:34 UTC

README

Tailwind-style spacing utility classes for Contao 5. Editors assign margins and paddings to content elements, articles, and form fields via four select fields — no CSS knowledge required.

How it works

• 52 fixed classes: mt-0…12, mb-0…12, pt-0…12, pb-0…12
• Values are fluid (clamp()) and defined as CSS custom properties --pcu-space-1…--pcu-space-12, so a theme can override the scale without renaming classes
• On save, the selected classes are merged into the element's CSS class (cssID / class); manually added classes are preserved
• utilities.css is loaded automatically on every page; each page layout has a "Disable utility CSS" checkbox to opt out

Installation

composer require plakart/contao-css-utilities

Then run the Contao install tool / migrations to add the new database columns.

The four utility fields are excluded by default — grant them to non-admin user groups in the Contao backend permissions before the selects appear.

Overriding the scale

Define the custom properties in your theme after utilities.css is loaded:

:root {
    --pcu-space-4: 1.25rem;
}

Development

composer test          # PHPUnit
composer phpstan       # static analysis
composer cs-fix        # code style
composer generate-css  # regenerate public/css/utilities.css (never edit by hand)