[图片上传失败...(image-475de9-1636387074601)]
个人总结 tailwind css 功能主要包括三部分：
tailwind css 提供了一套以移动优先的，响应式样式类, 类似原bootstrap 可直接使用
[图片上传失败...(image-87b874-1636387074601)]
tailwind css 为处理响应式，伪类， 伪元素提供类型作用范围限定类
样式扩展，使我们能组合现有基础类或定义自己的样式类.
通过 taildwind.config.js 配置文件，能实现更多自定义功能
配置主要分为：
tailwind css 提供的预设类很多，一般根据官方文档，按照功能查询所需的类名。
总结几条规则：
个人觉得 tailwind css 的主要优势在于提供了一套自定义样式模板的工具，并有一个完整的可扩展的基础示例 预设样式 。
非常适合有UI设计体系或要求统一UI视觉的产品, 通过组合基础样式模板，统一样式规范，提高编写效率。
如果UI本身就没有统一规范的化，还是内联样式文件来的灵活些。
这一套有点像组件库为了可配置主题而抽离出来的组件样式变量。
官方文档
这个应该不是用CSS 实现的吧！利用有序列表
<ol>
<li>实现数字</li>
<li>实现数字</li>
<li>实现数字</li>
<li>实现数字</li>
</ol>
然后设置样式就行了。
穿件一个project文件夹用vscode或者其他编辑器打开，接着使用 npm init 初始化一个项目，初始化完成之后会有一个package.json文件。
npm i react react-dom
安装命令：
npm i [email protected] [email protected] [email protected]
安装成功之后，会出现node_modules和pack-lock.json包
node_modules文件夹webpack相关的包依赖，pack-lock是对包依赖的描述
安装babel编译ES6语法
npm i @babel/[email protected] [email protected] @babel/[email protected]
安装loader编译css文件
npm i [email protected] [email protected]
安装plugins打包HTML模板
注意：在安装@babel/coreh和@babel/preset-react这两个包时要安装大小相同的包
npm i [email protected]
先创建一个public文件夹，在该文件夹下面新建index.html
在根目录下新建src文件夹，在src文件夹下新建index.js作为入口文件，新建index.css用于编写样式
