vtie项目中使用到了TailwindCSS,如何打包成一个单独的CSS文件(优化、压缩)

在不依赖 Vite 或其他构建工具的情况下,使用 TailwindCSS CLI 快速生成独立的 CSS 文件是一种简单高效的方法,适合需要纯样式文件的场景。

这个项目中,使用到了tailwindCss, 需要把里面的样式打包出来,给其他项目用。

使用命令生成独立文件 运行以下命令生成压缩后的独立 CSS 文件:

复制代码
npx tailwindcss -i ./src/style.css -o ./dist/tailwind.css --minify

./src/style.css 就是你引入TailwindCSS的文件
./dist/tailwind.css 打包后,放入的文件

-i:指定输入文件。

-o:指定输出路径。

--minify:启用压缩。

生成的 tailwind.css 文件位于 dist 文件夹中,包含项目中实际使用的 TailwindCSS 样式,经过优化和压缩。

相关推荐
余生H几秒前
2026 年时间记录软件对比研究:时间线与「时光流」设计的产品分化
前端·软件工程·时间管理·时间记录
风叶悠然6 分钟前
vue3中数据的pinia的使用
前端·javascript·数据库
李少兄20 分钟前
CSS clip-path:前端开发中的裁剪技术
前端·css
zhengxianyi51531 分钟前
使用码云gitee登录ruoyi-vue-pro——坑比较多
前端·vue.js·gitee·ruoyi-vue-pro优化·三方登陆
光影少年39 分钟前
React vs Next.js
前端·javascript·react.js
谢尔登40 分钟前
Vue3 响应式系统——ref 和 reactive
前端·javascript·vue.js
OEC小胖胖42 分钟前
16|总复习:把前 15 章串成一张 React 源码主线地图
前端·react.js·前端框架·react·开源库
董世昌4144 分钟前
HTTP协议中,GET和POST有什么区别?分别适用什么场景?
java·开发语言·前端
_OP_CHEN1 小时前
【前端开发之HTML】(二)HTML 常见标签(上):从入门到实战,搞定网页基础排版!
前端·css·html·前端开发·网页开发·html标签
满栀5851 小时前
插件轮播图制作
开发语言·前端·javascript·jquery