Utilikit is a zero-build, utility-first CSS framework for Drupal that generates classes such as uk-pd--20 or uk-bg--ff0000-50 on demand, in three rendering modes, instead of shipping a fixed stylesheet of preset values. It requires Drupal 11.2 or 12 — not Drupal 10, and that omission is deliberate.
Requirements
| Requirement | Value |
|---|---|
| Drupal core | ^11.2 || ^12 |
| PHP | >=8.1 |
| Dependencies | None declared — no core or contributed dependencies |
| Configuration route | /admin/config/utilikit/settings |
| Permissions | administer utilikit (restricted), access utilikit reference, use utilikit update button |
Why Drupal 10 is not supported
This is a case where the honest requirement is narrower than "works on the last three majors." Utilikit's rendering code calls renderInIsolation(), which replaced the removed renderPlain() starting in Drupal 10.3, and it reads the RequirementSeverity enum, which does not exist before Drupal 11.2. There is no single expression of core support that serves both Drupal 10 and Drupal 12 correctly, so the module declares ^11.2 || ^12 rather than advertise a floor it would fatal on.
Three rendering modes
| Mode | What it does | Best for |
|---|---|---|
| Inline | JavaScript generates CSS in the browser as classes appear on the page | Development, content editing, prototyping |
| Static | Server-side pre-generated CSS files, minimal JavaScript at runtime | Production performance |
| Head | CSS stored in Drupal's State API and injected directly into <head> — no file writes | Read-only or containerized hosting: Platform.sh, Pantheon, Acquia Cloud, Kubernetes |
Switching modes from Drush cleans up the artifacts of the mode you're leaving and, when moving to Static or Head, generates CSS immediately for every class already discovered on the site.
The prefix system
Every utility class needs the utilikit base class plus a two-to-four letter prefix. The module's rule table defines 50 prefixes — padding (pd), margin (mg), width (wd) and height (ht) using the logical inlineSize/blockSize properties for automatic RTL support, background and text color (bg, tc) with alpha-channel support, flexbox and grid properties, transforms, and more — grouped under Box Model, Sizing, Positioning, Typography, Colors, Flexbox, Grid, Transform and Layout. Since a literal . is not valid in a CSS class name, decimal values use d in its place (uk-lh--1d5 for a line-height of 1.5), and percentages use a pr suffix (uk-wd--100pr for 100% width). All 50 prefixes accept responsive breakpoint variants (sm, md, lg, xl, xxl), individually toggleable in settings to control CSS size.
Drush commands
Eight commands cover the whole lifecycle, each with a short alias:
drush utilikit:generate # uk-gen — generate CSS from known classes
drush utilikit:scan # uk-scan — scan content for utility classes
drush utilikit:clear # uk-clear — reset all CSS and known-class state
drush utilikit:mode static # uk-mode — switch rendering mode (inline/static/head)
drush utilikit:status # uk-status — show configuration and statistics
drush utilikit:classes # uk-classes — list discovered utility classes
drush utilikit:validate # uk-validate — check for CSS generation errors
drush utilikit:cache-clear # uk-cc — clear Utilikit's own cachesRate limiting
Static and Head mode CSS generation is capped at 60 requests per minute per IP and 5,000 classes per request, both defined as constants in the module's own service layer rather than left to Drupal's general flood control.
Sub-modules
Utilikit ships six optional sub-modules, enabled independently:
- Utilikit Examples — ready-made component markup: cards, headers, forms.
- Utilikit Playground — an interactive class builder with a live preview, at
/admin/config/utilikit/playground. - Utilikit Help — contextual in-admin documentation.
- Utilikit Test — the module's own test suite.
- Utilikit CKEditor — a CKEditor 5 toolbar button for applying utility classes to the element being edited.
- Utilikit AI — helps compose and diagnose utility classes using the AI module. It requires
ai:ai, which currently caps this one sub-module at Drupal 11 — it will widen to Drupal 12 once its AI dependency does.
Installation
composer require drupal/utilikit
drush en utilikit
drush crThen visit /admin/config/utilikit/settings, choose a rendering mode, and enable whichever sub-modules you need.
Common questions
Does Utilikit work on Drupal 10?
No. It requires ^11.2 || ^12, because it depends on the renderInIsolation() method and the RequirementSeverity enum, neither of which exists on Drupal 10.
What is the settings page path?
/admin/config/utilikit/settings — note the trailing /settings; the base /admin/config/utilikit path is not the settings form.
Do I need a build step, like Tailwind's CLI?
No. Inline mode generates CSS in the browser at runtime; Static and Head modes pre-generate it server-side through Drush or automatically on content save. There is no Node.js or webpack step at any point.
Which mode should I use in production?
Static, for most sites — pre-generated, cacheable CSS with minimal JavaScript. Head mode is the one to reach for specifically when your hosting has a read-only filesystem.
Does every sub-module support Drupal 12?
Five of the six do. Utilikit AI is capped at Drupal 11.2 until its own AI-module dependency adds Drupal 12 support upstream.
Need a utility system built into your Drupal theme?
Utilikit is free and GPL-licensed, like the rest of my contributed work. If you want it wired into an existing theme, a Drupal 10 site moved to 11 or 12 so it can run, or a component library built on top of it, that is my day job. It pairs naturally with Paragraphs Bundles for component-based pages, and with Selectify and Module Matrix, two other modules built the same dependency-light way.
Read about my Drupal services, see what a Drupal themer brings to a project, or get in touch.
