tailwindcss学习03

01 入门
02 vue中接入
03 工具类优先

准备

vue.svg

<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a">
<stop stop-color="#2397B3" offset="0%"></stop><stop stop-color="#13577E" offset="100%"></stop>
</linearGradient><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b">
<stop stop-color="#73DFF2" offset="0%"></stop>
<stop stop-color="#47B1EB" offset="100%"></stop></linearGradient></defs>
<g fill="none" fill-rule="evenodd"><path d="M28.872 22.096c.084.622.128 1.258.128 1.904 0 7.732-6.268 14-14 14-2.176 0-4.236-.496-6.073-1.382l-6.022 2.007c-1.564.521-3.051-.966-2.53-2.53l2.007-6.022A13.944 13.944 0 0 1 1 24c0-7.331 5.635-13.346 12.81-13.95A9.967 9.967 0 0 0 13 14c0 5.523 4.477 10 10 10a9.955 9.955 0 0 0 5.872-1.904z" fill="url(#a)" transform="translate(1 1)"></path><path d="M35.618 20.073l2.007 6.022c.521 1.564-.966 3.051-2.53 2.53l-6.022-2.007A13.944 13.944 0 0 1 23 28c-7.732 0-14-6.268-14-14S15.268 0 23 0s14 6.268 14 14c0 2.176-.496 4.236-1.382 6.073z" fill="url(#b)" transform="translate(1 1)"></path><path d="M18 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM24 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM30 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#FFF"></path></g>
</svg>

传统方式构建聊天组件

<script setup>
</script><template><div class="chat-notification"><div class="chat-notification-logo-wrapper"><img class="chat-notification-logo" src="./assets/vue.svg" alt="ChitChat Logo"></div><div class="chat-notification-content"><h4 class="chat-notification-title">ChitChat</h4><p class="chat-notification-message">You have a new message!</p></div>
</div>
</template><style scoped>.chat-notification {display: flex;align-items: center;max-width: 24rem;margin: 0 auto;padding: 1.5rem;border-radius: 0.5rem;background-color: #fff;box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);}.chat-notification-logo-wrapper {flex-shrink: 0;}.chat-notification-logo {height: 3rem;width: 3rem;}.chat-notification-content {margin-left: 1.5rem;}.chat-notification-title {color: #1a202c;font-size: 1.25rem;line-height: 1.25;}.chat-notification-message {color: #718096;font-size: 1rem;line-height: 1.5;}
</style>

tailwindcss

<script setup>
</script><template>
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center gap-x-4"><div class="shrink-0"><img class="size-12" src="./assets/vue.svg" alt="ChitChat Logo"></div><div><div class="text-xl font-medium text-black">ChitChat</div><p class="text-slate-500">You have a new message!</p></div>
</div>
</template><style scoped>
</style>

带有响应式悬浮效果的个人名片

<script setup>
</script><template>
<div class="py-8 px-8 max-w-sm mx-auto space-y-2 bg-white rounded-xl shadow-lg sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:gap-x-6"><img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" src="./assets/erin-lindford.jpg" alt="Woman's Face" /><div class="text-center space-y-2 sm:text-left"><div class="space-y-0.5"><p class="text-lg text-black font-semibold">Erin Lindford</p><p class="text-slate-500 font-medium">Product Engineer</p></div><button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button></div>
</div>
</template><style scoped>
</style>

pc端

手机端

上面的css类不太了解没关系，后面会挨个学习，主要是了解一下tailwindcss特性

参考

工具类优先