Tailwindcss 使用名称自定义宽度答案

【问题标题】：Tailwindcss customize width with nameTailwindcss 使用名称自定义宽度
【发布时间】：2020-09-23 10:32:28
【问题描述】：

我想在 tailwindcss 宽度中添加自定义项。我发现你必须使用间距。在颜色自定义中，您可以使用具有名称的多个对象。是否也可以通过间距来做到这一点？当我尝试这样做时，浏览器中没有任何反应......

spacing: {
        // the commented lines work as excepted
        // 'cta-slogan': '23.813rem',
        // 'services-item': '28.5rem',

        // these don't work..
        cta: { slogan: '23.813rem' },
        services: { item: '28.5rem' },
      },

【问题讨论】：

标签： width customization tailwind-css

【解决方案1】：

截至目前，Tailwind 不支持 嵌套对象语法 用于 spacing。目前，您必须坚持使用'cta-slogan': '23.813rem'。

如果在将来的升级中支持此功能，我将通过此线程向您发布。干杯！

【讨论】：

谢谢！我希望他们尽快实施！

【解决方案2】：

您可以在间距中自定义命名！

您只需将其添加到扩展部分的tailwind.config.js中

// tailwind.config.js
extend: {
  spacing: {
    'cta-slogan': '23.813rem'
  }
}

并根据 TailwindCSS 的命名约定相应地使用它。

/* for margin: */
.m-cta-slogan{
  margin: 23.813rem;
}

/* for width: */
.w-cta-slogan{
  width: 23.813rem;
}

// etc..

您也可以单独自定义宽度。只需使用 tailwind.config.js 文件的 theme.width 部分。

// tailwind.config.js
extend: {
 width: {
  'services-item': '14.2857143%'
 }
}

在这种情况下，您将只获得宽度相关的类，就像在相同的命名约定 .w-services-item 中一样

这两种情况都包括所有响应式类 - 如 lg:w-services-item

【讨论】：