27
4
I'm trying to use both Pug and Tailwind CSS for a project. I encountered an issue when trying to utilize Tailwind's custom values syntax (using square brackets) in a Pug template.
我正在尝试使用PUG和尾风的CSS为一个项目。在尝试在PUG模板中使用TailWind的定制值语法(使用方括号)时，我遇到了一个问题。
I understand that h-[127px] is a valid Tailwind class for setting a custom height. However, it seems that Pug does not like the square brackets.
我知道h-[127px]是设置自定义高度的有效TailWind类。然而，帕格似乎不喜欢方括号。
Is there a way to integrate square bracket syntax in Pug while using Tailwind CSS?
If not, what's the recommended workaround to use custom values from Tailwind within a Pug template?
Thank you for any assistance!
有没有办法在PUG中集成方括号语法，同时使用TailWind CSS？如果不是，在PUG模板中使用来自TailWind的自定义值的推荐解决方法是什么？感谢您的帮助！
Shot in the dark, can you try escaping the slash? ie h-\[127px\]
是在黑暗中被枪杀的，你能试着从斜线中逃脱吗？IE h-\[127px\]
Square brackets (even escaped) won't work using Pug's shorthand class syntax:
使用PUG的速记类语法时，方括号(甚至转义)将不起作用：
个人中心
文章发布
退出// won't work
img.avatar.h-[127px](src='foobar.png')
// also won't work
img.avatar.h-\[127px\](src='foobar.png')
But you can use square brackets with the regular attribute syntax:
但您可以在常规属性语法中使用方括号：
// will work
img(class='avatar h-[127px]', src='foobar.png')
Also note you can mix the class shorthand with a regular class attribute, so you can keep using the shorthand for all of the classes without brackets, and only use the longhand for the offending classes:
还请注意，您可以将类速记与常规类属性混合使用，这样您就可以继续对所有不带括号的类使用速记，而只对有问题的类使用速记：
// will work, and is equivalent to the previous example
img.avatar(class='h-[127px]', src='foobar.png')
0
将对象从 app.js 传递给 Pug router.get('/', getMenuList, function (req, res, next) { res.render('menu_it
我们如何在 Jade/Pug 中跨多行写入长属性值？ SVG 路径往往很长。我们希望将属性值写在多行上以提高可读性。例如，Mozilla 的 tutorial用 HTML 编写很容易阅读。 有什么方法
我很难找到一个好的解决方案。问题是我想要在我的导航项目上动态更新事件类，但是我不知道如何去做。任何人都可以帮助我解决自动为当前页面对应的导航项目提供某个类的解决方案吗？ 这是我的 layout.pug
如果我想引用文字 !{a}在代码中。我该怎么办？ - var a = '5' // I have to use the variable name "a" script. var str = "!
我正在尝试向 Jade 模板添加动态类。像这样: - var obj = {a: 1, b: 2, c: 3}; - var len = Object.keys(obj).length; .abc-#
如何在 Pug 模板引擎中阻止注释掉代码？ 我知道如何注释掉一行: //-doesn't show 但我不想像这样写完整的 html 评论: 最佳答案 //- Just indent the
我想要这样的东西: html head style(type="text/css") table { width: 100% } body
我正在 keystone 中使用哈巴狗，在添加侧面导航时出现这样的错误。 > 6| a(href="#")About --------------------^ 7| a(href="#")Servi
这是我要完成的事情的简化版本: mixin foo(bar) = bar + ".html" a(href= +foo("baz")) test 我想将 anchor 标记编译为 test ，
Jade 不再被称为“ Jade ”。它现在被称为“帕格”。为了将旧的 jade 项目转换为新的 pug 格式，您需要将所有旧的 .jade 文件重命名为 .pug 文件。 手工制作既痛苦又乏味，肯定
我已经安装 https://github.com/pug-php/pug使用 composer，现在我的项目中有一个子目录 vendor/pug-php/pug，但我不知道如何使用它。 如果我尝试 $
我正在尝试编写一个简单的应用程序，例如待办事项列表，当我按下按钮时，我需要动态创建(在div中使用增量id)，并向HTML输入输入一些文本。例如: 问题是，当我尝试获取 var data 时，
是否可以在父 pug 文件中为 includeed pug 文件传递参数。例如，如果我有一个子模板 example.pug: p #{name}'s Pug source code! 还有一个父级
我需要在 pug 文件中插入一个包含一些 pug 格式代码的字符串。 我测试过的内容: - var text = "i.home.icon" div= text div !{text} div #{t
我有以下代码(Chart.js 片段): datasets: [{ label: 'Hashes/s', data: numbe
我有一个带有数组的 pug 模板，我想将其传递给用于填充某些 schema.org (json) 标记的 mixin。 代码如下: 配置文件.pug include ../components/bio
我正在尝试从服务器加载数据到我的哈巴狗模板中。 我的路线如下所示: app.get('/serverdata', async(req, res) => { const chartData = []
我正在使用 Node.js、Express 和 Pug 创建一个简单的 Web 服务器。 包.json: { "name": "testing", "version": "0.0.7",
我的 src/ 目录如下: src/ ---about/ ------history.pug ------mission.pug ---contact/ ------email.pug ---inde
我在 Symfony 2.8 中安装 pug-php/pug-symfony 时遇到问题。我从全新的 symfony 安装开始并执行 composer require pug-php/pug-symf
我是一名优秀的程序员,十分优秀！