open-index/open-npm huggingface dataset:
npm package: @kongdq/umi-bundler-utils
Description: See our website [umijs](https://umijs.org) for more information.
Latest version: 4.0.0-vis.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @umijs/bundler-utils

See our website [umijs](https://umijs.org) for more information.
npm package: @kongfu-panda/kangaroo
Description: A Wrapper layer around reactor, which is based on Vuex (https://vuex.vuejs.org/) Interface
Author: Wilson Wu
Latest version: 0.1.2

# Kangaroo

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

Kangaroo is a state management pattern + library mimic Vuex. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

# Recommended Editor

It is highly suggested to use [Visual Studio Code](https://code.visualstudio.com/) as it is extendible and light weight.

The project comes configured with some settings that make development within vscode as simple as possible.

These include things such as code format on save and debugging current ts files and tests.

# Npm Scripts

- `npm run lint`: Lint all typescript files.
- `npm run format`: Format all ts files in the `src` folder.
- `npm run commit`: Commit using [commitzen](https://github.com/commitizen/cz-cli) to ensure commits follow the correct convention.
- `npm run test`: Run all [jest](https://jestjs.io/) tests on files that end with `*.spec.ts` in the `test` folder.
- `npm run cov`: Generate and open a test coverage report using [jest](https://jestjs.io/).
- `npm run cov:open`: Open the generated test coverage report.
- `npm run doc`: Generate and open documentation using [typedoc](https://typedoc.org/).
- `npm run doc:open`: Open generated documentation.
- `npm run build`: Build the project using the typescript compiler.
- `npm run version`: Generate or update a CHANGELOG.md, bump the package version and create a tag using [Standard Version](https://github.com/conventional-changelog/standard-version).
npm package: @konghayao/bun-plugin-tailwind
Description: A fast and smart Tailwind CSS v4 plugin for Bun bundler with automatic source detection
Author: KongHaYao
Latest version: 1.0.0

# @konghayao/bun-plugin-tailwind

A fast and smart Tailwind CSS v4 plugin for Bun bundler with automatic source detection.

## Features

- 🚀 **Fast** - Built on Tailwind CSS v4's oxide engine
- 🎯 **Smart Detection** - Automatically detects source files from your Tailwind config
- 🔧 **Zero Config** - Works out of the box for most projects
- 📦 **Framework Support** - Works with Vue, Svelte, Astro CSS files

## Installation

```bash
bun add @konghayao/bun-plugin-tailwind
```

## Usage

### Basic Usage

```typescript
import { tailwindPlugin } from '@konghayao/bun-plugin-tailwind';

await Bun.build({
    entrypoints: ['./src/index.ts'],
    outdir: './dist',
    plugins: [tailwindPlugin],
});
```

### With TypeScript Build Script

```typescript
// build.ts
import { tailwindPlugin } from '@konghayao/bun-plugin-tailwind';

const result = await Bun.build({
    entrypoints: ['./src/main.ts'],
    outdir: './dist',
    plugins: [tailwindPlugin],
    minify: true,
    sourcemap: 'external',
});

if (!result.success) {
    console.error('Build failed:', result.logs);
    process.exit(1);
}

console.log('Build successful:', result.outputs);
```

### CSS Entry Point

Create a CSS file that imports Tailwind:

```css
/* styles.css */
@import 'tailwindcss';

/* Or with custom configuration */
@import 'tailwindcss/theme' theme;
@import 'tailwindcss/preflight';
@import 'tailwindcss/utilities';

/* Your custom styles */
@layer components {
    .btn {
        @apply px-4 py-2 rounded-lg;
    }
}
```

## How It Works

1. **Automatic Detection**: The plugin scans your CSS files for Tailwind directives
2. **Source Scanning**: Uses Tailwind v4's oxide scanner to find class usage in your project
3. **Smart Compilation**: Only processes files that use Tailwind features
4. **Optimized Output**: Returns compiled CSS directly to Bun's bundler for further optimization

## Supported File Types

- `.css` - Standard CSS files
- `.vue` - Vue SFC with `<style>` blocks
- `.svelte` - Svelte components with CSS
- `.astro` - Astro components with CSS

## Why This Plugin?

The official Tailwind CSS tooling is primarily designed for Vite. This plugin provides:

1. **Native Bun Support** - No Vite dependency required
2. **Better Performance** - Leverages Bun's fast bundler
3. **Simple Setup** - Single plugin, zero configuration

## Comparison with Official Tools

| Feature | @konghayao/bun-plugin-tailwind | @tailwindcss/vite |
|---------|-------------------------------|-------------------|
| Runtime | Bun only | Vite only |
| Config | Zero config | Vite plugin config |
| Performance | Very fast | Fast |
| HMR | Manual | Built-in |

## Requirements

- Bun >= 1.0.0
- Tailwind CSS v4 (peer dependency)

## License

MIT