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

相关推荐
Aolith几秒前
React 路由守卫:我用一个组件替代了 Vue 的 beforeEach
前端·react.js
Daybreak4 分钟前
从 PDD、DDD、SDD 到 TDD:我是如何用一套 Agent 工程方法论推进 My-Notion 的
前端
HjhIron31 分钟前
从零实现一个待办事项应用:前端必学的Ajax与Node.js实战
前端·后端
yingyima35 分钟前
JavaScript 正则表达式:从零开始的实战对比
前端
Sammyyyyy1 小时前
月之暗面 Kimi Code 0.4.0 发布,终端 AI 编码助手全面采用 TypeScript,实现毫秒级启动
前端·javascript·人工智能·ai·typescript·servbay
范什么特西1 小时前
配置文件xml和properties
xml·前端
jnene1 小时前
html 时间、价格筛选样式处理
前端·css·html
slongzhang_1 小时前
jquery 修复怪异模式html未声明“<!DOCTYPE html>”
前端·html·jquery
云水一下2 小时前
Vue.js从零到精通系列(三):组件化基础——Props、Emits、插槽与生命周期
前端·javascript·vue.js
SEO_juper3 小时前
新独立站冷启动收录全攻略:配置、推送、抓取配额优化完整手册
前端·谷歌·seo·跨境电商·外贸·geo·独立站