@runablejs/tailwindcss

@runablejs/tailwindcss configures Tailwind CSS 4 for Runable. It registers the official @tailwindcss/vite plugin, injects the Tailwind import, and includes source files exposed by loaded Runable modules.

Installation

Install the module as a development dependency:

pnpm add -D @runablejs/tailwindcss

Add it to runable.config.ts:

import { defineConfig } from "runable";

export default defineConfig({
  modules: ["@runablejs/tailwindcss"],
});

You can now use Tailwind utility classes in Vue components:

<template>
  <h1 class="text-3xl font-bold text-emerald-500">
    Built with Runable and Tailwind CSS
  </h1>
</template>

Options

Option	Type	Default	Description
`injectCss`	`boolean`	`true`	Inject `@import "tailwindcss"` and register Runable source files.
`exposeConfig`	`boolean`	`false`	Expose the resolved options through the public runtime configuration.

Use your own stylesheet

Disable automatic CSS injection when your application already owns its Tailwind entry file:

import { defineConfig } from "runable";

export default defineConfig({
  modules: ["@runablejs/tailwindcss"],
  tailwindcss: {
    injectCss: false,
  },
  css: ["./app/assets/css/main.css"],
});

Then import Tailwind from that stylesheet:

@import "tailwindcss";