如何在 tailwind 中填充 svg
how do I fill svg in tailwind
我使用了下面的代码，但无法覆盖填充。我看到它已解决，但有人可以使用 tailwind 解决吗？
<div className="">
<svg className="text-green-600 fill-current" width="52" height="52" viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
<path d="M29.25 17.875C29.25 17.444 29.0788 17.0307 28.774 16.726C28.4693 16.4212 28.056 16.25 27.625 16.25C27.194 16.25 26.7807 16.4212 26.476 16.726C26.1712 17.0307 26 17.444 26 17.875V22.75H21.125C20.694 22.75 20.2807 22.9212 19.976 23.226C19.6712 23.5307 19.5 23.944 19.5 24.375C19.5 24.806 19.6712 25.2193 19.976 25.524C20.2807 25.8288 20.694 26 21.125 26H26V30.875C26 31.306 26.1712 31.7193 26.476 32.024C26.7807 32.3288 27.194 32.5 27.625 32.5C28.056 32.5 28.4693 32.3288 28.774 32.024C29.0788 31.7193 29.25 31.306 29.25 30.875V26H34.125C34.556 26 34.9693 25.8288 35.274 25.524C35.5788 25.2193 35.75 24.806 35.75 24.375C35.75 23.944 35.5788 23.5307 35.274 23.226C34.9693 22.9212 34.556 22.75 34.125 22.75H29.25V17.875Z" fill="#7400B8"/>
<path d="M1.625 3.25C1.19402 3.25 0.780698 3.4212 0.475951 3.72595C0.171205 4.0307 0 4.44402 0 4.875C0 5.30598 0.171205 5.7193 0.475951 6.02405C0.780698 6.32879 1.19402 6.5 1.625 6.5H5.2325L6.53575 11.7227L11.4042 37.674C11.474 38.0464 11.6716 38.3827 11.963 38.6248C12.2543 38.8669 12.6212 38.9996 13 39H16.25C14.5261 39 12.8728 39.6848 11.6538 40.9038C10.4348 42.1228 9.75 43.7761 9.75 45.5C9.75 47.2239 10.4348 48.8772 11.6538 50.0962C12.8728 51.3152 14.5261 52 16.25 52C17.9739 52 19.6272 51.3152 20.8462 50.0962C22.0652 48.8772 22.75 47.2239 22.75 45.5C22.75 43.7761 22.0652 42.1228 20.8462 40.9038C19.6272 39.6848 17.9739 39 16.25 39H39C37.2761 39 35.6228 39.6848 34.4038 40.9038C33.1848 42.1228 32.5 43.7761 32.5 45.5C32.5 47.2239 33.1848 48.8772 34.4038 50.0962C35.6228 51.3152 37.2761 52 39 52C40.7239 52 42.3772 51.3152 43.5962 50.0962C44.8152 48.8772 45.5 47.2239 45.5 45.5C45.5 43.7761 44.8152 42.1228 43.5962 40.9038C42.3772 39.6848 40.7239 39 39 39H42.25C42.6288 38.9996 42.9957 38.8669 43.287 38.6248C43.5784 38.3827 43.776 38.0464 43.8457 37.674L48.7207 11.674C48.7647 11.4395 48.7564 11.1981 48.6965 10.9672C48.6366 10.7362 48.5266 10.5213 48.3743 10.3376C48.222 10.154 48.0311 10.0061 47.8151 9.90454C47.5992 9.80298 47.3636 9.75022 47.125 9.75H9.3925L8.07625 4.48175C7.98853 4.13005 7.78574 3.81777 7.50013 3.59458C7.21451 3.37139 6.86248 3.2501 6.5 3.25H1.625ZM14.3487 35.75L10.0815 13H45.1685L40.9012 35.75H14.3487ZM19.5 45.5C19.5 46.362 19.1576 47.1886 18.5481 47.7981C17.9386 48.4076 17.112 48.75 16.25 48.75C15.388 48.75 14.5614 48.4076 13.9519 47.7981C13.3424 47.1886 13 46.362 13 45.5C13 44.638 13.3424 43.8114 13.9519 43.2019C14.5614 42.5924 15.388 42.25 16.25 42.25C17.112 42.25 17.9386 42.5924 18.5481 43.2019C19.1576 43.8114 19.5 44.638 19.5 45.5ZM42.25 45.5C42.25 46.362 41.9076 47.1886 41.2981 47.7981C40.6886 48.4076 39.862 48.75 39 48.75C38.138 48.75 37.3114 48.4076 36.7019 47.7981C36.0924 47.1886 35.75 46.362 35.75 45.5C35.75 44.638 36.0924 43.8114 36.7019 43.2019C37.3114 42.5924 38.138 42.25 39 42.25C39.862 42.25 40.6886 42.5924 41.2981 43.2019C41.9076 43.8114 42.25 44.638 42.25 45.5Z" fill="#7400B8"/>
<defs>
</defs>
</svg>
您需要从每个 path 元素中删除 fill="#7400B8" 个属性。
检查工作 demo。
与 Tailwind 无关但可能有用 - 您可以将填充更改为 fill="currentColor" 并仅向父级添加颜色 class text-green-600（fill-current 中不需要)
<div className="">
<svg className="text-green-600" width="52" height="52" viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
<path d="M29.25 17.875C29.25 17.444 29.0788 17.0307 28.774 16.726C28.4693 16.4212 28.056 16.25 27.625 16.25C27.194 16.25 26.7807 16.4212 26.476 16.726C26.1712 17.0307 26 17.444 26 17.875V22.75H21.125C20.694 22.75 20.2807 22.9212 19.976 23.226C19.6712 23.5307 19.5 23.944 19.5 24.375C19.5 24.806 19.6712 25.2193 19.976 25.524C20.2807 25.8288 20.694 26 21.125 26H26V30.875C26 31.306 26.1712 31.7193 26.476 32.024C26.7807 32.3288 27.194 32.5 27.625 32.5C28.056 32.5 28.4693 32.3288 28.774 32.024C29.0788 31.7193 29.25 31.306 29.25 30.875V26H34.125C34.556 26 34.9693 25.8288 35.274 25.524C35.5788 25.2193 35.75 24.806 35.75 24.375C35.75 23.944 35.5788 23.5307 35.274 23.226C34.9693 22.9212 34.556 22.75 34.125 22.75H29.25V17.875Z" fill="currentColor"/>
<path d="M1.625 3.25C1.19402 3.25 0.780698 3.4212 0.475951 3.72595C0.171205 4.0307 0 4.44402 0 4.875C0 5.30598 0.171205 5.7193 0.475951 6.02405C0.780698 6.32879 1.19402 6.5 1.625 6.5H5.2325L6.53575 11.7227L11.4042 37.674C11.474 38.0464 11.6716 38.3827 11.963 38.6248C12.2543 38.8669 12.6212 38.9996 13 39H16.25C14.5261 39 12.8728 39.6848 11.6538 40.9038C10.4348 42.1228 9.75 43.7761 9.75 45.5C9.75 47.2239 10.4348 48.8772 11.6538 50.0962C12.8728 51.3152 14.5261 52 16.25 52C17.9739 52 19.6272 51.3152 20.8462 50.0962C22.0652 48.8772 22.75 47.2239 22.75 45.5C22.75 43.7761 22.0652 42.1228 20.8462 40.9038C19.6272 39.6848 17.9739 39 16.25 39H39C37.2761 39 35.6228 39.6848 34.4038 40.9038C33.1848 42.1228 32.5 43.7761 32.5 45.5C32.5 47.2239 33.1848 48.8772 34.4038 50.0962C35.6228 51.3152 37.2761 52 39 52C40.7239 52 42.3772 51.3152 43.5962 50.0962C44.8152 48.8772 45.5 47.2239 45.5 45.5C45.5 43.7761 44.8152 42.1228 43.5962 40.9038C42.3772 39.6848 40.7239 39 39 39H42.25C42.6288 38.9996 42.9957 38.8669 43.287 38.6248C43.5784 38.3827 43.776 38.0464 43.8457 37.674L48.7207 11.674C48.7647 11.4395 48.7564 11.1981 48.6965 10.9672C48.6366 10.7362 48.5266 10.5213 48.3743 10.3376C48.222 10.154 48.0311 10.0061 47.8151 9.90454C47.5992 9.80298 47.3636 9.75022 47.125 9.75H9.3925L8.07625 4.48175C7.98853 4.13005 7.78574 3.81777 7.50013 3.59458C7.21451 3.37139 6.86248 3.2501 6.5 3.25H1.625ZM14.3487 35.75L10.0815 13H45.1685L40.9012 35.75H14.3487ZM19.5 45.5C19.5 46.362 19.1576 47.1886 18.5481 47.7981C17.9386 48.4076 17.112 48.75 16.25 48.75C15.388 48.75 14.5614 48.4076 13.9519 47.7981C13.3424 47.1886 13 46.362 13 45.5C13 44.638 13.3424 43.8114 13.9519 43.2019C14.5614 42.5924 15.388 42.25 16.25 42.25C17.112 42.25 17.9386 42.5924 18.5481 43.2019C19.1576 43.8114 19.5 44.638 19.5 45.5ZM42.25 45.5C42.25 46.362 41.9076 47.1886 41.2981 47.7981C40.6886 48.4076 39.862 48.75 39 48.75C38.138 48.75 37.3114 48.4076 36.7019 47.7981C36.0924 47.1886 35.75 46.362 35.75 45.5C35.75 44.638 36.0924 43.8114 36.7019 43.2019C37.3114 42.5924 38.138 42.25 39 42.25C39.862 42.25 40.6886 42.5924 41.2981 43.2019C41.9076 43.8114 42.25 44.638 42.25 45.5Z" fill="currentColor"/>
<defs>
</defs>
</svg>
</div>
我使用了下面的代码，但无法覆盖填充。我看到它已解决，但有人可以使用 tailwind 解决吗？
<div className="">
<svg className="text-green-600 fill-current" width="52" height="52" viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
<path d="M29.25 17.875C29.25 17.444 29.0788 17.0307 28.774 16.726C28.4693 16.4212 28.056 16.25 27.625 16.25C27.194 16.25 26.7807 16.4212 26.476 16.726C26.1712 17.0307 26 17.444 26 17.875V22.75H21.125C20.694 22.75 20.2807 22.9212 19.976 23.226C19.6712 23.5307 19.5 23.944 19.5 24.375C19.5 24.806 19.6712 25.2193 19.976 25.524C20.2807 25.8288 20.694 26 21.125 26H26V30.875C26 31.306 26.1712 31.7193 26.476 32.024C26.7807 32.3288 27.194 32.5 27.625 32.5C28.056 32.5 28.4693 32.3288 28.774 32.024C29.0788 31.7193 29.25 31.306 29.25 30.875V26H34.125C34.556 26 34.9693 25.8288 35.274 25.524C35.5788 25.2193 35.75 24.806 35.75 24.375C35.75 23.944 35.5788 23.5307 35.274 23.226C34.9693 22.9212 34.556 22.75 34.125 22.75H29.25V17.875Z" fill="#7400B8"/>
<path d="M1.625 3.25C1.19402 3.25 0.780698 3.4212 0.475951 3.72595C0.171205 4.0307 0 4.44402 0 4.875C0 5.30598 0.171205 5.7193 0.475951 6.02405C0.780698 6.32879 1.19402 6.5 1.625 6.5H5.2325L6.53575 11.7227L11.4042 37.674C11.474 38.0464 11.6716 38.3827 11.963 38.6248C12.2543 38.8669 12.6212 38.9996 13 39H16.25C14.5261 39 12.8728 39.6848 11.6538 40.9038C10.4348 42.1228 9.75 43.7761 9.75 45.5C9.75 47.2239 10.4348 48.8772 11.6538 50.0962C12.8728 51.3152 14.5261 52 16.25 52C17.9739 52 19.6272 51.3152 20.8462 50.0962C22.0652 48.8772 22.75 47.2239 22.75 45.5C22.75 43.7761 22.0652 42.1228 20.8462 40.9038C19.6272 39.6848 17.9739 39 16.25 39H39C37.2761 39 35.6228 39.6848 34.4038 40.9038C33.1848 42.1228 32.5 43.7761 32.5 45.5C32.5 47.2239 33.1848 48.8772 34.4038 50.0962C35.6228 51.3152 37.2761 52 39 52C40.7239 52 42.3772 51.3152 43.5962 50.0962C44.8152 48.8772 45.5 47.2239 45.5 45.5C45.5 43.7761 44.8152 42.1228 43.5962 40.9038C42.3772 39.6848 40.7239 39 39 39H42.25C42.6288 38.9996 42.9957 38.8669 43.287 38.6248C43.5784 38.3827 43.776 38.0464 43.8457 37.674L48.7207 11.674C48.7647 11.4395 48.7564 11.1981 48.6965 10.9672C48.6366 10.7362 48.5266 10.5213 48.3743 10.3376C48.222 10.154 48.0311 10.0061 47.8151 9.90454C47.5992 9.80298 47.3636 9.75022 47.125 9.75H9.3925L8.07625 4.48175C7.98853 4.13005 7.78574 3.81777 7.50013 3.59458C7.21451 3.37139 6.86248 3.2501 6.5 3.25H1.625ZM14.3487 35.75L10.0815 13H45.1685L40.9012 35.75H14.3487ZM19.5 45.5C19.5 46.362 19.1576 47.1886 18.5481 47.7981C17.9386 48.4076 17.112 48.75 16.25 48.75C15.388 48.75 14.5614 48.4076 13.9519 47.7981C13.3424 47.1886 13 46.362 13 45.5C13 44.638 13.3424 43.8114 13.9519 43.2019C14.5614 42.5924 15.388 42.25 16.25 42.25C17.112 42.25 17.9386 42.5924 18.5481 43.2019C19.1576 43.8114 19.5 44.638 19.5 45.5ZM42.25 45.5C42.25 46.362 41.9076 47.1886 41.2981 47.7981C40.6886 48.4076 39.862 48.75 39 48.75C38.138 48.75 37.3114 48.4076 36.7019 47.7981C36.0924 47.1886 35.75 46.362 35.75 45.5C35.75 44.638 36.0924 43.8114 36.7019 43.2019C37.3114 42.5924 38.138 42.25 39 42.25C39.862 42.25 40.6886 42.5924 41.2981 43.2019C41.9076 43.8114 42.25 44.638 42.25 45.5Z" fill="#7400B8"/>
<defs>
</defs>
</svg>
您需要从每个 path 元素中删除 fill="#7400B8" 个属性。
检查工作 demo。
与 Tailwind 无关但可能有用 - 您可以将填充更改为 fill="currentColor" 并仅向父级添加颜色 class text-green-600（fill-current 中不需要)
<div className="">
<svg className="text-green-600" width="52" height="52" viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
<path d="M29.25 17.875C29.25 17.444 29.0788 17.0307 28.774 16.726C28.4693 16.4212 28.056 16.25 27.625 16.25C27.194 16.25 26.7807 16.4212 26.476 16.726C26.1712 17.0307 26 17.444 26 17.875V22.75H21.125C20.694 22.75 20.2807 22.9212 19.976 23.226C19.6712 23.5307 19.5 23.944 19.5 24.375C19.5 24.806 19.6712 25.2193 19.976 25.524C20.2807 25.8288 20.694 26 21.125 26H26V30.875C26 31.306 26.1712 31.7193 26.476 32.024C26.7807 32.3288 27.194 32.5 27.625 32.5C28.056 32.5 28.4693 32.3288 28.774 32.024C29.0788 31.7193 29.25 31.306 29.25 30.875V26H34.125C34.556 26 34.9693 25.8288 35.274 25.524C35.5788 25.2193 35.75 24.806 35.75 24.375C35.75 23.944 35.5788 23.5307 35.274 23.226C34.9693 22.9212 34.556 22.75 34.125 22.75H29.25V17.875Z" fill="currentColor"/>
<path d="M1.625 3.25C1.19402 3.25 0.780698 3.4212 0.475951 3.72595C0.171205 4.0307 0 4.44402 0 4.875C0 5.30598 0.171205 5.7193 0.475951 6.02405C0.780698 6.32879 1.19402 6.5 1.625 6.5H5.2325L6.53575 11.7227L11.4042 37.674C11.474 38.0464 11.6716 38.3827 11.963 38.6248C12.2543 38.8669 12.6212 38.9996 13 39H16.25C14.5261 39 12.8728 39.6848 11.6538 40.9038C10.4348 42.1228 9.75 43.7761 9.75 45.5C9.75 47.2239 10.4348 48.8772 11.6538 50.0962C12.8728 51.3152 14.5261 52 16.25 52C17.9739 52 19.6272 51.3152 20.8462 50.0962C22.0652 48.8772 22.75 47.2239 22.75 45.5C22.75 43.7761 22.0652 42.1228 20.8462 40.9038C19.6272 39.6848 17.9739 39 16.25 39H39C37.2761 39 35.6228 39.6848 34.4038 40.9038C33.1848 42.1228 32.5 43.7761 32.5 45.5C32.5 47.2239 33.1848 48.8772 34.4038 50.0962C35.6228 51.3152 37.2761 52 39 52C40.7239 52 42.3772 51.3152 43.5962 50.0962C44.8152 48.8772 45.5 47.2239 45.5 45.5C45.5 43.7761 44.8152 42.1228 43.5962 40.9038C42.3772 39.6848 40.7239 39 39 39H42.25C42.6288 38.9996 42.9957 38.8669 43.287 38.6248C43.5784 38.3827 43.776 38.0464 43.8457 37.674L48.7207 11.674C48.7647 11.4395 48.7564 11.1981 48.6965 10.9672C48.6366 10.7362 48.5266 10.5213 48.3743 10.3376C48.222 10.154 48.0311 10.0061 47.8151 9.90454C47.5992 9.80298 47.3636 9.75022 47.125 9.75H9.3925L8.07625 4.48175C7.98853 4.13005 7.78574 3.81777 7.50013 3.59458C7.21451 3.37139 6.86248 3.2501 6.5 3.25H1.625ZM14.3487 35.75L10.0815 13H45.1685L40.9012 35.75H14.3487ZM19.5 45.5C19.5 46.362 19.1576 47.1886 18.5481 47.7981C17.9386 48.4076 17.112 48.75 16.25 48.75C15.388 48.75 14.5614 48.4076 13.9519 47.7981C13.3424 47.1886 13 46.362 13 45.5C13 44.638 13.3424 43.8114 13.9519 43.2019C14.5614 42.5924 15.388 42.25 16.25 42.25C17.112 42.25 17.9386 42.5924 18.5481 43.2019C19.1576 43.8114 19.5 44.638 19.5 45.5ZM42.25 45.5C42.25 46.362 41.9076 47.1886 41.2981 47.7981C40.6886 48.4076 39.862 48.75 39 48.75C38.138 48.75 37.3114 48.4076 36.7019 47.7981C36.0924 47.1886 35.75 46.362 35.75 45.5C35.75 44.638 36.0924 43.8114 36.7019 43.2019C37.3114 42.5924 38.138 42.25 39 42.25C39.862 42.25 40.6886 42.5924 41.2981 43.2019C41.9076 43.8114 42.25 44.638 42.25 45.5Z" fill="currentColor"/>
<defs>
</defs>
</svg>
</div>