HAML 文件中带有 Tailwind CSS 的分数类

Question

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

有没有办法使用 w-2/3 等 classes，或者我是否必须返回使用 .html.erb？

Answer 1

您必须明确添加 class，例如

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

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

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

Answer 2

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

，这可能会有所帮助

要覆盖宽度 classes 以使用 _ 而不是 /，请在 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 的信息，并且可能会使框架升级更加麻烦。

HAML 文件中带有 Tailwind CSS 的分数类

Fractional classes with Tailwind CSS inside a HAML file

ruby

haml

tailwind-css

HAML 文件中带有 Tailwind CSS 的分数 类

Fractional classes with Tailwind CSS inside a HAML file

ruby

haml

tailwind-css

HAML 文件中带有 Tailwind CSS 的分数类