vue(vite)中使用 tailwindcss

安装步骤

在 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;
      }
    }

• tailwind.config.js 文件中，配置 purge 选项
  • purge: ['./index.html', './src/*/.{vue,js,ts,jsx,tsx}'],
  • 作用：搜索文件，清除没用到的css样式