Packages
volt
0.18.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.4
0.19.3
0.19.2
0.19.1
0.19.0
0.18.1
0.18.0
0.17.11
0.17.10
0.17.9
0.17.8
0.17.7
0.17.6
0.17.5
0.17.4
0.17.3
0.17.2
0.17.1
0.17.0
0.16.0
0.15.5
0.15.4
0.15.3
0.15.2
0.15.1
0.15.0
0.14.12
0.14.11
0.14.10
0.14.9
0.14.8
0.14.7
0.14.6
0.14.5
0.14.4
0.14.3
0.14.2
0.14.1
0.14.0
0.13.1
0.13.0
0.12.0
0.11.3
0.11.2
0.11.1
0.11.0
0.10.9
0.10.8
0.10.7
0.10.6
0.10.5
0.10.4
0.10.3
0.10.2
0.10.1
0.10.0
0.9.2
0.9.1
0.9.0
0.8.4
0.8.3
0.8.2
0.8.1
0.8.0
0.7.1
0.7.0
0.6.5
0.6.4
0.6.3
0.6.2
0.6.1
0.6.0
0.5.0
0.4.3
0.4.2
0.4.1
0.4.0
0.3.0
0.2.0
0.1.0
Elixir-native frontend build tool — dev server, HMR, and production builds powered by OXC and Vize.
Current section
Files
Jump to
Current section
Files
guides/features/tailwind.md
# Tailwind CSS
Volt compiles Tailwind CSS v4 natively at runtime. [Oxide](https://hex.pm/packages/oxide_ex) scans source files in parallel for candidate class names, then the Tailwind compiler (running in [QuickBEAM](https://hex.pm/packages/quickbeam)) generates CSS. [LightningCSS](https://hex.pm/packages/vize) handles minification.
The Tailwind compiler is installed into the npm_ex cache on first use — no manual setup required.
## Configuration
```elixir
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
## Build Lifecycle
`Volt.build/1` is the public API for complete frontend builds. It composes the configured Tailwind root with the ordinary JavaScript/CSS module graph, returns a typed `%Volt.Build.Result{}`, and writes one merged manifest at the configured asset output root. `mix volt.build` is a CLI adapter around that API.
```elixir
{:ok, result} = Volt.build()
result.styles
result.assets
result.manifest
```
Tailwind output is isolated per profile and CSS root. Root workers retain independent Oxide scanners and generated CSS state while sharing one supervised QuickBEAM compiler runtime.
## Plugins and Config Files
Tailwind `@plugin` and `@config` directives are resolved and bundled automatically:
```css
@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.
Volt also searches Phoenix-style asset locations for Tailwind imports and plugins. This lets Phoenix LiveView colocated CSS imports resolve from the Mix build path:
```css
@import "phoenix-colocated/my_app/colocated.css";
```
## 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
```bash
mix volt.build --tailwind
```
The `assets.build` and `assets.deploy` aliases generated by the installer include `--tailwind` automatically.
## Programmatic API
```elixir
{: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
)
```