---
title: "@farmfe/plugin-tailwindcss"
locale: "en"
version: "current"
canonicalUrl: "https://farmfe.org/docs/plugins/official-plugins/tailwindcss"
publicationStatus: "prerelease"
---

<a id="farmfeplugin-tailwindcss"></a>
# @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.


<a id="installation"></a>
## Installation


**npm**

```javascript
npm install @farmfe/plugin-tailwindcss tailwindcss
```


**yarn**

```javascript
yarn add @farmfe/plugin-tailwindcss tailwindcss
```


**pnpm**

```javascript
pnpm add @farmfe/plugin-tailwindcss tailwindcss
```



<a id="usage"></a>
## Usage


Register the Rust plugin in ` farm.config.ts `:


```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:


```css
@import "tailwindcss";
```


<a id="options"></a>
## Options


```ts
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>;
}
```


<a id="content"></a>
### ` 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 `.


<a id="config"></a>
### ` config `


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



> [!NOTE]
> note
> 
> The Rust wrapper serializes options before passing them to the underlying TailwindCSS processor, so pass ` config ` as plain data instead of a JavaScript config file with functions.



<a id="how-it-works"></a>
## 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 `](</docs/plugins/official-plugins/js-tailwindcss>) when you specifically need the JavaScript plugin pipeline or its filter options.



> [!NOTE]
> Known limitations
> 
> The current Rust plugin scans modules that Farm compiles; it does not yet expand the ` content ` option into additional filesystem globs. It also accepts JSON-serializable config objects instead of loading arbitrary JavaScript Tailwind config files.