Search code examples
cssnext.jswebkit

Could we have independent browser CSS in Next JS

If I write the CSS as style jsx in Next JS, do I need to write all browser supports manually in my styles or Next JS add them automatically during build time for the production? for example:

transofm:translate(50%,50%)
-webkit-transofm:translate(50%,50%)  // such line will be added automatically during build time?

......

Solution

  • It does not add them automatically for CSS in JS by default, but Next.js uses PostCSS by default with Autoprefixer plugin (you should have a postcss.config.js file in your root dir), so you can use postcss-js (also mentioned in autoprefixer docs)

    Default behavior of PostCSS in Next: https://nextjs.org/docs/advanced-features/customizing-postcss-config