Styling

Accent CMS includes a built-in CSS processing pipeline that handles Sass/SCSS compilation, Tailwind-style utility CSS generation, and production minification. No Node.js, no npm, no external build step – everything runs inside the CMS.

Overview

The styling pipeline is configured per-theme via the styling: section of theme.yaml. It supports three processing stages:

Stage	Tool	Purpose
Sass/SCSS	grass (pure Rust)	Variables, nesting, mixins, partials
Utility CSS	encre-css (Tailwind v4)	Utility classes scanned from templates
Post-processing	Lightning CSS	Minification, vendor prefixes, syntax lowering

All stages are opt-in. Themes that use plain CSS continue to work unchanged.

Sass/SCSS Compilation

Place .scss or .sass files in your theme’s assets/ directory. Accent CMS compiles them on the fly when requested.

Quick Start

1. Create site/themes/my-theme/assets/css/main.scss
2. Reference it in theme.yaml:

assets:
  css:
    - css/main.scss

1. Use @use for partials (files prefixed with _):

// _variables.scss
$primary: #f4f3e;
$font-stack: 'Inter', sans-serif;

// main.scss
@use 'variables' as *;
body { font-family: $font-stack; color: $primary; }

The compiled CSS is served at /theme/assets/css/main.scss during development and written as css/main.css during accent build.

Configuration

styling:
  sass:
    enabled: true          # default: true
    load_paths:
      - css/partials       # additional @use resolution paths

Utility CSS (Tailwind v4 Compatible)

Generate utility classes automatically by scanning your templates. Powered by encre-css, a pure-Rust Tailwind v4 implementation.

Quick Start

1. Enable utility scanning in theme.yaml:

styling:
  utilities:
    enabled: true
    scan:
      - templates/**/*.jinja
      - templates/**/*.html

1. Use utility classes in your templates:

<div class="p-4 bg-blue-500 text-white rounded-lg">
    {{ page.content | safe }}
</div>

1. The generated CSS is served at /theme/assets/css/utilities.css (configurable).

Icons

When icons: true (default), you get access to pure CSS icons from Iconify:

<span class="i-heroicons-home w-6 h-6"></span>

Typography (Prose)

When typography: true (default), use the prose class for styled markdown content:

<article class="prose">
    {{ page.content | safe }}
</article>

This styles all semantic HTML elements (headings, paragraphs, lists, tables, code blocks) inside the container for readable long-form content.

Custom Values

Extend the default utility palette with your brand colors and spacing:

styling:
  utilities:
    enabled: true
    extend:
      colors:
        brand: '#f4f3e'
        accent: '#1a73e8'
      spacing:
        128: '32rem'

Then use them as utilities: bg-brand, text-accent, p-128.

Tailwind CDN (Development Only)

For quick prototyping, enable the Tailwind v4 CDN script instead of local utility generation:

styling:
  tailwind_cdn: true
  tailwind_config: |
    { theme: { extend: { colors: { brand: '#f4f3e' } } } }

This injects the Tailwind CDN <script> tag in the <head>. Not recommended for production – use the built-in utility generator instead.

CSS Post-Processing

In production mode (accent build or --production), all CSS is automatically processed by Lightning CSS:

• Minification: Removes whitespace, shortens values, merges rules
• Vendor prefixes: Adds -webkit-, -moz- etc. for target browsers
• Syntax lowering: Converts modern CSS to work in older browsers

Configuration

styling:
  processing:
    minify: true           # default: true
    targets:               # browser targets for prefixing
      - "> 0.5%"
      - "not dead"

Default targets: Chrome 100+, Firefox 100+, Edge 100+, Safari 15+.

Full Configuration Reference

# theme.yaml
styling:
  # Sass/SCSS compilation
  sass:
    enabled: true
    load_paths: []

  # Utility CSS generation
  utilities:
    enabled: false
    scan:
      - templates/**/*.jinja
      - templates/**/*.html
    output: css/utilities.css
    icons: true
    typography: true
    extend:
      colors: {}
      spacing: {}

  # CSS post-processing
  processing:
    minify: true
    targets: []

  # Tailwind CDN (dev/prototyping)
  tailwind_cdn: false
  tailwind_config: null

Static Site Build

During accent build, the style pipeline:

1. Compiles all .scss/.sass files to .css
2. Generates utility CSS from all scanned templates
3. Minifies all CSS output
4. Rewrites HTML asset references (main.scss -> main.css)

The output directory contains only standard CSS files – no Sass sources, no runtime processing needed.