Tailwindcss: @apply rule warning

Created on 11 Feb 2018  路  4Comments  路  Source: tailwindlabs/tailwindcss

I get this warning from webpacker server in Rails environment

"You are using @apply rule and custom property sets. This feature won't be included in next the major release of postcss-next. This most likely won't get any more support from browser vendors as the spec is yet considered deprecated and alternative solutions are being discussed. "

Is there any other alternative to export classes in case @apply gets deprecated?

Most helpful comment

Got it! Yeah so change it to this:

plugins:
  postcss-import: {}
  tailwindcss: 'app/javascript/css/tailwind.js'
  postcss-cssnext: {}

...and I bet that error will disappear unless you are using the postcss-next form of @apply in addition to how Tailwind uses it, ie:

@apply --some-custom-ruleset; // postcss-next
@apply .some-class; // Tailwind

All 4 comments

It sounds like you are running postcss-next before Tailwind; can you share your .postcssrc file or wherever it is that you setup your PostCSS plugins with Rails? Try moving postcss-next after Tailwind, I bet that will clear this warning.

postcss-next has its own version of @apply (which Tailwind is compatible with) and that version is eventually being removed from postcss-next. That won't affect @apply in Tailwind at all though; that will continue to work forever.

thanks so much, good to know

here is my .postcssrc file

plugins: postcss-import: {} postcss-cssnext: {} tailwindcss: 'app/javascript/css/tailwind.js'

Got it! Yeah so change it to this:

plugins:
  postcss-import: {}
  tailwindcss: 'app/javascript/css/tailwind.js'
  postcss-cssnext: {}

...and I bet that error will disappear unless you are using the postcss-next form of @apply in addition to how Tailwind uses it, ie:

@apply --some-custom-ruleset; // postcss-next
@apply .some-class; // Tailwind

yeap, that solves it, the error disappeared! thanks so much @adamwathan

Was this page helpful?
0 / 5 - 0 ratings