使用Tailwind CSS 如何解决Unknown at rule @applyscss(unknownAtRules)警告?

这篇具有很好参考价值的文章主要介绍了使用Tailwind CSS 如何解决Unknown at rule @applyscss(unknownAtRules)警告?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

答案来源:https://duncanleung.com/tailwind-css-unknown-at-rule/

问题如下:

@tailwind base;
^^^^^^^^^ 
Unknown at rule @tailwind css(unknownAtRules)

VSCode 解决方案:在工作区设置文件中 settings.json 加载 Tailwind 指令的自定义 CSS 数据集文章来源地址https://www.toymoban.com/news/detail-705605.html

注意:通常需要重新加载 VS Code 窗口才能识别更改。
// .vscode/settings.json
{
  "css.customData": [".vscode/tailwindcss.json"],
}
// .vscode/tailwindcss.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"
        }
      ]
    }
  ]
}

到了这里,关于使用Tailwind CSS 如何解决Unknown at rule @applyscss(unknownAtRules)警告?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Naive UI 搭配Tailwind CSS 出现按钮变白,样式冲突,不兼容的解决

    Tailwind CSS 的预热样式默认会替换Naive UI的样式导致出现冲突,主要有: 按钮底色变成白色、按钮涟漪出现绿边、字体异常等, 在最新的V3版本tailwindcss解决很简单,Preflight关闭即可: tailwind初始化css去掉以下一行就行: 这个选项本质上是为了项目的样式一致性,但是使用Na

    2024年02月03日
    浏览(55)
  • Tailwind CSS入门教程

    Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind是一款CSS框架,它的主要特点是提供了一系列的CSS类,可以快速地构建出各种样式。Tailwind的发展历史可以追溯到2017年,由Adam Wathan、Steve Schoger和Jonathan Reinink共同创建。Tailwind的设计理念是提供一系列的原子类,

    2024年02月13日
    浏览(36)
  • 报错解决:Ubuntu插入硬盘不能挂载,Error mounting /dev/sdb1 at /media/×××/×××: unknown filesystem type ‘exfat’

    博主的软硬件环境(供参考): Linux(Ubuntu 18.04) USE 3.0 在插入硬盘后,ubuntu无法识别和挂载,具体报错信息如下(其中涉及个人信息的内容已打码): Error mounting /dev/sdb1 at /media/ / : Command-line `mount -t “exfat” -o “uhelper=udisks2,nodev,nosuid,uid=1000,gid=1000,iocharset=utf8,namecase=0,erro

    2024年02月09日
    浏览(54)
  • 谈谈Tailwind CSS:实用优先的 CSS 框架到底好不好?

    探讨 Tailwind CSS 的实现优势,比较原生 CSS、预编译器 SCSS 和 Tailwind CSS 在一个简单登录页面上的效果。

    2024年02月01日
    浏览(42)
  • Tailwind css优于Bootstrap 7个原因

    在某些情况下,Tailwind css 比 Bootstrap 更好,因为它是一个低级 CSS 框架,可让您根据需要构建自己的自定义组件。如果使用得当,它非常注重性能,可以显着减少 CSS 负载并确保更快的渲染。如果 Web 性能和自定义是您的首要任务,请选择 Tailwind。 原因 1:Tailwind CSS 生成的 C

    2024年02月14日
    浏览(34)
  • 使用命令行方式搭建uni-app + Vue3 + Typescript + Pinia + Vite + Tailwind CSS + uv-ui开发脚手架

    项目代码以上传至码云,项目地址:https://gitee.com/breezefaith/uniapp-vue3-ts-scaffold 近日心血来潮想做一个开源项目,目标是做一款可以适配多端、功能完备的模板工程,包含后台管理系统和前台系统,开发者基于此项目进行裁剪和扩展来完成自己的功能开发。但前台系统花样繁多

    2024年01月20日
    浏览(60)
  • 分享 10 个 Tailwind CSS UI 站点,助你快速启动项目

    Midjourney 创作,未来UI Tailwind CSS 是一个为快速创建定制化 UI 组件而设计的实用型框架。与其他 CSS 框架或库不同,Tailwind CSS 组件没有预先设置好样式。相反,您可以使用 Tailwind 的低级实用类来为 CSS 元素设置样式,如 margin、flex、color 等。 自从 2017 年发布以来,Tailwind CSS 在

    2024年02月06日
    浏览(40)
  • vue3 + Tailwind Css + Vite 搭建快速开发前端样式环境

    一个功能类优先的 CSS 框架,用于快速构建定制的用户界面。这是来自 TailwindCss 官方定义。 中文网站 Tailwindcss 基于原子化理念,将样式重复性代码降到最小,原本开发最大限度基于类名的声明块不重复,现在Tailwindcss基于单独一句声明不重复。 活跃度 github starts 数量达到

    2024年02月04日
    浏览(67)
  • 【Tailwind CSS】当页面内容过少,怎样让footer保持在屏幕底部?

    footer通常写版权信息等,显示在页面底部。如果页面内容过少,则footer会出现在屏幕中间位置,很尴尬。在 Tailwind 中,你可以使用flex来实现footer保持在屏幕或页面底部。 代码: 用flex包裹全部页面内容,footer设置类名:mt-auto 即可。 参考:playground

    2024年02月08日
    浏览(38)
  • 超越传统:深入比较Bootstrap、Foundation、Bulma、Tailwind CSS和Semantic UI的顶级CSS框架!

    在Web开发中,选择适合项目需求的CSS框架可以极大地简化界面设计和响应式布局的工作。本文将详细介绍一些流行的CSS框架,并提供代码示例和比较,以帮助您做出明智的选择。 Bootstrap是最受欢迎和广泛使用的CSS框架之一。它提供了丰富的预定义样式和组件,适用于快速构建

    2024年02月16日
    浏览(79)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包