1.介绍

Tailwind CSS 是一个非常酷的前端框架，它可以让你跟快速轻松的构建的UI组件。如果你还没听过Tailwind CSS，引用官方的话术说的是“ 一个实用程序优先的 CSS 框架 ”，它定义许多非常小的类，用于提供构建你的页面及组件，你会有一种“挖偶”的一声，原来css也可以跟html一样写。

2.安装

在vue的根目录下，安装 Tailwind 及其依赖项（PostCSS & auto-prefixer）。有可能安装的时候回提示错误导致安装不成功，一般都是缺少其他依赖或版本问题，根据提示说明解决就好，正常都是一次性通过。

npm install -D tailwindcss postcss autoprefixer

生成Tailwind CSS配置文件

npx tailwindcss init -p

在配置文件content中添加所有模板文件的路径

//tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

创建一个tailwindcss.css样式文件，用于初始化并引入tailwindcss的基础样式

/* /src/css/tailwindcss.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;

导入css/tailwindcss.css到main.js，这样就让你的项目拥有了Tailwind CSS

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import "./css/tailwindcss.css"

createApp(App).mount('#app')

3.尝试`Tailwind CSS`

简单写了一个首页顶部导航菜单效果，在不写任何css的情况下，用html结合Tailwind CSS的样式类进行，代码看起来定义的内容有点多，但可以让我们尽可能的少些一些css。

<template>
  <div class=" md:mx-auto relative bg-white overflow-hidden border-b">
    <div class="h-12 md:ml-10 md:pr-4 md:space-x-8 flex justify-center">
      <a href="#" class="font-medium text-gray-500 hover:text-gray-900 flex items-center">Home</a>
      <a href="#" class="font-medium text-gray-500 hover:text-gray-900 flex items-center">Product</a>
      <a href="#" class="font-medium text-gray-500 hover:text-gray-900 flex items-center">Article</a>
      <a href="#" class="font-medium text-gray-500 hover:text-gray-900 flex items-center">About</a>
      <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 flex items-center">Log in</a>
    </div>
  </div>
</template>

效果图：

4.总结

在你成功安装Tailwind CSS后，你将拥有了所有官方定义的css类，进行页面的构建，从某种程度上，减少了你重复写css的代码。虽然在一开始的情况下可能有感觉到无从入手，因为Tailwind CSS提供的标签太多了，写页面功能需要些大量的html，所有当你足够熟悉Tailwind CSS的时候，你会慢慢的发现它的优点，并且可以快速的进行开发页面，而只需尽可能的少些css的代码。

在VUE中使用Tailwind CSS

1.介绍

2.安装

3.尝试Tailwind CSS

4.总结

3.尝试`Tailwind CSS`