open-index/open-npm huggingface dataset:
npm package: @tailwind-styled/rspack
Description: Rspack adapter for tailwind-styled-v4 — loader + plugin
Author: Dictionar32
Latest version: 5.0.0

# @tailwind-styled/rspack

Rspack adapter for tailwind-styled-v4 — loader + plugin

## Installation

```bash
npm install @tailwind-styled/rspack
# or
pnpm add @tailwind-styled/rspack
# or
yarn add @tailwind-styled/rspack
```

## Requirements

- Node.js >= 18
- Rspack >= 1.0

## Basic Usage

Create a `rspack.config.js` file:

```javascript
const { rspack } = require('@rspack/core');
const { tailwindStyledRspack } = require('@tailwind-styled/rspack');

module.exports = {
  plugins: [
    tailwindStyledRspack(),
  ],
  module: {
    rules: [
      {
        test: /\.(tsx|ts|js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: '@tailwind-styled/rspack/loader',
        },
      },
    ],
  },
};
```

## Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `include` | `string \| string[]` | `undefined` | Glob patterns to include |
| `exclude` | `string \| string[]` | `undefined` | Glob patterns to exclude |
| `addDataAttr` | `boolean` | `false` | Add data-attributes for debugging |
| `analyze` | `boolean` | `false` | Enable bundle analysis |

```javascript
tailwindStyledRspack({
  include: ['./src/**/*'],
  exclude: ['./node_modules/**/*'],
  addDataAttr: true,
  analyze: true,
})
```

## v5 Notes: Zero-Runtime Mode

In v5, the plugin works in **zero-runtime mode**, meaning there is **no fallback JS** bundle injected. The styling is extracted at build time.

This provides:
- Smaller bundle sizes
- Better performance
- No runtime overhead

## Example Configuration

```javascript
const { rspack } = require('@rspack/core');
const { tailwindStyledRspack } = require('@tailwind-styled/rspack');

/** @type {import('@rspack/cli').Configuration} */
module.exports = {
  entry: './src/index.js',
  output: {
    path: './dist',
    filename: 'bundle.js',
  },
  plugins: [
    tailwindStyledRspack({
      addDataAttr: true,
      analyze: process.env.NODE_ENV === 'development',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(tsx|ts|js|jsx)$/,
        use: {
          loader: '@tailwind-styled/rspack/loader',
        },
      },
    ],
  },
};
```
npm package: @tailwind-tree/extractor
Description: A custom extractor enabling tailwind-tree to work seamlessly with Tailwind's JIT engine. See: https://www.npmjs.com/package/tailwind-tree
Author: Shervin Ghajar
Latest version: 0.3.4

# @tailwind-tree/extractor

Tailwind Tree Extractor for Tailwind CSS v3  
🔍 A custom extractor to make [`tailwind-tree`](https://www.npmjs.com/package/tailwind-tree) work seamlessly with Tailwind's JIT engine.

---

## ✨ Why Use This?

If you're using [`twTree`](https://www.npmjs.com/package/tailwind-tree) to generate utility classes with variant nesting (like `hover:bg-red-500`, `md:focus:text-blue-600`, etc.), this extractor enables Tailwind v3 to **understand and extract those class names** during build time — without any extra setup.

---

## 📦 Installation

```bash
pnpm add -D @tailwind-tree/extractor
# or
yarn add -D @tailwind-tree/extractor
# or
npm install -D @tailwind-tree/extractor
```

---

## ⚙️ Usage

### 1. Import the Extractor

```ts
// tailwind.config.js (Tailwind v3)
import { extractTwTree } from '@tailwind-tree/extractor';

export default {
  content: [
    {
      files: ['./src/**/*.{ts,tsx,js,jsx}'],
      extract: extractTwTree,
    },
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

That's it! Tailwind will now parse `twTree(...)` usage directly and extract all nested classes — including variants — with full accuracy and zero noise.

---

## 🧠 How It Works

This extractor looks for `twTree(...)` function calls in your source code and statically extracts the final Tailwind utility strings from them.

This avoids bloating your final CSS file with unused classes and works even for deep variant chains and conditionals.

---

## 🔗 Related

- [`tailwind-tree`](https://www.npmjs.com/package/tailwind-tree): The class composition utility for deeply nested Tailwind variant structures.