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

相关推荐
宿67411 分钟前
vue3-包管理器
前端·vue.js
@PHARAOH24 分钟前
WHAT - Remix 入门和基本实践:理解两套产物
前端·remix
mayaairi1 小时前
Vue2 生命周期完全指南:从创建到销毁的8个钩子函数
前端·javascript·vue.js
xy34532 小时前
axure9.0 如何打造一个计时器(简单版)
前端·ui·html·axure·原型·产品设计
IMPYLH2 小时前
HTML 的 <pre> 元素
前端·javascript·html
tsumikistep3 小时前
【前端】Vue + Axios 跨域问题实战:7070 代理转发 8080 + 401 报错分析(黑马外卖)
前端·javascript·vue.js
lichenyang4533 小时前
鸿蒙首页从等高商品 Grid 到双列瀑布流:同一张图也能做出小红书式浏览节奏
前端
里欧跑得慢3 小时前
Flutter主题与样式详解
前端·css·flutter·web
toooooop83 小时前
智慧文旅数字人体验平台demo html
css·css3
计算机魔术师3 小时前
TPU推理性价比翻50%,NVIDIA的护城河要见底了?
前端