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"
        }
      ]
    }
  ]
}
相关推荐
一城烟雨_33 分钟前
vue3 实现将html内容导出为图片、pdf和word
前端·javascript·vue.js·pdf
树懒的梦想1 小时前
调整vscode的插件安装位置
前端·cursor
低代码布道师2 小时前
第二部分:网页的妆容 —— CSS(下)
前端·css
一纸忘忧2 小时前
成立一周年!开源的本土化中文文档知识库
前端·javascript·github
涵信3 小时前
第九节:性能优化高频题-首屏加载优化策略
前端·vue.js·性能优化
前端小巷子3 小时前
CSS单位完全指南
前端·css
SunTecTec4 小时前
Flink Docker Application Mode 命令解析 - 修改命令以启用 Web UI
大数据·前端·docker·flink
拉不动的猪5 小时前
前端常见数组分析
前端·javascript·面试
小吕学编程5 小时前
ES练习册
java·前端·elasticsearch
Asthenia04125 小时前
Netty编解码器详解与实战
前端