const plugin = require('tailwindcss/plugin');

module.exports = plugin(({ addBase, addComponents, addUtilities, theme }) => {
  // addBase({
  //   '.foo': {
  //     background: 'red'
  //   },
  //   '.h1': {
  //     fontSize: '100px'
  //   }
  // });

  // addComponents({
  //   '.card': {
  //     backgroundColor: 'red'
  //   }
  // });

  // ✨ https://tailwindcss.com/docs/plugins#css-in-js-syntax

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

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

  /**
   * 当行文本溢出省略号 需要这三个原子类，text-ellipsis overflow-hidden whitespace-nowrap
   * 为了方便，重新组合当行文本溢出 .text-overflow-ellipsis
   */
  addUtilities({
    '.text-overflow-ellipsis': {
      'text-overflow': 'ellipsis',
      'white-space': 'nowrap',
      overflow: 'hidden'
    }
  });
});
