如何让 @apply 在 TailwindCSS 中工作?

     2023-03-07     234

关键词:

【中文标题】如何让 @apply 在 TailwindCSS 中工作?【英文标题】:How do I get @apply to work in TailwindCSS? 【发布时间】:2020-04-12 11:34:00 【问题描述】:

我似乎无法让 TailwindCSS @apply 工作。 Visual Studio Code 似乎无法识别我的代码。

.btn 
  @apply mb-2 bg-purple-600 text-gray-100 font-bold p-3 rounded;

【问题讨论】:

【参考方案1】:

您在应用命令“.”中定义的没有顺风类名称。你不需要放它。

作为一种解决方案,将所有顺风元素写在一行中。

.btn 
  @apply mb-2 bg-purple-600 text-gray-100 font-bold p-3 rounded;

【讨论】:

【参考方案2】:

全部写在一行中:

.btn 
  @apply mb-2 bg-purple-600 text-gray-100 font-bold p-3 rounded;

希望对你有帮助。

【讨论】:

不是这样的,见官贴:tailwindcss.com/docs/utility-first

为啥在带有tailwindcss的nuxtjs应用程序中出现错误@apply`不能与.xl\:w-8\/12一起使用?

】为啥在带有tailwindcss的nuxtjs应用程序中出现错误@apply`不能与.xl\\\\:w-8\\\\/12一起使用?【英文标题】:WhyinnuxtjsapplicationwithtailwindcssIgoterror@apply`cannotbeusedwith.xl\\:w-8\\/12?为什么在带有tailwindcss的nuxtjs应用程序中出现错误@apply`不能与... 查看详情

让 styled-jsx 在 NextJS 中使用 tailwindcss [关闭]

】让styled-jsx在NextJS中使用tailwindcss[关闭]【英文标题】:Gettingstyled-jsxtoworkwithtailwindcssinNextJS[closed]【发布时间】:2021-03-0206:30:33【问题描述】:我正在尝试让styled-jsx在NextJS中与tailwindcss一起使用。现场样本:https://codesandbox.io/s/nex... 查看详情

为啥在tailwindcss的自定义类中我不能定义2悬停:?

】为啥在tailwindcss的自定义类中我不能定义2悬停:?【英文标题】:WhyincustomclassoftailwindcssIcannotdefine2hover:?为什么在tailwindcss的自定义类中我不能定义2悬停:?【发布时间】:2021-07-0523:26:27【问题描述】:在带有tailwindcss2的Laravel... 查看详情

如何使用 TailwindCSS 指定高度:适合内容?

】如何使用TailwindCSS指定高度:适合内容?【英文标题】:Howtospecifyheight:fit-contentwithTailwindCSS?【发布时间】:2021-06-0619:24:49【问题描述】:使用TailwindCSS,我试图让<div>适合其孩子的高度,即<button>。我的代... 查看详情

让 Pandas DataFrame apply() 使用所有内核?

....apply(myfunc,axis=1)时,多核机器将浪费其大部分计算时间。如何使用所有内核在数据帧上并行运行 查看详情

如何在 nuxt 中使用 tailwindcss 过渡?

】如何在nuxt中使用tailwindcss过渡?【英文标题】:Howtousetailwindcsstransitionsinnuxt?【发布时间】:2021-05-2811:50:22【问题描述】:所以我试图在我的nuxt应用程序中使用tailwindcss转换,我想基本上使用vue转换提供的类名来动画模式这是... 查看详情

如何在 tailwindcss 中创建自定义变体?

】如何在tailwindcss中创建自定义变体?【英文标题】:Howtocreateacustomvariantintailwindcss?【发布时间】:2021-01-1016:59:48【问题描述】:我在tailwindcss文档之后制作了dark变体,但这不起作用,不幸的是,在这个文档中,没有给出确切的... 查看详情

如何阻止网格单元在tailwindcss中水平拉伸?

】如何阻止网格单元在tailwindcss中水平拉伸?【英文标题】:howtostopgridcellstostretchinghorizontallyintailwindcss?【发布时间】:2022-01-2323:47:29【问题描述】:我不知道该如何解释,但我希望我的网格完全适合这个黑板,即使我更改了窗... 查看详情

如何在 smelte 组件中使用 tailwindcss 颜色?

】如何在smelte组件中使用tailwindcss颜色?【英文标题】:HowcanIusetailwindcsscolorsinsmeltecomponents?【发布时间】:2021-09-1013:50:26【问题描述】:我正在尝试使用svelte提供服务,并且我还在UI中使用smelte和tailwindcss。我放置按钮组件并设... 查看详情

仅删除“@apply”的 Sublime 语法高亮

...2019-10-1814:35:30【问题描述】:我正在为我的scss文件使用Tailwindcss,它引入了一个新命令@apply。但问题是Sublime突出了这一点(可能是错误或无法识别的语法)。如何关闭单个突出显示,这样它就不会显示为我所有的@apply规则的明... 查看详情

如何让 kubernetes “kubectl apply”不更新现有部署

】如何让kubernetes“kubectlapply”不更新现有部署【英文标题】:Howtokubernetes"kubectlapply"doesnotupdateexistingdeployments【发布时间】:2020-02-0722:16:13【问题描述】:我有一个.NET-coreWeb应用程序。这将部署到Azure容器注册表。我使用... 查看详情

如何在 tailwindcss 中为 plugin.withOptions 使用 theme()

】如何在tailwindcss中为plugin.withOptions使用theme()【英文标题】:Howtousetheme()forplugin.withOptionsintailwindcss【发布时间】:2021-07-0708:28:55【问题描述】:所以我想用这个tailwindcss插件,我需要自定义颜色。这是基于tailwindcssdocs。module.expor... 查看详情

如何在 NuxtJS 上获取 Tailwindcss 2.x

】如何在NuxtJS上获取Tailwindcss2.x【英文标题】:HowtogetTailwindcss2.xonNuxtJS【发布时间】:2021-05-2418:14:07【问题描述】:我尝试在NetlifyCMS的nuxtJS样板上安装Tailwindcss2.x,但在开发版本中,我遇到了这个错误:模块构建失败(来自./node_... 查看详情

如何在rails中使用webpacker安装tailwindcss [关闭]

】如何在rails中使用webpacker安装tailwindcss[关闭]【英文标题】:Howtoinstalltailwindcsswithwebpackerinrails[closed]【发布时间】:2021-02-2704:39:35【问题描述】:我想用webpacker和RubyonRails安装tailwindcss。我遵循了一些教程,但都已经过时了。我... 查看详情

覆盖链式选择器上的 Tailwind CSS @apply 指令

】覆盖链式选择器上的TailwindCSS@apply指令【英文标题】:OverrideTailwindCSS@applydirectiveonchainedselectors【发布时间】:2021-12-1720:21:14【问题描述】:有没有办法覆盖链式选择器上的@apply指令?示例:https://play.tailwindcss.com/2nmGe5yad3HTML<u... 查看详情

如何在生产中混淆 Tailwindcss HTML 类名?

】如何在生产中混淆TailwindcssHTML类名?【英文标题】:HowcanIobfuscateTailwindcssHTMLclassnamesinproduction?【发布时间】:2021-05-2410:20:55【问题描述】:在使用Tailwindcss时,如何在生产环境中混淆HTML类名?根据tailwind的文档,我的项目使用R... 查看详情

如何在tailwindcss表中隐藏小型设备上的列?

】如何在tailwindcss表中隐藏小型设备上的列?【英文标题】:Howintailwindcsstablehidecolumnonsmalldevices?【发布时间】:2021-07-3010:29:11【问题描述】:使用tailwindcss2,我想在小型设备上使用sm:hidden:隐藏表格中的一些列:<tableclass="table-a... 查看详情

TailwindCSS:如何在网格中从右侧添加元素?

】TailwindCSS:如何在网格中从右侧添加元素?【英文标题】:TailwindCSS:Howtoaddelementsfromtherightsideinagrid?【发布时间】:2021-03-2117:23:49【问题描述】:给定类名“gridgrid-cols-5gap-2place-items-end”我得到:想要:是否有解决此问题的纯CSS... 查看详情