preact-purge-tailwindcss Preact CLI插件整合Tailwind CSS
Preact 项目的 Tailwind CSS 整合神器，叫preact-purge-tailwindcss，挺适合你要在小体积下搞定美观 UI 的需求。直接用在preact.config.js里，加上 TypeScript 模板，基本就能做到组件级别的无用 CSS 清除。
Tailwind CSS本身就挺好用，加上purgecss，构建出来的 CSS 小得吓人，原本七八百 KB，压成几 KB，响应也快，体积也轻。用法也简单，命令行直接装：npm i preact-purge-tailwindcss --save-dev，或者 yarn add preact-purge-tailwindcss --dev 都行。
配置也挺友好，在你的preact.config.js里加一句：
import tailwind from "preact-purge-tailwindcss";
export default (config, env, helpers) => {
tailwind(config, env, helpers);
};
嗯，要注意一点，记得用preact-cli的 TypeScript 模板，不然集成起来会绕点弯子。如果你之前用过 Preact TypeScript 模板，上手就更顺了。
想对比其他方案也可以看看像Webpack + Tailwind + PurgeCSS 模板，或者更复杂的preact-tailwind-storybook方案，不过简单高效，我还是推荐这个插件。
如果你想让项目体积精简，又不想手动搞 purge 配置，试试preact-purge-tailwindcss还挺香的。
文件大小：43.14KB
评论区