Unknown at rule @tailwindcss(unknownAtRules)

最新推荐文章于 2025-04-26 19:31:06 发布
最新推荐文章于 2025-04-26 19:31:06 发布
阅读量7.7k 收藏 9
点赞数 7
分类专栏： 工具 文章标签： vscode ide 编辑器 tailwind
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZY_FlyWay/article/details/125623803
版权

问题

使用nextjjs 集成tailwind之后，在global.css 添加tailwind 组件vscode提示警告。

Unknown at rule @tailwindcss(unknownAtRules)

截图如下：
在这里插入图片描述

 

解决

原因是css 不知道这条规则提示，如果没有提示警告。

可以屏蔽这条vscode 规则：

  1. 在根目录新建.vscode 文件夹
  2. 文件夹下新建settings.json 文件
  3. 添加规则
{
  "css.lint.unknownAtRules": "ignore"
}

在这里插入图片描述

保存之后提示没有了：

在这里插入图片描述

tailwindcss在Vue2使用，不生效解决
xxx
03-23 1万+
直接安装 npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 创建postcss.config.js // postcss.config.js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, } } 创建tailwind.config.js npx tailwindcss i
TailwindCSS一个实用第一的CSS框架用于快速构建自定义UI
08-08
Tailwind CSS 一个实用第一的CSS框架，用于快速构建自定义UI
vue3中使用 tilwindcss报错 Unknown at rule @tailwindcss
红烧咸咸鱼
07-08 557
vue3中使用 tilwindcss报错 Unknown at rule @tailwindcss
解决Unocss/Windcss/Tailwind样出现‘Unknown at rule @applyscss(unknownAtRules)’警告
china-quanda
04-17 6317
@apply 是 CSS 中的一个功能，它允许您将一组样式规则应用于一个选择器。这是一种实验性质的功能，并非所有的 CSS 解析器都支持它，特别是当你使用 PostCSS 和一些Unocss/Windcss/Tailwind CSS工作时。 在 VSCode 中遇到 Unknown at rule @applyscss(unknownAtRules) 的信息，可能是因为您的编辑器或其内置的 SCSS Linter 并不识别这一规则。
【已解决】React中使用TailWind时，警告Unknown at rule@tailwind
最新发布
m0_74097783的博客
04-26 225
安装Tailwind CSS IntelliSense和PostCSS Language Support，即可解决。使用 Vite 安装 Tailwind CSS时，将 Tailwind 指令添加到 CSS 中，输出警告：Unknown at rule@tailwind。
Unknown at rule @tailwindscss(unknownAtRules)
工作学习总结，技术分享
11-01 1686
Unknown at rule @tailwindscss(unknownAtRules)
使用Tailwind CSS 如何解决Unknown at rule @applyscss(unknownAtRules)警告？
u013023765的博客
07-29 9388
VSCode 解决方案：在工作区设置文件中 settings.json 加载 Tailwind 指令的自定义 CSS 数据集。答案来源：https://duncanleung.com/tailwind-css-unknown-at-rule/
tailwind创建.css文件识别找不到。@tailwind Unknown at rule @tailwind
FlyHDreamer的博客
04-24 524
tailwind.config.js文件将内容更改为。
关于Next项目引入tailwindCSS时ts警告Unknown at rule@tailwindCSS
m0_53197203的博客
04-10 650
搜索了很多别人的方法，在ts.config.js或者在taildwind.config.js里面修改配置的方法都不行，最后看tailwind社区的回答说是本地vscode的settings设置的问题，于是。
Tailwind CSS @apply Unknown at rule @apply scss(unknownAtRules) 解决方案
兰亭古墨
08-28 809
Unknown at rule @applyscss(unknownAtRules)
解决Windcss样式出现‘Unknown at rule @apply’警告
njkl2166的博客
12-15 2449
添加1. 新建文件.vscode/tailwindcss.json。2.新建文件.vscode/settings.json。3. 关闭vscode编辑器，重新打开。
tailwindcss-plugins:Tailwind CSS插件集合
05-03
Tailwind CSS插件 该插件包装了我们为编写的其他插件的集合。 插件包括： 实用程序包括： 安装 # install via npm npm i @viget/tailwindcss-plugins -D # install via yarn yarn add @viget/tailwindcss-plugins -D 用法 只需在tailwindcss.config.js文件中需要插件或实用程序，然后按照其文件夹中记录的每个文件的使用说明进行操作即可。 // utilities const a = require ( '@viget/tailwindcss-plugins/utilities/alpha' ) const { em , rem , remPair , pxPair } = require ( '@viget/tailwindcss-plugins/util
eslint-plugin-tailwindcss:用于Tailwind CSS用法的ESLint插件
03-31
eslint-plugin-tailwindcss 使用 v2.0.3强制执行最佳做法和并发性的规则 安装 您首先需要安装 ： $ npm i eslint --save-dev 接下来，安装eslint-plugin-tailwindcss ： $ npm install eslint-plugin-tailwindcss --save-dev 用法 添加tailwindcss到你的插件部分.eslintrc配置文件。 您可以省略eslint-plugin-前缀： { " plugins " : [ " tailwindcss " ] } 然后在“规则”部分下配置要使用的规则。 { " rules " : { " tailwindcss/classnames-order " : 2 , " tailwin
在 Vue+Vite 项目中安装 Tailwind CSS
一步一个坑
12-11 1622
在 vue+vite 中安装使用 Tailwind Css
如何解决出现Unknown at rule @applyscss(unknownAtRules)警告？
热门推荐
任磊
08-16 1万+
在nuxt框架当中使用tailwindcss出现：@apply下面出现警告 怎么取消这个警告呢？ 安装 Stylelint 首先，我们需要安装Stylelint本身和一个包含合理标准配置的包。 npm install --save-dev stylelint stylelint-config-standard 在使用nuxt创建项目的时候， 如果Stylelint已经安装了，就不用重复安装了 创建 Stylelint 配置 将stylelint.config.js使用以下内容命名..
Vite Vue3项目中unocss/vite插件实现tailwindcss
黄彪博客
06-14 1911
最近在学习Vite + Vue3项目的最佳实践， 看到一些开源的项目使用到了插件，趁机了解了一下Tailwind 或者 windi 样式库。tailwindcss 库的优势，可以参考Tailwind CSS是什么？有什么优势？视频。
Tailwind css系列教程（三）
huazi99于老师的博客
10-17 496
创建项目：npm create vite@latest vue3app01 --template vue进入项目文件夹：cd vue3app01加载默认库：npm install测试运行：npm run dev。
报错:Unknown at rule @apply
m_uncle的博客
07-21 3214
使用windicss,将使用到的class名集合到新的class中报错Unknownatrule@apply。解决办法lang="postcss"
vue3输入框禁止输入小数点
10-14
可以通过监听输入事件，在输入小数点时阻止默认行为来实现禁止输入小数点的效果。具体代码如下： ```html <template> <input type="text" @input="handleInput"> </template> <script> export default { methods: { handleInput(event) { const value = event.target.value; if (value.includes('.')) { event.preventDefault(); } } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

星宇大前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值