Tailwindcss: @apply: clearfix missing & !important not working

[ouun]

Using @applyto add .cleafix as described on https://tailwindcss.com/docs/floats/#app results in the error "@apply cannot be used with .clearfix because .clearfix either cannot be found, [...]"

I also found the notice about using !important for @apply very useful in the docs:
`// Input
.btn {
@apply font-bold py-2 px-4 rounded !important;
}

// Output
.btn {
font-weight: 700 !important;
padding-top: .5rem !important;
padding-bottom: .5rem !important;
padding-right: 1rem !important;
padding-left: 1rem !important;
border-radius: .25rem !important;
}`

But using the exact example also has the error: Invalid CSS after "...-2 px-4 rounded": expected "}", was "!important;"

Thank you so much for this amazing work! Happy to use it. :)

[tlgreg]

The issue is that clearfix is actually .clearfix:after which will not work as @apply only works with plain single class selectors. It is phrased in the docs as "@apply will not work for mixing in hover, focus, or responsive variants of another utility", but this is actually true for pseudo-elements (or many other type of selectors).

[benface]

As for your second issue (!important), I believe you’re using Sass and that syntax error actually comes from Sass. Try wrapping it with interpolation tags:

@apply font-bold py-2 px-4 rounded #{!important};

[adamwathan]

Closing as intended behavior at least for now, although it would be nice to make this work eventually.