如何在生产中混淆 Tailwindcss HTML 类名？答案

【问题标题】：How can I obfuscate Tailwindcss HTML classnames in production?如何在生产中混淆 Tailwindcss HTML 类名？
【发布时间】：2021-05-24 10:20:55
【问题描述】：

在使用 Tailwindcss 时，如何在生产环境中混淆 HTML 类名？根据 tailwind 的文档，我的项目使用 React.js 和 CRACO。

【问题讨论】：

也许这可以帮助你github.com/sndyuk/mangle-css-class-webpack-plugin除此之外：想想是否真的有必要
当然，隐藏它有什么意义？毕竟是网络。
它没用，这样做有什么意义。 tailwindcss 是基于实用程序的框架，它具有巨大的 css 属性和类名。随着项目的发展，混淆使构建变得越来越慢。所以我宁愿不这样做。
我知道如果有人打算复制他们可以复制的网站，但至少，我仍然更喜欢缩小或隐藏类名，因为它会减慢速度并阻止那些不熟悉编码的人。
@Aaron 这是一个愚蠢的问题，但你知道如何设置 craco.config.js 来使用 mangle-css 吗？ tailwind 建议使用 CRACO（创建 React 应用程序配置覆盖）以在使用 Reactjs 时使顺风工作。

【解决方案1】：

我看不出混淆 css 类名的意义。但是你可以使用 Webpack 来做，在下面的博文中有详细提到。

【讨论】：

我想这样做，但是在使用 Tailwindcss 和 Reactjs 时，他们建议使用 CRACO（创建 React 应用程序配置覆盖），我不清楚如何设置 craco.config.js匹配所需的 webpack 设置。你有什么想法吗？
您阅读过文档吗？ github.com/gsoft-inc/craco/blob/master/packages/craco/…
我尝试在 postcss: { loaderOptions: { // here }} 和 css: { loaderOptions: { // here }} 下添加它，但在使用 tailwindcss 时无济于事。好奇你是否曾经能够让它工作？我尝试过的 craco.config.js 文件pastebin.com/vx9uUYrW
你成功了吗？因为我不希望最终用户能够复制所有类名，所以一直在尝试同样的事情。有些人建议使用github.com/sndyuk/mangle-css-class-webpack-plugin，但我不认为我想要这样的解决方案