Charged UI
Charged UI is a Drupal base theme that uses Tailwind CSS without requiring any build tools or command-line operations. It automatically compiles Tailwind classes found in your Twig templates and preprocess hooks into a single stylesheet. The theme also supports Single Directory Components, allowing for organized and reusable design elements with customizable styling.
Charged UI is a base theme framework built on Tailwind CSS, with a PHP-based Tailwind compiler. No Node.js, no build steps, and no command line tooling required.
How It Works
Save a Twig file in /components or /templates and refresh. Tailwind classes are scanned from your templates and PHP preprocess hooks, then compiled to a single stylesheet on the next request.
Sub-themes get the same treatment: their components and templates are scanned alongside the base theme, so child themes work without any extra setup.
Per-page styles are compiled separately and deduplicated against the base stylesheet, ensuring no class compiles twice.
Single Directory Components
Single Directory Components are first-class citizens. Every component lives in its own folder with its Twig template, schema, and styles. The theme ships with a starter library covering layouts (Box, Grid), typography (Heading, Text, Date), interaction (Button, Details, Tabs), and display (Card, Badge, Image, Link, Alert, Code Block). Each accepts a tailwind_classes prop for inline customization without template overrides.