Vue3集成Tailwind CSS

来源：Vue3 + vite + Ts + pinia + 实战 + 源码 +electron

Tailwind CSS

Tailwind CSS是由JS编写的CSS框架，基于PostCSS解析。

• 通过一套约束系统保证一致性，避免随意的取值。
• 因为抽象层级较低，所以可定制性强。
• 在生产环境中会进行Tree Shake，自动删除未使用的CSS。
• 简化响应式设计。
• 简化互动设计，例如鼠标悬停或焦点状态。
• 支持在自定义类中组合Tailwind工具类使用。
• 支持夜间模式。
• 支持自定义工具类。
• 跟进前沿CSS技术。

PostCSS

PostCSS是一个用JS转换CSS代码的工具。

• 增强代码的可读性，利用Can I use网站的数据自动添加厂商前缀。
• 将最新前沿CSS语法转换为兼容性好的语法。
• 终结全局CSS
• 使用Stylelint检查代码，避免错误。

PostCSS解析Tailwind CSS

1. 将CSS解析成抽象语法树（AST）
2. 读取插件配置，根据配置文件生成新的AST
3. 将AST传递给一系列数据转化操作处理（变量数据循环生成、嵌套类名循环等）
4. 清除一系列操作留下的数据痕迹
5. 将处理完毕的AST重新转换成字符串

Vue3集成Tailwind CSS

1. 初始化项目

   npm init vue@latest

2. 安装 Tailwind 以及其它依赖项

   npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

3. 生成配置文件（Tailwind CSS配置）

   npx tailwindcss init -p

4. 修改配置文件 tailwind.config.js

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}"],
     theme: {
       extend: {},
     },
     plugins: [],
   }

5. 创建index.css

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

6. 在main.ts中引入index.css

7. 测试

   <template>
     <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
       <div class="md:flex">
         <div class="md:flex-shrink-0">
           <img class="h-48 w-full object-cover md:w-48" src="https://image.cheriko.fun/music/202304301615221.jpg" alt="Man looking at item at a store">
         </div>
         <div class="p-8">
           <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Lorem ipsum</div>
           <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">dolor sit, amet consectetur adipisicing elit.</a>
           <p class="mt-2 text-gray-500">Iusto, quae! Pariatur mollitia nulla ipsa. Velit, totam!</p>
         </div>
       </div>
         
     </div>
   </template>

VS Code可以安装Tailwind CSS IntelliSense扩展获取代码提示。