CODEWITHSUNDEEP
htmlcsstailwind-css
shingo.nakanishi
shingo.nakanishi

Reputation: 2837

How do I take it as a parameter in 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?

Upvotes: 1

Views: 426

Answers (1)

Adrian Kokot
Adrian Kokot

Reputation: 3246

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.

Upvotes: 1

Related Questions