Question

我想在我的Gridsome项目中使用Tailwinds应用功能。但是抛出错误，无法找到来自顺风的css类。

复制步骤：

1）创建一个新的Gridsome项目

3）在Assets文件夹中创建CSS文件，并导入main.js

import "~/assets/style.css"

4）在CSS文件中创建CSS类

5）在具有顺风成分的CSS中使用@apply

什么也没发生...由于正常的CSS被应用，因此css文件已正确导入有些元素（如圆形）似乎也可以使用，而其他元素（如bg-blue-500）则不能。

Answer 1

据我所知，似乎与Tailwind记录的行为及其实际行为之间存在脱节。

根据documentation关于使用@apply提取组件的说明：

..此类类应直接在@tailwind components指令之后添加，以避免特殊性问题。

实际上，这会生成一个主style.css文件，如下所示：

@tailwind base;

@tailwind components;

// Note: you could also just add a custom CSS file here. 
.btn-blue {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
.btn-blue:hover {
  @apply bg-blue-700;
}

@tailwind utilities;

但是，实际上，出于完全合乎逻辑的原因，这总是会引发构建错误。 Tailwind使用从utilities文件派生的类注入tailwind.config.js文件。

CSS是线性编译的，因此bg-blue-700并不存在通过引用进行引用的情况，直到导入utilities并通读。

即使文档中建议不要这样做，但在之后utilities移动组件类也可以解决编译错误：

@tailwind base;

@tailwind components;

@tailwind utilities;

// Note: you could also just add a custom CSS file here. 
.btn-blue {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
.btn-blue:hover {
  @apply bg-blue-700;
}

不理想，但这对我有用。

Answer 2

根据documentation，将其包裹在@layers组件中{}以防止出现不需要的行为

像这样：

@tailwind base;

@tailwind components;

@tailwind utilities;

@layers components {
    // Note: you could also just add a custom CSS file here. 
    .btn-blue {
      @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
    }
    .btn-blue:hover {
      @apply bg-blue-700;
    }
}

Gridsome的Tailwind插件中的@apply不起作用

2 个答案: