tailWindCSS

TailWindCSS是什么？

Tailwind CSS 是一个可定制化的、功能类优先的 CSS 框架，和我们知道的UI框架差不多。只不过它将一些CSS样式封装好，用的时候直接调用class即可，提高我们的开发速度。

那么它的核心理念有什么呢？

1. 功能类优先：从一个只有单一功能的css类构建丰富的组件
2. 响应式设计：使用响应式效用变体来构建自适应的用户界面
3. 悬停、焦点、和其他状态：使用功能类对悬停、焦点等元素进行样式设计
4. 黑夜模式：使用Tailwind CSS在黑夜模式下对你的网站进行样式设计
5. 添加基本样式：在Tailwind之上添加自己的全局基础样式的最佳实践
6. 提取组件：处理重复问题，并保持实用优先项目的可维护性
7. 添加功能类：自定义工具类扩展tailwind
8. 函数和指令：向外暴露自定义函数和指令的参考

在vue项目中如何使用 TailwindCSS？

1. 首先创建项目，这里我们创建一个Vite项目

npx create-vite-app vite-app
cd vite-app

2. 安装依赖并启动项目

npm install
npm run dev

    启动项目，我们发现浏览器控制台：报404错误，页面显示 Not Fond，这个是什么问题呢？

    是因为vite-app 创建的时候会依赖一个 koa-compose 包的4.2.0版本，而npm上面最新版本为4.1.0版本
    找到原因了，那么先卸载 koa-compose，重新安装 koa-compose@4.1.0

npm uninstall koa-compose
npm install koa-compose@4.1.0 --dev-save

再次启动项目，npm run dev 我们发现问题解决了。那我们接着下一步的操作。

3. 安装Tailwind以及对应的依赖

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

注意：因为 vue3 & Vite 还不支持 PostCSS8，所以需要安装 Tailwind CSS v2.0 PostCSS 7 兼容性版本

4. 创建配置文件，执行命令自动生成 tailwind.config.js 和 postcss.config.js 文件

npx tailwindcss init -p

5. 配置tailwind自动移除生产环境没有使用的样式声明：在tailwind.config.js中配置purge：

// 指定所有的pages和components文件，使tailwind能在构建过程中对未使用的样式进行摇树优化
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}']

6. 在css文件中引入Tailwind，打开 src/index.css文件，并使用 @tailwind 指令来包含 tailwind 的 base/components/utilities 样式，替换掉原来的文件内容。

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

7. 确保css文件被导入到main.js文件中

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

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

以上完成了tailwind在vite项目中的配置，现在启动项目 npm run dev

持续更新中~~~