Tailwind CSS 是一个利用共用程序类（Utilize Class：类本身中没有特定的含义，可以用在任何地方）的css框架。
官网地址：https://www.tailwindcss.cn/
TailWind Css的优势
1.响应式设计：
Tailwind css 内置了响应式设计功能，可以根据不用的屏幕大小和设备自动调整样式.
2.模块化：
Tailwind css 采用模块化设计理念，将样式分为不用模块，如布局，颜色，字体等。
3.灵活性
允许开发人员自定义样式，并根据项目的需求进行扩展，支持自定义类和属性，比如在配置文件中配置未注册的样式类，或者使用text-[#121212]、w-[100px]这种固定值的方式
4.快速开发
Tailwind css 通过提供大量的预定义类和实用程序类，可以大大加快开发速度。开发人员可以通过简单的添加类名来应用样式，无需编写大量的自定义css代码
5.可扩展性
Tailwind css 具有良好的可扩展性，可以与其他框架和库集成使用，如：Vue.js、React和Angular。
安装
通过 npm 安装 tailwindcss，然后创建你自己的tailwind.config.js 配置文件。
npm install -D tailwindcss然后输入npx tailwindcss init命令会生成一个tailwind.config.js文件
npx tailwindcss init配置tailwind.config.js文件
/** @type {import('tailwindcss').Config} */
module.exports = {content: [],theme: {extend: {},},plugins: [],
}/** @type {import('tailwindcss').Config} */
module.exports = {// https://ask.dcloud.net.cn/article/40098separator: '__', // 如果是小程序项目需要设置这一项，将 : 选择器替换成 __，之后 hover:bg-red-500 将改为 hover__bg-red-500 corePlugins: { // 预设样式 preflight: false, // 一般uniapp都有预设样式，所以不需要tailwindcss的预设 // 以下功能小程序不支持 space: false, // > 子节点选择器 divideWidth: false, divideColor: false, divideStyle: false, divideOpacity: false, },content: ['./pages/**/*.{vue,js}',// './main.js', './App.vue', // './index.html' ],theme: {extend: {},},plugins: [],
}
在根目录下新建tailwind-input.css
@tailwind base;
/* 如果是小程序的话，这一行注释掉，因为tailwind base模块提供的一些样式选择器是基于*，这在小程序中会报错 */
@tailwind components;
@tailwind utilities;tailwind CLI构建
npx tailwindcss -i ./tailwind-input.css -o ./static/css/tailwind.css --watch这行指令意思是，启动 tailwind cli，以 ./tailwind-input.css 为输入文件，以 ./tailwind.config.js （默认）为配置文件，开始扫描配置中 content 字段指定的【项目文件】，并输出结果css文件到 ./static/tailwind.css 中，并且监听这些【项目文件】的变化，实时更新输出结果文件
在 main,js或者App.vue种引入tailwind cli 的输出结果
例如，在main.js中
import "@/static/css/tailwind.css"
以上步骤即可在页面中使用tailwindcss了
缺点就是每次运行项目都要自己手动去执行npx tailwindcss -i ./tailwind-input.css -o ./static/css/tailwind.css --watch,不方便 所以必须改成自动化
在根目录的package.json文件中配置
"scripts": {"tailwind-dev": "tailwindcss -i ./tailwind-input.css -o ./static/css/tailwind.css --watch","tailwind-build": "tailwindcss -i ./tailwind-input.css -o ./static/css/tailwind.css"},如果没有package.json文件，在根目录执行npm init 初始化就有了
 - JupySQL， D-tale)
