Tailwindcss 使用名称自定义宽度

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

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

Tailwindcss 使用名称自定义宽度

Tailwindcss customize width with name

customization

width

tailwind-css