在按需加载的基础上，如何提取 CSS 样式并且打包为一个 CSS 文件

[guugg]

目前是想做一个 php 的主题。

我想用前端工具、Tailwind CSS 、Element-ui 等等设计好我的 html 。

比如我在 html 里用了 Element 布局，用了 Tailwind 的按钮的组件。然后生成的一个 css 文件仅仅包含 Element 布局、Tailwind 按钮。

请问大佬这种想法可以实现吗？

补充（我用 nuxtjs 测试了一下，只能生成随机 css 文件）

或者有什么工具更方便的吗？

• 我的解决方案。不仅仅可以tailwindcss其他的也可以了

	"devDependencies": {
		"autoprefixer": "^10.2.4",
		"browser-sync": "^2.26.14",
		"browser-sync-webpack-plugin": "^2.3.0",
		"cross-env": "^6.0.3",
		"laravel-mix": "^6.0.11",
		"postcss": "^8.2.10",
		"postcss-import": "^14.0.0",
		"postcss-nested": "^5.0.3",
		"postcss-nested-ancestors": "^2.0.0",
		"resolve-url-loader": "^3.1.2",
		"tailwindcss": "^2.1.2"
	}

[Mutoo]

PurgeCSS 可以针对指定网页仅保留使用到的样式。

实际上如果你使用 tailwindcss 的自定义配置，是可以配合 PurgeCSS 使用的。

[3dwelcome]

我自己写了一个预处理工具，Tailwind CSS 本质不就是一堆缩写和 CSS 语法糖嘛，也不是很难。

我个人不适合用 PurgeCSS 之类的自动裁切工具，因为一些 TailwindCSS 样式，是 JS 动态添加到 class 上的。原先静态 dom 里没有，PurgeCSS 就没办法正确提取所需要的所有样式，只能自己写了。

[Mutoo]

@3dwelcome purgecss 是可以处理 js 里面的 class 的，另外也可以自己写 extractor
https://purgecss.com/extractors.html#default-extractor

[3dwelcome]

@Mutoo 我说的 js 里的 class，不单是“bg-red-500”字符串，而是拼接后的字符串。

比如 var styleval = "bg"+"-" + color + "-" + value;

如果这都能猜到，那工具就神了。

[Mutoo]

@3dwelcome 那你大可直接把 bg-*-* 加到白名单里呀，何必猜呢。

[guugg]

@Mutoo
@3dwelcome
谢谢，现在看来我还是要放弃它了。 用 Webpack 也不能实现我所需要的。 太难了 QAQ

[KouShuiYu]

https://www.npmjs.com/package/sass
不喜欢 sass 语法当个 css 用也行，可以打包成一个文件