1.基础-构建依赖 ⬇️

// 安装 Tailwind
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
// 创建配置文件 postcss.config.js --- tailwind.config.js
npx tailwindcss init -p

修改 tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
     colors:{
        //自定义颜色
        "welcome-btn":"#0052FF"
      }
    },
  },
  plugins: [],
}

构建一个less文件

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

在package.json---scripts中添加

 "tailwind": "tailwindcss build src/style/all.less -o public/all.css",

查看public之后运行

npm run tailwind

成功后public下会增加一个css文件

之后我们编辑页面文件

import React from "react";
import './style.less';

class TailwindPage extends React.PureComponent{
  constructor(props) {
    super(props)
    this.state = {
    }
  } 
  componentDidMount() {
  }
  render() {
    return (
        <button className="text-5xl bg-black text-yellow-500 hover:bg-pink-700 hover:text-green-500">
          Tailwind
        </button>
    )
  }
}
export default TailwindPage

效果如下⬇️

划过效果⬇️

——————————————我是分界线-建议上面先走一遍———————————

2.核心概念 ⬇️

无需编写 CSS

解决了：
    1. 给类命名而浪费精力：不需要仅仅为了设置一些样式而额外添加一些像 `sidebar-inner-wrapper` 这样愚蠢的类名，不必再为了一个 flex 容器的完美抽象命名而倍受折磨。
    2. CSS 停止增长： 使用传统方法，每次添加新功能时 CSS 文件都会变大。使用功能类，所有内容都是可重用的，因此您几乎不需要编写新的CSS
    3. 更改会更安全： CSS 是全局性的，您永远不知道当您进行更改时会破坏掉什么。您 HTML 中的类是本地的，因此您可以更改它们而不必担心其他问题
个人感觉：
    class命名 和 CSS体积 这两个点确实受益 否则写到后面名称还得靠谷歌翻译。。。😂

为什么不使用内联样式（官方回复，个人觉得不至于😂，但还是大家看看吧）

对这种方式的一个普遍反应是, “这不就是内联样式吗？” 在某些方面是 — 您是将样式直接应用于元素，而不是为元素分配一个类，然后在这个类中设置样式。
但是使用功能类比内联样式具有一些重要的优点：
**基于约束的设计**. 使用内联样式, 每个值都是一个魔术数字。使用功能类, 是从预定义的设计系统中选择样式，这使得构建统一的UI变得更加容易。
**响应式的设计**. 在内联样式中您不能使用媒体查询, 但您可以使用 Tailwind 的响应式功能类常容易的构建完全响应式的界面。
**Hover, focus, 以及其它状态**. 内联样式无法设置 hover 或者 focus 这样的状态, 但 Tailwind 的状态变体使用功能类可以非常容易的为这些状态设置样式。

响应式设计

Tailwind 中的每个功能类都可以有条件的应用于不同的断点，这使得可以轻松的构建复杂的响应式界面而不用离开 HTML
根据常用的设备分辨率方案，默认内置了 5 个断点

感觉相似于兼容性开发（个人没有用到这个不清楚坑的情况）

未结束。。。

聊聊 tailwindcss

1.基础-构建依赖 ⬇️

2.核心概念 ⬇️

无需编写 CSS

为什么不使用内联样式（官方回复，个人觉得不至于😂，但还是大家看看吧）

响应式设计