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 样式,经过优化和压缩。

相关推荐
zhangfeng113311 小时前
workbuddy ,node.js 每次会在 项目目录上安装 node_modules,能不能一次安装多次使用,为什么 npm 不把包装在全局
前端·npm·node.js
一次旅行11 小时前
CopilotKit实战:用生成式UI打造智能Agent前端
前端·人工智能·ui
禅思院11 小时前
大列表性能优化 · 工程实战·四
开发语言·前端·性能优化·前端框架·php·异步加载
rising start11 小时前
五、Vue3 ref 用法 + Props 完整指南
前端·javascript·vue.js
web打印社区11 小时前
前端html转换pdf并静默打印pdf最佳实现路径
前端·javascript·vue.js·electron·html
Curvatureflight12 小时前
浏览器音频采集实践:麦克风权限、降噪、回声消除与 PCM 转换
前端·javascript·音视频·信息与通信·web·pcm
Dontla12 小时前
HTML实体转义(HTML Entity Escaping)介绍
前端·html
咸鱼翻身小阿橙12 小时前
高斯模糊降噪/磨皮算法降噪图像
前端·opencv·算法·webpack·c#
ct97812 小时前
ES6 新特性
前端·vue.js·性能优化
KaMeidebaby12 小时前
卡梅德生物技术快报|抗原如何自己检测?FAdV-4 重组抗原制备与 ELISA 体系技术调试指南
前端·人工智能·物联网·算法·百度