突然感觉 tailwindcss 不香了

[yuhangch]

用 astro 做了一个静态网站，内容主要是文字为主。

当时用 tw 的时候是提高生产力为主，比如 light/dark 转换，prose 排版等等。

现在功能基本完成，想做一些优化的时候，发现某篇文章的 index.html：

总大小 ～ 78kb ，移除 tw 声明的变量和 class 定义之后 大小只有～ 24kb 。。。

尝试用 purgecss ，作用不是很明显（可能姿势不对）？

除此之外大家还有啥建议不，前端不是很在行，所以也想请教一下，使用 tw 的话，每个静态页面中的 css 是根据这个页面的样式类的使用情况生成的，还是所有页面的 css 是一样的？

[dengqing]

按我的理解像 astro 这种 SSG 的每个页面都是分开的

关于 light/dark 转换，我推荐使用 unocss 因为 https://github.com/unpreset/unocss-preset-theme 这个 preset 可以让你无需使用 light: dark: 就可以完成暗色或其他主题适配

[bthulu]

直接用行内样式 style=""不行嘛? 为什么非要用个 tailwindcss

[x86]

@bthulu #2 tailwindcss 不就跟写 style 差不多，还方便点写个缩写就行

[anonydmer]

页面里面有一半的字符是 tw 的样式名称吧

[Hilong]

可以按需加载的应该，是不是没有配置打包插件

[xxfye]

压缩一下再看看大小

[ljpCN]

不用太在乎，开发体验很多时候就是跟极致的性能是冲突的。可以试试用 unocss 替代 tailwind 试试看，不过应该不会优化太多。

[zhwithsweet]

unocss ，给你一点小小的正则震撼

[linglingling]

CSS 最拉胯了，以前不支持变量，现在支持了还要套个 var()。css in js 最香，压缩比打，变量灵活等各种优点，可惜生态没起来。

[jasonyang9]

反正 utility-first 的概念有了你可以换更轻量的

[u3u]

@x86 差多了好吧 先不说编码效率，style 没法写复杂的选择器（:hover 等）以及移动端自适应媒体查询阁下如何应对？

[u3u]

@linglingling 以前也喜欢 CSS in JS ，因为很方便和灵活，后来发现页面性能太差，以及现在还不支持服务器组件了，慢慢的就会被抛弃，Mantine v7 已经改用 CSS Modules 了，纯 JS 复杂的交互组件用用还是可以的，SEO 页面组件可千万别用它，服务器组件需要尽可能的使用 CSS 实现简单的交互，并且将 CSS 和 JS 分离

[liuhuihao]

这就是开发体验和性能的一种取舍喽，要是真的纠结那几十 kb 的大小，干脆什么框架啥的都不用直接手撸，那性能最好。

[dcoder]

你这个是 tailwind 的问题，还是 astro 里使用 tailwind 的问题

[theprimone]

这是 tailwind 还不支持按需加载 CSS ，所有的 CSS 都是打包成一个文件的，现在还有个可以通过 CSS 使用 SVG 图标的方案，图标多了 CSS 体积也是直接爆炸。最好是实现根据页面加载 CSS ，这样就很完美了，不过这个难度有点大，除了自身框架支持，结合其他应用框架也是个问题。

tailwind 毕竟只是基于 postcss 的插件，unocss 还没用过，不过它是基于 unplugin ，灵活性大得多，刚才看了一下，在 Vite 下有个两个特殊的模式：per-module / dist-chunk https://unocss.dev/integrations/vite#per-module-experimental 看起来已经在做这方面的尝试了？

[ymlog]

试试 unocss

[x2420390517]

78 还可以接受哈哈哈，780 就不行了

[jydeng]

可以过滤掉没有使用的 css ，正常来说体积很小，可以试试。

[freshgoose]

我是不太懂为啥要用 tailwind ，用 bootstrap 直接套用现成的模块不好吗

[Tyaqing]

用 tw 后，html 变大是很正常的，我理解是不是 css 没有拆分出来，如果按照提示配置了，这个大小有可能是正常的。


然后不用担心 html 大小，tw 的样式 class 重复率很高，http2 请求的 Huffman 压缩效果会更好，压缩后的 html 也会很小