# tailwind-prefix

**Repository Path**: fierce_urchins/tailwind-prefix

## Basic Information

- **Project Name**: tailwind-prefix
- **Description**: tailwind prefix
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-08-03
- **Last Updated**: 2023-09-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# readme
> 这个工具可以帮你把项目中的tailwind类名在构建的时候动态加上前缀

* * *
### 使用方法
#### rollup 作为打包工具
``` js
// rollup.config.js 文件
const { rollupPlugin } = require('tailwind-prefix');

module.exports = {
  plugins: [
    //  需要在postcss插件前使用
    rollupPlugin({ prefix: 'my-prefix-' }),
    postcss(),
  ]
}
```

``` js
// tailwind.config.js 文件
const { tailwindTransform } = require('tailwind-prefix');

module.exports = {
  // prefix 和 content > transform 配置都是在构建时加上
  prefix: 'my-prefix-',
  content: {
    files: ['./src/**/*.{jsx,tsx}'],
    transform: tailwindTransform('my-prefix-'),
  },
}
// 需要配置tailwind transform的原因是 tailwind 在生成class的时候需要去读源文件

```

* * *

#### webpack 作为打包工具 umi🌰

``` js
// .umirc.ts 文件
import { defineConfig } from 'umi';

export default defineConfig({
  chainWebpack(config, { env, webpack }) {
    // 添加loader
    config.module
      .rule('tailwind-prefix')
      .test(/\.(jsx|tsx|less|css)$/)
      .pre()
      .use('tailwind-prefix')
      .loader(require.resolve('tailwind-prefix/webpackLoader'))
      .options({
        prefix: 'my-prefix-',
      });
    
    return config;
  },
});
```

 ``` js
 // tailwind.config.js 文件
const { tailwindTransform } = require('tailwind-prefix');

module.exports = {
  // prefix 和 content > transform 配置都是在构建时加上
  prefix: 'my-prefix-',
  content: {
    files: ['./src/**/*.{jsx,tsx}'],
    transform: tailwindTransform('my-prefix-'),
  },
}
 ```

* * *

### demo测试效果
``` js 
// 运行demo/test.js

node ./demo/test.js

// 转换后的效果 demo/result.tsx
```