构建以及引入外部组件
💡
原文中文，约4000字，阅读约需10分钟。
📝
内容提要
本文介绍了如何使用tailwindcss构建和引入自己封装的业务组件，包括可行和不可行的构建方案。作者提供了构建demo链接和相关issues。
🎯
关键要点
- 本文介绍了如何使用tailwindcss构建和引入自己封装的业务组件。
- 开源UI库的样式相对独立，而自己封装的业务组件与系统高度绑定。
- tailwindcss是一个css生成器，生成的css影响范围需谨慎考虑。
- 可行方案包括：custom css selector、添加前缀、添加scoped、不打包方案。
- 不可行方案为module css，因为它会修改css选择器。
- custom css selector方案使用@apply和theme指令，确保选择器独一无二。
- 添加前缀方案通过创建前缀来避免样式冲突。
- 添加scoped方案通过修改css选择器和html标签属性来实现样式隔离。
- 不打包方案直接发布组件，需配置tailwind.config.js以提取node_modules中的组件源代码。
- 提供了构建demo链接和相关issues供参考。
➡️
