雁过留痕

如何在Vue3+Vite+Ts+TailwindCSS项目中正确打包静态资源?

我想做一个UI组件，然后使用的是Vue3+Vite+Ts+tailwindcss 问题出现在这个静态资源这里，我的静态资源放在了src/assets下，包括图片还有style.css， @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Noto+Color+Emoji&family=Noto+Sans+SC:wght@100;200;300;400;500;600;700;800;900&family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap"); @tailwind base; @tailwind components; @tailwind utilities; 然后我使用Vite的库模式打包,并没有打包我的style.css文件，只打包了vue文件中的style标签的css，并且静态文件的图片也是没有打包，而是直接转换成了base64,对于图片多的情况下，这样页面会很卡顿，我想知道怎么解决呢？ 网上搜索的方法都尝试过，发现并没有作用

kunkun小黑子

为什么这个演示Demo中 tailwindcss 自定义variant不生效?

项目Demo "https://stackblitz.com/edit/vitejs-vite-avo12b?file=%3D%3D%3D..." (https://link.segmentfault.com/?enc=8vPz2xEKKjfH6XBYitfcWw%3D%3D.DfzElZujAbrKc8HA8kJLJQw%2FIr7QeKhufEd6Mu9%2B797YiiHbWNd35buenAuujl%2BTxrOtziA5VpOjM4z54A5m2ipzd9F08vwmaAlWZfFT3v2TciwGWh%2B36rGy0PPfaxqu) 1. tailwind.config.js 定义自定义变体 ··· const plugin = require('tailwindcss/plugin'); /* @type {import('tailwindcss').Config} / export default { content: ['./index.html'], theme: { extend: {}, }, plugins: [ plugin(function ({ addVariant, e }) { addVariant('hoverColor', ({ modifySelectors, separator }) => { return modifySelectors(({ className }) => { let res = `.${e(`hoverOn${separator}${className}`)}:hover`; //.hoverOn\:text-red-600:hover console.log('res', res); return res; }); }); }), ], }; ··· 注意点： 注册名称为hoverColor, 但是 modifySelector返回的 名称是 hoverOn开头 2. index.html 两种方式使用自定义变体 HoverOn : The quick brown fox jumps ddover the lazy dog. HoverColor: The quick brown fox jumps ddover the lazy dog. 打开项目 查看 说明.txt文件，在项目的src/output.css文件中会有 tailwind转换后生成的css文件 问题： 为什么 class="hoverColor:text-red-600" class="hoverOn:text-red-600" 都没有实现 想要的 hover上变红的效果？ 我的理解： 生成的css中只有 .hoverOn\:text-red-600:hover { --tw-text-opacity: 1; color: rgb(220 38 38 / var(--tw-text-opacity)); } index.html中的 两个 p的class 都没有引用到该样式属性。 那么问题是 针对index.html中的 两个class，他们对应的真实的样式名是什么样的？ 在哪里可以看到相关文档说明？

脑袋困掉惹

为什么这个演示Demo中的 tailwindcss variant 没有生效？

"https://play.tailwindcss.com/sNnjkZnGWF?file=config" (https://link.segmentfault.com/?enc=fZE3Ikf4frtIfcMLHR%2BZdQ%3D%3D.PgKFKYDpJTtvrmhURmlI0rKXlvkn6Qld0%2FQmG5wukK6Mo9kv4eIen9h3DrFGtUrO%2FWdra3NyqA8hGGmFL8H7eA%3D%3D) 项目里配置了变体 @layer utilities { .border_always { @apply border-2 border-solid border-red-500; } } addVariant('hocus', ['&:focus', '&:hover']) 确定 为什么 当button 通过tab 获取焦点的时候 红色边框border_always样式没有生效？