@farmfe/js-plugin-tailwindcss

TailwindCSS integration for Farm using the official TailwindCSS Node and Oxide packages. This is the JavaScript-plugin alternative to the Rust @farmfe/plugin-tailwindcss package.

Installation

npm install @farmfe/js-plugin-tailwindcss tailwindcss

yarn add @farmfe/js-plugin-tailwindcss tailwindcss

pnpm add @farmfe/js-plugin-tailwindcss tailwindcss

Usage

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

export default defineConfig({
  plugins: [
    ...tailwindcss()
  ]
});

Then import Tailwind from a CSS entry:

@import "tailwindcss";

Options

export interface Options {
  filters?: {
    resolvedPaths?: string[];
    moduleTypes?: string[];
  };
}

filters

Controls which modules are scanned for TailwindCSS class candidates. By default, the plugin scans transformed project files and excludes node_modules.

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

export default defineConfig({
  plugins: [
    ...tailwindcss({
      filters: {
        resolvedPaths: ['src/'],
        moduleTypes: ['tsx', 'jsx', 'html']
      }
    })
  ]
});

How it works

The plugin scans transformed modules with @tailwindcss/oxide, stores the candidates in Farm metadata, and generates CSS for CSS root files during freezeModule with @tailwindcss/node. It also tracks scanned modules as watch files for rebuilds.

Prefer the Rust plugin for the default Farm-native path. Prefer this JS plugin when you need JS plugin filters or want to integrate with the JavaScript Tailwind pipeline directly.