1

I'm trying to have an efficient way to re-use image-rendering: -webkit-optimize-contrast in different components in my Vue app. I don't want to create it as a <style scoped> and declare it in each component.

The only resource I could find about it is from Tailwind docs: Link. I tried downloading autoprefixer, and I Inserted the plugin as required:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

I can't figure out how to include the webkit in my tailwind config. I tried adding it to my theme, but I couldn't make it work. I'm not sure if I was correct with my approach:

theme: {
    extend: {
      webkit: {
        'image-rendering': '-webkit-optimize-contrast'
      }
   }
}

How do I include image-rendering: -webkit-optimize-contrast in my tailwind.config.js and use it as a class?

ChenBr
  • 1,671
  • 1
  • 7
  • 21
  • See [docs](https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer). (you could use either `base` or `components` layer). – tao Jun 09 '22 at 11:11
  • @tao, I came across this page a few moments before you commented and fixed it. I edited it under my question. Thanks for the help. – ChenBr Jun 09 '22 at 11:18
  • Do not add the answer inside the question. This creates indexing issues (it gets indexed as unanswered and won't be as useful for anyone looking for the same answer). Besides, by asking the question without an included solution, you leave the door open for improved or updated answers. I suggest adding the solution as an answer. Side note: docs suggest wrapping your custom stuff in `@layer { /* css here */ }`, where `` can be `base`, `components`, `utilities`. – tao Jun 09 '22 at 11:22
  • @tao, I didn't know it was possible to answer your own question. Thanks for letting me know. I've updated my question and commented with a solution, including your side note. Also, thanks for pointing out the wrapping (`@layer `). – ChenBr Jun 09 '22 at 11:34

1 Answers1

1

Solution:

Found a solution in Tailwind Docs (adding-custom-styles).

Add your custom CSS styling inside your CSS file (e.g. tailwind.css). Tailwind docs suggest wrapping your custom styles inside @layer <layer-name> { /* css here */ }, where <layer-name> can be base, components, etc.

Thank you @tao for pointing it out.

tailwind.css:

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

@layer components {
    .disable-blur{
        image-rendering: -webkit-optimize-contrast;
    }
  }

No need to install autoprefixer.

ChenBr
  • 1,671
  • 1
  • 7
  • 21