问题描述
限时送ChatGPT账号..我正在使用带有 JIT 的 tailwindcss.
我正在创建自定义实用程序.我做的没有参数.
我想让它接受 JIT 参数.(我不知道这是否正确)
代码:
@tailwind base;@tailwind 组件;@tailwind 实用程序;@layer 实用程序 {@variants 响应 {.under-line:after {内容:《》;显示:块;宽度:80%;/* <---- 我如何将它作为参数?*/边框顶部:无;左边界:无;边界右:无;边框底部:实心;边框颜色:黑色;边框宽度:1px;}}}
使用场景:
foo
如何将其作为参数?
解决方案仅当我们假设您只想传递百分比值时,以下解决方案才有效.
也许这不是一个直接的答案,但我认为在这种情况下它会帮助你.
您可以在 TailwindCSS 中定义自定义插件.有了这些知识,您可以使用 tailwind config 生成此类的 100 个变体,例如 .under-line-x
,其中 x
是 1-100 范围内的数字并设置:after
元素 width
属性为百分比.
您的顺风配置的开头应该是这样的:
const plugin = require('tailwindcss/plugin')模块.出口 = {插件: [插件(功能({ addComponents }){让组件 = {};for (让 i = 1; i <= 100; i++) {组件[`.under-line-${i}:after`] = {内容: '""',显示:'块',宽度: i + '%',边界:'无',borderBottom: '实心',边框颜色:'黑色',边框宽度:'1px'}}添加组件(组件)})],//其余的配置}
总的来说,JIT 将删除未使用的变体.
I am using tailwindcss with JIT.
I am creating a custom utility. I made it without parameters.
I would like to make it accept JIT parameters. (I don't know if that's the right term)
code:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
@variants responsive {
.under-line:after {
content: "";
display: block;
width: 80%; /* <---- How do I take it as a parameter? */
border-top: none;
border-left: none;
border-right: none;
border-bottom: solid;
border-color: black;
border-width: 1px;
}
}
}
usage scenarios:
<div class="under-line-[80%]">foo</div>
How do I take it as a parameter?
解决方案The below solution is valid only if we assume that you want to pass only percent values.
Maybe it's not a direct answer, but I think that it'll help you in this case.
You can define a custom plugin in TailwindCSS. With that knowledge, you can generate with tailwind config 100 variants of this class like .under-line-x
, where x
is a number from range 1-100 and is set to :after
element width
property as percent.
The beginning of your tailwind config should look like that:
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function ({ addComponents }) {
let components = {};
for (let i = 1; i <= 100; i++) {
components[`.under-line-${i}:after`] = {
content: '""',
display: 'block',
width: i + '%',
border: 'none',
borderBottom: 'solid',
borderColor: 'black',
borderWidth: '1px'
}
}
addComponents(components)
})
],
// rest of your config
}
Overall, JIT will remove unused variants.
这篇关于我如何将其作为 JIT 中的参数?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论