# tailwind-plugin

tailwind 插件

# Usage

```js
// tailwind.config.js
module.exports = {
  presets: [require('@kt/unity-tailwind-preset')],
  content: [
    './public/**/*.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
    // 允许编译 npm 包
    '../../node_modules/@kt/**/*.{vue,js,ts,jsx,tsx}'
  ],
  plugins: [require('@kt/unity-tailwind-plugin')]
};
```

# Feature

- 重写 flex-1

  tailwind 注意事项，使用到 flex 布局的请注意：

  ```html
  <div class="flex">
    <div class="flex-1">弹性</div>
    <div>固定</div>
  </div>
  ```

  我们使用这样子的方式实现弹性布局。

  但是 flex-1 经常需要结合 w-0（width:0;） 来使用，否则会出现盒子被内部元素撑开。
  为了减少一些开发的繁琐。这里通过插件重写了样式。

  ```js
  addUtilities({
    /* fix: flex-1 需要和 width=0 配置，为了不影响 flex-basics 更好的控制弹性 */
    '.flex-1': {
      flex: 1,
      width: 0
    },

    /* 列的情况下 height:0 */
    '.flex-col': {
      '& > .flex-1': {
        width: 'auto',
        height: 0
      }
    }
  });
  ```
