Question

我想在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' },
      },

Answer 1

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

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

Answer 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

Tailwindcss用名称自定义宽度

2 个答案: