Obfuscate Css Hide Transform Change Encrypt Clash With Nextjs

To obfuscate CSS code in your react project, use Nextjs. Here are my notes:

create file in src/components/layout.module.css

Obfuscate css hide transform change encrypt clash

This is what CSS Modules does: It automatically generates unique class names. As long as you use CSS Modules, you don’t have to worry about class name collisions.

layout.module.css:

.container {
    max-width: 36rem;
    padding: 0 1rem;
    margin: 3rem auto 6rem;
  }
  
import styles from './layout.module.css';

<div className={styles.container}></div>

in browswer will generate something like this: <div class="__34hdt"></div>