（前端学习）你应该知道的Tailwind CSS

1. 简介

官方文档：Tailwind css是一个功能类优先的css框架。使用十分方便，用过都说香。

2. 优点

1. 生产环境体积非常小

2. 支持 hover 和 focus 状态

3. 优秀的前沿特性（多种可组合的转换和渐变色等）极其舒服等

3. 安装使用

我个人时是在vite搭建的vue3项目使用，其它项目应该都差不多

npminstall -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

在tailwind.config.js中加入

content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}']

在您的 CSS 中引入 Tailwind，先创建index.css文件再在main.ts中引入

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

// src/main.js
import{ createApp }from'vue'
importAppfrom'./App.vue'
import'./index.css'

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

4. 安装插件

在vscode中安装Tailwind CSS IntelliSense插件配合使用更佳。

5. 总结

类似于BootStrap的使用，有接触过的朋友应该比较熟悉，但Tailwind可用的属性更多，功能更加强大，配合官方文档使用可以极大减少配置css的时间。原子化，轻量，值得试一试

注意：element ui 组件库样式的优先级高于tailwind