时间戳

首页 > 解决方案 > 来自 Gridsome 的 Tailwind 插件的 @apply 不起作用

css - 来自 Gridsome 的 Tailwind 插件的 @apply 不起作用

问题描述

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

重现步骤：

1) 创建新的 Gridsome 项目

2）安装tailwind插件 Github页面 Npm页面

3）在assets文件夹中创建css文件并在main.js中导入

import "~/assets/style.css"

4）在css文件中创建css类

5) 在带有尾风组件的 css 中使用 @apply

没有任何反应... css 文件已正确导入，因为应用了正常的 css 某些元素（如 rounded）似乎太有效，但其他元素（如 bg-blue-500）则不适用。

标签： cssvue.jstailwind-cssgridsome

解决方案

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

根据有关使用以下方法提取组件的文档@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;

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

CSS 是线性编译的，因此在导入并通读bg-blue-700之前不存在通过 apply 进行引用。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;
}

不理想，但这对我有用。

推荐阅读