这是一个创建于 1311 天前的主题，其中的信息可能已经有所发展或是发生改变。
目前是想做一个 php 的主题。
我想用前端工具、Tailwind CSS 、Element-ui 等等设计好我的 html 。
比如我在 html 里用了 Element 布局，用了 Tailwind 的按钮的组件。然后生成的一个 css 文件仅仅包含 Element 布局、Tailwind 按钮。
请问大佬这种想法可以实现吗？
补充（我用 nuxtjs 测试了一下，只能生成随机 css 文件）
或者有什么工具更方便的吗？
第 1 条附言 · 2021-06-04 12:45:09 +08:00
- 我的解决方案。不仅仅可以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"
}
 |
1
Mutoo 2021-05-26 13:35:50 +08:00
PurgeCSS 可以针对指定网页仅保留使用到的样式。
实际上如果你使用 tailwindcss 的自定义配置，是可以配合 PurgeCSS 使用的。 |
 |
2
3dwelcome 2021-05-26 13:46:34 +08:00
我自己写了一个预处理工具，Tailwind CSS 本质不就是一堆缩写和 CSS 语法糖嘛，也不是很难。
我个人不适合用 PurgeCSS 之类的自动裁切工具，因为一些 TailwindCSS 样式，是 JS 动态添加到 class 上的。原先静态 dom 里没有，PurgeCSS 就没办法正确提取所需要的所有样式，只能自己写了。  |
|
3
Mutoo 2021-05-26 14:06:36 +08:00
@3dwelcome purgecss 是可以处理 js 里面的 class 的，另外也可以自己写 extractor
https://purgecss.com/extractors.html#default-extractor |
|
4
3dwelcome 2021-05-26 14:13:59 +08:00
@Mutoo 我说的 js 里的 class，不单是“bg-red-500”字符串，而是拼接后的字符串。
比如 var styleval = "bg"+"-" + color + "-" + value; 如果这都能猜到，那工具就神了。 |
 |
6
guugg OP |
 |
7
KouShuiYu 2021-05-27 15:32:52 +08:00
https://www.npmjs.com/package/sass
不喜欢 sass 语法当个 css 用也行，可以打包成一个文件 |
Select Language