rmlui-tailwind

Generate RmlUi-compatible RCSS from Tailwind utility classes.

Unsupported CSS generated by Tailwind or PostCSS is stripped during the transform step. We only keep only declarations, selectors, and rules that map cleanly onto RmlUi's supported stylesheet surface.

Usage

Build from a config file:

pnpx rmlui-tailwind@latest build --config ./rmlui-tailwind.config.mjs

Build directly from CLI flags:

pnpx rmlui-tailwind@latest build \
  --content "./assets/ui/**/*.rml" \
  --out ./assets/ui/tailwind.rcss

Transform an existing CSS file:

pnpx rmlui-tailwind@latest transform \
  -i ./tailwind.generated.css \
  -o ./assets/ui/tailwind.rcss

Show CLI help:

pnpx rmlui-tailwind@latest --help

The build command uses an inline Tailwind input stylesheet by default:

@tailwind base;
@tailwind components;
@tailwind utilities;

Provide input in your config or --input on the CLI if you need a custom source stylesheet.

The package also applies a built-in tailwind.corePlugins baseline tuned for RmlUi. These defaults disable core plugins that generate unsupported RmlUi CSS. Your own tailwind.corePlugins entries are merged on top, so you can re-enable or further disable plugins per project.

Option aliases:

• --help, -h
• --config, -c
• --input, --in, -i
• --output, --out, -o

Config

Example rmlui-tailwind.config.mjs:

export default {
  content: ['./assets/ui/**/*.rml'],
  output: './assets/ui/tailwind.rcss',
  tailwind: {
    theme: {
      extend: {}
    }
  }
}

Supported config fields:

export default {
  content: ['./assets/ui/**/*.rml'],
  output: './assets/ui/tailwind.rcss',
  input: './tailwind.css',
  support: './tools/data/rmlui-support.json',
  tailwind: {
    theme: {},
    corePlugins: {},
    safelist: []
  }
}

tailwind.corePlugins is merged with the package defaults rather than replacing them entirely.

The tailwind field is passed through to Tailwind's config object and merged with the package's runtime-generated content list. This is where you should put project-specific Tailwind customization such as:

• theme
• extend
• corePlugins
• plugins
• safelist
• blocklist
• darkMode
• prefix

Example:

export default {
  content: ['./assets/ui/**/*.rml'],
  output: './assets/ui/tailwind.rcss',
  tailwind: {
    safelist: ['hidden', 'flex'],
    theme: {
      extend: {
        colors: {
          brand: '#2ec4b0'
        }
      }
    }
  }
}

Updating Support Data

The package ships with a generated data/rmlui-support.json file describing supported RmlUi properties, shorthands, and selectors.

To regenerate it against a local RmlUi checkout:

pnpm exec tsx src/cli.ts generate-support \
  --rmlui-source /path/to/RmlUi \
  -o data/rmlui-support.json

This is intended as maintainer workflow, not something consumers need during normal builds.