While using tags with ":" tailwindcss build command fails.

[miratcan]

I have this definition on my css file:

#searchbox { @apply .flex .justify-between .items-center .flex-wrap
                    .md:flex-no-wrap .bg-gray-300 .mb-8 .rounded .py-3 .px-3}

I want to compile it with given command:

tailwindcss build assets/web.css -o static/web.css

I'm getting that error:

   🚫 CssSyntaxError: /Users/mirat/Repos/job_board_py/web/assets/web.css:8:14: `@apply` cannot be used with `.md\:flex-no-wrap` because `.md\:flex-no-wrap` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.md\:flex-no-wrap` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.
    at /Users/mirat/Repos/job_board_py/web/assets/web.css:8:1
    at /Users/mirat/Repos/job_board_py/web/assets/web.css:8:14
    at Input.error (/Users/mirat/.config/yarn/global/node_modules/postcss/lib/input.js:130:16)
    at AtRule.error (/Users/mirat/.config/yarn/global/node_modules/postcss/lib/node.js:111:32)
    at onError (/Users/mirat/.config/yarn/global/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:104:27)
    at /Users/mirat/.config/yarn/global/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:124:19
    at /Users/mirat/.config/yarn/global/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:125:94
    at arrayReduce (/Users/mirat/.config/yarn/global/node_modules/tailwindcss/node_modules/lodash/lodash.js:683:21)
    at Function.reduce (/Users/mirat/.config/yarn/global/node_modules/tailwindcss/node_modules/lodash/lodash.js:9707:14)
    at /Users/mirat/.config/yarn/global/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:107:34
    at arrayMap (/Users/mirat/.config/yarn/global/node_modules/tailwindcss/node_modules/lodash/lodash.js:639:23)
    at map (/Users/mirat/.config/yarn/global/node_modules/tailwindcss/node_modules/lodash/lodash.js:9580:14)

I think that when reading source css file it's adding "" before ":" character. So it can not be found.

Can anyone help?

[roennow]

you can't use the responsive classes like that. In plain css it would look like this

#searchbox {
    @apply flex justify-between items-center flex-wrap bg-gray-300 mb-8 rounded p-3
}
@screen md {
    #searchbox {
        @apply flex-no-wrap
    }
}

Afaik in sass/less it could be done like this:

#searchbox {
    @apply flex justify-between items-center flex-wrap bg-gray-300 mb-8 rounded p-3
    @screen md {
        @apply flex-no-wrap
    }
}

[PaulMorel]

To follow up @roennow, you actualy can use resposive classes like that, but only if you set the experimental flag applyComplexClasses to true in your tailwind.config.js file. Assuming you're using a config file.

It seems to be only documented in the change log and in this blog post: https://blog.tailwindcss.com/tailwindcss-1-7

Or, now that its out, use Tailwind v2. I think it's a main feature now.

[adamwathan]

This works in Tailwind 2.0 now 🚀 So going to close.