HAML 文件中带有 Tailwind CSS 的小数类答案

【问题标题】：Fractional classes with Tailwind CSS inside a HAML fileHAML 文件中带有 Tailwind CSS 的小数类
【发布时间】：2019-08-20 11:49:55
【问题描述】：

我正在尝试在 Rails .html.haml 文件中使用 Tailwind CSS 中的 w-2/3 类和 HAML。正斜杠导致 Rails（或 HAML）抛出异常，我不知道如何格式化它以使其被接受。

有没有办法使用w-2/3 等类，还是我必须重新使用.html.erb？

【问题讨论】：

标签： ruby haml tailwind-css

【解决方案1】：

Tailwind 中使用的类名可以被覆盖。如果您倾向于经常使用这些类并且不想编写扩展版本（%div{class: 'w-1/2'} 或 %div(class="w-1/2")），这可能会有所帮助。

要覆盖宽度类以使用_ 而不是/，请在tailwind.config.js 中使用以下配置：

module.exports = {
  theme: {
    extend: {},
    width: (theme) => ({
      auto: 'auto',
      ...theme('spacing'),
      '1_2': '50%',
      '1_3': '33.333333%',
      '2_3': '66.666667%',
      '1_4': '25%',
      '2_4': '50%',
      '3_4': '75%',
      '1_5': '20%',
      '2_5': '40%',
      '3_5': '60%',
      '4_5': '80%',
      '1_6': '16.666667%',
      '2_6': '33.333333%',
      '3_6': '50%',
      '4_6': '66.666667%',
      '5_6': '83.333333%',
      '1_12': '8.333333%',
      '2_12': '16.666667%',
      '3_12': '25%',
      '4_12': '33.333333%',
      '5_12': '41.666667%',
      '6_12': '50%',
      '7_12': '58.333333%',
      '8_12': '66.666667%',
      '9_12': '75%',
      '10_12': '83.333333%',
      '11_12': '91.666667%',
      full: '100%',
      screen: '100vw',
    }),
  }
}

显然，这会重复来自 Tailwind 的信息，并且可能会使框架升级更加麻烦。

【讨论】：

非常感谢。这也非常有用！

【解决方案2】：

您必须显式添加类，例如

%div{:class => "w-2/3"}

请注意，如果需要，您可以将其与类的简写语法结合使用，例如

.foo{:class => "w-2/3"}

【讨论】：

太棒了！感谢您的回复。当我回到我的开发机器附近时，我会试一试，然后接受你的回答。