React/Tailwindcss modules name obfuscation breaks postcss nesting - reactjs

Question

So after extensive research I am here, I have a difficult to search problem which I'm hoping can be solved.
I've booted up a new project with Vite/ReactJS/Tailwindcss and I'm trying to use postcss to create nested CSS rules, they seem to be partially working but when using the ampersand (as in SCSS) things get a bit weird.
I have a bog standard Button React component with the following Button.module.css:
.Button {
#apply bg-primary;
&--disabled {
#apply opacity-50;
}
}
Styles are applied like so:
import styles from './Button.module.css';
const Button = ({ label, disabled }) => {
return (
<button type="button" className={[
styles.Button,
disabled ? 'Button--disabled' : ''
]}>
{label}
</button>
);
};
export default Button;
postcss.config.cjs:
module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
},
}
However in the browser the button looks like, note the obfuscated classes:
<button type="button" class="Button _Button_1fcg7_1 Button--disabled">Button</button>
While the (successfully, I note) compiled CSS looks like:
._Button_1fcg7_1 {
--tw-bg-opacity: 1;
background-color: rgb(29 161 242 / var(--tw-bg-opacity))
}
._Button--disabled_1fcg7_1 {
opacity: 0.5
}
Because the class name in the HTML compiles to .Button--disabled and the CSS selector gets obfuscated to ._Button--disabled_1fcg7_1, the styles are never applied. What gives?
Some further info as requested, package.json:
{
"name": "frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"postcss-nesting": "^10.1.10",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass": "^1.53.0"
},
"devDependencies": {
"#babel/core": "^7.18.6",
"#storybook/addon-actions": "^6.5.9",
"#storybook/addon-essentials": "^6.5.9",
"#storybook/addon-interactions": "^6.5.9",
"#storybook/addon-links": "^6.5.9",
"#storybook/builder-vite": "^0.2.0",
"#storybook/react": "^6.5.9",
"#storybook/testing-library": "^0.0.13",
"#types/react": "^18.0.15",
"#types/react-dom": "^18.0.6",
"#vitejs/plugin-react": "^2.0.0",
"autoprefixer": "^10.4.7",
"babel-loader": "^8.2.5",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.6",
"typescript": "^4.6.4",
"vite": "^3.0.0"
}
}
vite.config.ts:
import { defineConfig } from 'vite'
import react from '#vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
})
tailwind.config.cjs:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {
colors: {
primary: '#1da1f2',
},
}
},
plugins: [],
}

Answer 1

It's funny because different people with similar setups have the opposite problem.
Is there a way to obfuscate TailwindCSS classnames using PostCSS for React project in Vitejs?
I think that your problem comes from another place.
Can you share your package.json, tailwind.config.js, vite.config.js and rollup.config.js (if you have this last file) ?
Maybe you have some settings or packages configured related to obfuscation.
I don't know the vite ecosystem, but there are some packages that generate the behavior you want to avoid:
vite-plugin-tailwind-ofuscar
rollup-plugin-postcss