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

Posted 2023-02-22

【中文标题】来自 Gridsome 的 Tailwind 插件的 @apply 不起作用

【英文标题】：@apply from Gridsome's Tailwind plugin does not work

【发布时间】：2019-12-09 20:30:52

【问题描述】：

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

重现步骤：

1) 创建新的 Gridsome 项目

2) 安装顺风插件 Github page Npm page

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

import "~/assets/style.css"

4) 在 css 文件中创建 css 类

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

什么都没有发生... css 文件已正确导入，因为应用了正常的 css 一些像rounded这样的元素似乎太有用了，但其他像bg-blue-500这样的元素却没有。

【问题讨论】：

看来只有简单的实用类可以和apply github.com/tailwindcss/custom-forms/issues/12一起使用

所以 bg-blue-500 也应该可以工作，但是这个错误也很...

另一个发现：tailwind.config 中定义的 bg_c​​ustom_color，js 不抛出错误并且样式被应用

我可以在 main.css 和我的 vue 文件中的 <style> 标记中使用 @apply。我必须在每个声明中添加 @apply 以避免 vscode 中的语法错误，但它可以工作。可能是配置问题？

【参考方案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 使用派生自 tailwind.config.js 文件的类注入 utilities 文件。

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;

不理想，但这对我有用。

【讨论】：

答案是在实用程序之后放置组件，但代码中另有说明.. 我无法进行编辑以更正它

【参考方案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;