我如何将其作为 JIT 中的参数?

本文介绍了我如何将其作为 JIT 中的参数?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送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屋！