Example

Using Tailwind CSS with Ekit

Ekit does not impose any CSS framework. You can use plain CSS, Tailwind CSS, or any other solution.

For the example project, Tailwind CSS is used with a local build, in order to:

keep a strict Content Security Policy (CSP)

avoid external CDN dependencies

work with server-side rendering

Overview

The workflow is simple:

Tailwind CSS is built outside of Ekit (in a separate tooling folder or project)

The generated tailwind.css file is copied into the template assets

The template links the CSS file like any other static asset

Ekit itself does not need to know anything about Tailwind.

Step 1 — Build Tailwind CSS locally

Install Tailwind CSS and its CLI in a separate project or tooling folder.

For Tailwind v4, the input CSS file must contain:

@import "tailwindcss";

Because templates are usually located outside the Tailwind build folder, the template source must be explicitly declared.

Example:

@import "tailwindcss" source("/path/to/ekit/templates");

This allows Tailwind to scan .hbs and .html files and detect used classes.

Then run the build command:

npx @tailwindcss/cli \ -i ./src/tailwind.css \ -o ./dist/tailwind.css \ --minify

The result is a static tailwind.css file containing only the required styles.

Step 2 — Add the generated CSS to the template assets

Copy the generated file into the template assets folder, for example:

assets/css/tailwind.css

This file is treated like any other static asset.

Step 3 — Link Tailwind in the template layout

In the template layout (layout.hbs), include the generated CSS file:

You can still add a custom stylesheet if needed:

Notes

No CDN is required

No build step is executed by Ekit

The Tailwind build process is entirely optional

You are free to replace Tailwind with any other CSS solution

If you want, next we can:

refine this doc for MkDocs formatting

add a short “Why no CDN?” section

or write a default theme.css doc alongside Tailwind

But honestly: this is already clear, honest, and professional 👌