why adding @apply to .field_with_errors doesnt work?

[buncis]

I got this warning in my inspect element

application.tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .field_with_errors {
    @apply flex w-full
  }
}

it works normally when the class is added from the start
but when its added by a form that has error its not work
ref active_record_validations#displaying-validation-errors-in-views

I'm also using turbo and it seems work normally without turbo

my current solution to this is I'm adding empty div with the class

 <div class="field_with_errors"></div>

I kinda got confused too sometimes it works sometimes its not

[rafaelfranca]

Thank you for the issue. tailwindcss-rails is mostly a wrapper around the tailwindcss command line tool. All the behavior is defined by tailwindcss, so if something isn't working with your css, it is likely it is a tailwindcss issue. So it is better to report to tailwindcss.

[iamjohnford]

@buncis I ran into something similar and used the safelist in tailwind.config.js. That might work as well since it lets tailwind know that the class exists.

module.exports = {
  safelist: [
    'field_with_errors'
  ]
}

[buncis]

because the .field_with_errors is added dynamically to the webpage

and tailwind css doing tree-shaking when compiling, it will try to remove all custom css that is not used

therefore .field_with_errors will be removed thus why the css is not applied

to make it stay we could declare the class without using @layer as per this guide

the final correct syntax are

@tailwind base;
@tailwind components;
@tailwind utilities;

.field_with_errors {
  @apply flex w-full
}

[buncis]

@iamjohnford I also found another solution that is applying the code outside layer

its because the guide say safelist is less favoured to use https://tailwindcss.com/docs/content-configuration#safelisting-classes

thanks for you for mentioning me with ur solution that I could finally found a solution

[iamjohnford]

@buncis Nice. Thanks for the info! What you mentioned above works for me as well.