您可以从顺风的边距和填充类中删除破折号吗？答案

【问题标题】：Can you remove dashes from margin and padding classes in tailwind?您可以从顺风的边距和填充类中删除破折号吗？
【发布时间】：2020-07-19 14:48:38
【问题描述】：

在使用tailwind 时，是否可以从margins 和padding 选择器中删除破折号？

例如：

.mb-1 将是 .mb1

.-mx-1 将是 .mxn1

我个人认为这看起来更干净，想知道是否可能。

【问题讨论】：

标签： tailwind-css

【解决方案1】：

可以通过插件实现，但需要大量额外工作。从这两个 (one, two) github 线程中提取，这是一个从 mb-# 类中删除破折号的插件示例，即：.mb-1 将变为 .mb1：

import _ from 'lodash'

export default function(variants) {
  return function ({ addUtilities, config }) {
    const utilities = _.map(config('margin'), (value, modifier) => {
      return defineClass(`mb${modifier}`, {
        'margin-bottom': `${value}`,
      })
    })

    addUtilities(utilities, variants)
  }
}

本质上，该插件正在为边距底部类创建自己的自定义类。为每个模块执行此操作需要大量工作，但同样，这是可能的。 ps：上面的插件要求你在tailwind.config.js文件中禁用默认的顺风边距。

module:
  modules: {
    // ...
-   margin: [...],
+   margin: false,
    // ...
  }

【讨论】：