安装步骤

在 Vue 3 和 Vite 安装 Tailwind CSS - Tailwind CSS 中文文档

详细步骤解析

vue中使用tailwindcss

tailwindcss官网 vue(vite)安装指南
按照步骤安装
重要（初始化 tailwind.config.js 文件）不然引入.css文件会报错
引入css文件
```
      @tailwind base;
      @tailwind components;
      @tailwind utilities;
```
如果是vue或react框架直接引入 import "tailwindcss/tailwind.css"
会发现node_modules里的tailwind.css文件内容就是上面的三个引入

@tailwind base 添加基础样式 @layer base 指令

基于 modern-normalize , Preflight 是一套针对 Tailwind 项目的基础样式，旨在消除跨浏览器的不一致性，并使您的工作更轻松地符合设计系统的约束
对于一些基础标签添加自定义效果

      @tailwind base;

      @layer base {
        h1 {
          @apply text-2xl;
        }
        h2 {
          @apply text-xl;
        }
        h3 {
          @apply text-lg;
        }
        a {
          @apply text-blue-600 underline;
        }
      }

      @tailwind components;

      @tailwind utilities;

@tailwind components 提取组件类似于创建新的class 此class是tailwind 里面的功能类

 @tailwind base;
 @tailwind components;
 @tailwind utilities;

 @layer components {
   .btn-blue {
     @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
   }
 }

@tailwind utilities 添加新的功能类最基础的样式

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    @layer utilities {
      .scroll-snap-none {
        scroll-snap-type: none;
      }
      .scroll-snap-x {
        scroll-snap-type: x;
      }
      .scroll-snap-y {
        scroll-snap-type: y;
      }
    }