Runable Tailwind CSS

Tailwind CSS 4 integration for Runable ⚡️

[!NOTE] This module currently targets Tailwind CSS 4 and uses the official @tailwindcss/vite plugin.

Description

@runablejs/tailwindcss integrates Tailwind CSS 4 into Runable applications through the official Vite plugin. It lets you use Tailwind utility classes in Vue components while keeping the setup small and aligned with Tailwind CSS 4 conventions.

Features

• 👌 Automatic Tailwind CSS import
• ⚡️ Powered by the official Tailwind CSS Vite plugin
• 🎨 Tailwind CSS 4 support
• 💚 Vue and TypeScript ready
• 🔌 Seamless integration with Runable

Installation

Install the module with your preferred package manager:

# pnpm
pnpm add --save-dev @runablejs/tailwindcss

# npm
npm install --save-dev @runablejs/tailwindcss

# yarn
yarn add --dev @runablejs/tailwindcss

Configuration

Add the module to runable.config.ts:

import { defineConfig } from "runable";

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

The module automatically injects @import "tailwindcss";. You can use Tailwind utility classes in your components immediately:

It also registers the source files exposed by every loaded Runable module, so Tailwind can detect utility classes used in pages, layouts, components, plugins, composables, and globals.

<template>
  <h1 class="text-3xl font-bold text-blue-500">
    Hello Runable!
  </h1>
</template>

Disable CSS injection

Set injectCss to false if you prefer to import Tailwind CSS from your own stylesheet:

import { defineConfig } from "runable";

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

/* app/assets/css/main.css */
@import "tailwindcss";

Options

| Option | Type | Default | Description | | --- | --- | --- | --- | | injectCss | boolean | true | Automatically inject Tailwind CSS and register Runable source files. | | exposeConfig | boolean | false | Expose the resolved module options through useRuntime().public.tailwindcss. |

Expose the module configuration

Enable exposeConfig when the resolved module options need to be available in your application:

import { defineConfig } from "runable";

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

You can then access them from a component or composable:

const { public: publicRuntime } = useRuntime();
const tailwindcss = publicRuntime.tailwindcss;

Because the configuration is public, do not add sensitive values to the module options.

Contributing

You can contribute to the module locally:

1. Clone the repository.
2. Install dependencies using pnpm install.
3. Prepare the application using pnpm app:prepare.
4. Start the development server using pnpm dev.
5. Check your changes using pnpm typecheck.

License

MIT - Made with 💚