封装复用的样式

对于有一些用的比较多的TailwindCSS语句，我们可以将其封装起来，实现统一管理和复用

封装之前，先下载scss包：npm install -D sass

<template>
    <div>
        <input type="text" placeholder="请输入用户名" class="login-input" />
        <input type="text" placeholder="请输入密码" class="login-input mt-5" />
    </div>
</template>

<script setup>

</script>

<style lang="scss">
.login-input {
    @apply w-full border border-gray-300 rounded-md p-2 mt-4 outline-none
    placeholder:text-xs focus:border-blue-500 duration-300
}
</style>

我们引用封装的类型后，还可以在其后面继续写样式，如class="login-input mt-5"