how to parse the bootstrap or tailwind css names into the non-bootstrap or non-tailwind css names

Question

I made a web application based on bootstrap and tailwind, however I don't my web application UI to be visibly viewed in the browser tools. so I wonder if it is possible to parse the tailwind css names into the random names before web application publishing publicly ?

Answer 1

I'm most familiar with next.js, This is how I manage to do the hash for CSS. I hope you get an Understand of it.

index.jsx

   import styles from './index.module.css';
   const Home = () => <div className={styles.foo}>Hello World</div>;
   export default Home;

index.module.css

  .foo {
      font-size: 1.5rem;
      line-height: 2rem;
    }

next.config.js

const path = require('path');
const loaderUtils = require('loader-utils');

const hashOnlyIdent = (context, _, exportName) =>
  loaderUtils
    .getHashDigest(
      Buffer.from(
        `filePath:${path
          .relative(context.rootContext, context.resourcePath)
          .replace(/\\+/g, '/')}#className:${exportName}`,
      ),
      'md4',
      'base64',
      6,
    )
    .replace(/^(-?\d|--)/, '_$1');

module.exports = {
  webpack(config, { dev }) {
    const rules = config.module.rules
      .find((rule) => typeof rule.oneOf === 'object')
      .oneOf.filter((rule) => Array.isArray(rule.use));

    if (!dev)
      rules.forEach((rule) => {
        rule.use.forEach((moduleLoader) => {
          if (
            moduleLoader.loader?.includes('css-loader') &&
            !moduleLoader.loader?.includes('postcss-loader')
          )
            moduleLoader.options.modules.getLocalIdent = hashOnlyIdent;
        });
      });

    return config;
  },
};

this:

to :