@farmfe/plugin-tailwindcss

Rust-based TailwindCSS integration for Farm. It scans Farm modules with Tailwind's Oxide scanner and compiles CSS roots that contain Tailwind directives.

Installation

npm install @farmfe/plugin-tailwindcss tailwindcss

yarn add @farmfe/plugin-tailwindcss tailwindcss

pnpm add @farmfe/plugin-tailwindcss tailwindcss

Usage

Register the Rust plugin in farm.config.ts:

import { defineConfig } from '@farmfe/core';
import tailwindcss from '@farmfe/plugin-tailwindcss';

export default defineConfig({
  plugins: [
    tailwindcss({
      config: {
        theme: {
          extend: {}
        }
      }
    })
  ]
});

Then import Tailwind from a CSS entry:

@import "tailwindcss";

Options

export interface TailwindCSSOptions {
  /**
   * Reserved for future explicit file/glob scanning. Current builds scan Farm
   * modules that pass through the compilation graph and exclude node_modules.
   */
  content?: string[];

  /**
   * JSON-serializable TailwindCSS configuration.
   *
   * When omitted, Tailwind's default configuration is used.
   */
  config?: Record<string, unknown>;
}

content

content is part of the public options shape but is reserved for future explicit file/glob scanning. Current builds scan candidate classes from Farm modules that pass through the compilation graph (js, jsx, ts, tsx, vue, svelte, html, and css) and skip files under node_modules.

config

Pass a JSON-serializable TailwindCSS configuration object. If config is omitted, Tailwind's default configuration is used.

How it works

The plugin runs in two phases:

1. During transform, it scans non-CSS source modules for Tailwind class candidates and records CSS root files that contain @tailwind, @apply, or @import "tailwindcss".
2. During freezeModule, it compiles the recorded CSS root with the complete candidate set, rewrites URLs, and updates the CSS module content.

Use @farmfe/plugin-tailwindcss when you want the Rust integration. Use @farmfe/js-plugin-tailwindcss when you specifically need the JavaScript plugin pipeline or its filter options.