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

<a id="farmfejs-plugin-tailwindcss"></a>
# @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 `](</docs/plugins/official-plugins/tailwindcss>) package.


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


**npm**

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


**yarn**

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


**pnpm**

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



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


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

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


Then import Tailwind from a CSS entry:


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


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


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


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


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


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

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


<a id="how-it-works"></a>
## 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.