Custom "important" variant not working

[jameslkingsley]

This particular variant isn't working right now (0.1.2):

addVariant('important', ({ container }) => {
    container.walkRules(rule => {
        rule.selector = `.\\!${rule.selector.slice(1)}`

        rule.walkDecls(decl => {
            decl.important = true
        })
    })
})

The expected classes (eg. !bg-red) aren't generated/kept when evaluating this kind of markup (<p class="!text-red">)

[adamwathan]

Yeah this is a limitation of how variants have to work in the new engine, they are limited to the {variant}:{utility} format for the foreseeable future. We're going to add first class support for the !text-red style syntax instead 👍🏻

[jameslkingsley]

Ah okay gotcha - does that mean this would work instead?

addVariant('important', ({ container }) => {
    container.walkRules(rule => {
        rule.selector = `.${e('important:')}${rule.selector.slice(1)}`

        rule.walkDecls(decl => {
            decl.important = true
        })
    })
})

EDIT: Just checked, it does work

[timfee]

Might want to update https://tailwindcss.com/docs/plugins#complex-variants :)

[adamwathan]

Might want to update https://tailwindcss.com/docs/plugins#complex-variants :)

Why? That works in the regular Tailwind library, it's just the JIT project that has the limitation right now. Still in pre-release, lots left to do :)

[timfee]

Oh fiddlesticks. I realized the issue I had with the documentation not working was due to not adding the variant name in tailwind config to extend the property I was using. Signed, a Silly goose

[adamwathan]

Added first class support for !bg-black syntax in core as of v0.1.15 👍