tailwindcss 应用


tailwindcss  应用

<script src="https://www.xiaoguan.net/assets/tailwindcss/tailwindcss.3.4.16.min.js"></script>    
<script src="https://www.xiaoguan.net/assets/tailwindcss/tailwind.config.js"></script>    

<style type="text/tailwindcss">
        @layer utilities {
            .imgBtn{
                @apply w-[80px] inline-flex items-center cursor-pointer gap-1.5 border border-solid border-gray-500/20 rounded bg-white hover:border-green-600 py-2 px-3 mr-2 text-center text-sm
            }
        }
</style>

<div class="imgBtn">这是一个按钮</div>

# 也可以直接写在class里
<div class="w-[80px] inline-flex items-center cursor-pointer gap-1.5 border border-solid border-gray-500/20 rounded bg-white hover:border-green-600 py-2 px-3 mr-2 text-center text-sm">这是一个按钮</div>