Tailwind CSS

Copy Markdown View Source

Volt compiles Tailwind CSS v4 natively at runtime. Oxide scans source files in parallel for candidate class names, then the Tailwind compiler (running in QuickBEAM) generates CSS. LightningCSS handles minification.

The Tailwind compiler is installed into the npm_ex cache on first use — no manual setup required.

Configuration

config :volt,
  tailwind: [
    css: "assets/css/app.css",
    sources: [
      %{base: "lib/", pattern: "**/*.{ex,heex}"},
      %{base: "assets/", pattern: "**/*.{vue,ts,tsx}"}
    ]
  ]
  • css — path to your Tailwind input CSS file (with @import "tailwindcss")
  • sources — list of %{base, pattern} maps defining where to scan for class names

Plugins and Config Files

Tailwind @plugin and @config directives are resolved and bundled automatically:

@plugin "@tailwindcss/typography";
@plugin "./my-plugin.js";
@config "./tailwind.config.js";

npm packages are resolved from node_modules. Local files are resolved relative to the CSS input file. The full require() graph is bundled so the Tailwind runtime evaluates self-contained modules.

Incremental Rebuilds

In dev mode, only changed files are re-scanned. If a .heex template adds new Tailwind classes, only those new candidates trigger a CSS rebuild — the browser gets a style-only update without a page reload.

Production Build

mix volt.build --tailwind

The assets.build and assets.deploy aliases generated by the installer include --tailwind automatically.

Programmatic API

{:ok, css} = Volt.Tailwind.build(
  sources: [
    %{base: "lib/", pattern: "**/*.{ex,heex}"},
    %{base: "assets/", pattern: "**/*.{vue,ts,tsx}"}
  ],
  css: File.read!("assets/css/app.css"),
  minify: true
)