在HAML文件中使用Tailwind CSS的分数类

Question

我尝试在Rails的.html.haml文件中使用Tailwind CSS的w-2/3类。然而，斜杠导致Rails (或HAML)报错，我不知道如何格式化它以使其被接受。

是否有方法可以使用w-2/3等类，还是必须回到使用.html.erb？

- Darren

Answer 1

您需要明确添加类，类似于：

您需要明确添加类，类似于

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

请注意，如果您愿意，可以将此与类的简写语法结合使用，例如。

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

- matt

---

太棒了！感谢您的回复。我将在靠近我的开发机器时尝试并接受您的答案。 - Darren

Answer 2

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的信息，可能会使框架升级更加麻烦。

- nyi

---

非常感谢。这也非常有帮助！ - Darren