Tailwind CSS @apply Unknown at rule @apply scss(unknownAtRules) 解决方案

vscode 警告提示如下:

scss 复制代码
@tailwind base;
^^^^^^^^^ 
Unknown at rule @tailwind css(unknownAtRules)
scss 复制代码
@layer base {
  * {
    @apply text-gray-dark;
    ^^^^^^^^ 
    Unknown at rule @apply css(unknownAtRules)
  }
}

解决方法:

  1. 在根目录 .vscode 文件夹下 .vscode/settings.json 添加

    json 复制代码
    "css.customData": [".vscode/tailwindcss.json"]
  2. 创建 .vscode/tailwindcss.json

json 复制代码
	{
  "version": 1.1,
  "atDirectives": [
    {
      "name": "@tailwind",
      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
        }
      ]
    },
    {
      "name": "@apply",
      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you'd like to extract to a new component.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
        }
      ]
    },
    {
      "name": "@responsive",
      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
        }
      ]
    },
    {
      "name": "@screen",
      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n...gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
        }
      ]
    },
    {
      "name": "@variants",
      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
        }
      ]
    }
  ]
}
相关推荐
灵感__idea1 小时前
JavaScript高级程序设计(第5版):扎实的基本功是唯一捷径
前端·javascript·程序员
摇滚侠1 小时前
Vue3 其它API toRow和markRow
前端·javascript
難釋懷1 小时前
JavaScript基础-history 对象
开发语言·前端·javascript
beibeibeiooo1 小时前
【CSS3】04-标准流 + 浮动 + flex布局
前端·html·css3
拉不动的猪1 小时前
刷刷题47(react常规面试题2)
前端·javascript·面试
浪遏1 小时前
场景题:大文件上传 ?| 过总字节一面😱
前端·javascript·面试
Bigger2 小时前
Tauri(十八)——如何开发 Tauri 插件
前端·rust·app
355984268550552 小时前
医保服务平台 Webpack逆向
前端·webpack·node.js
百锦再3 小时前
React编程的核心概念:发布-订阅模型、背压与异步非阻塞
前端·javascript·react.js·前端框架·json·ecmascript·html5
thinkQuadratic3 小时前
scss预处理器对比css的优点以及基本的使用
前端·css·scss