tailwindcss 是什么？

css框架，乐高积木式的工具包。与bootstrap不同，bootstrap提供的是现成的组件，但是tailwindcss提供的是各种工具类，开发者可以自己组合使用。
组件实现相关的设计工作还是需要开发者自己设计实践，然后使用tailwind相关的工具类来拼装而成。
整体拼装复杂度角度，容易上手使用。

具有哪些核心概念
1、布局（layout），以及具体的flexbox和grid布局。
2、spacing，即padding和margin：不同元素之间的空间范围。
3、sizing：组件大小。
4、字体：字体各类的属性设置。
5、背景。
6、边线。
7、表格。
8、交互特性、动态变化、特殊效果。

官方文档：https://tailwindcss.com/docs/
要学习tailwindcss可以先快速读一遍这个文档的重要部分。

怎么样安装，主要讲和nextjs的结合使用

安装命令

npm install tailwindcss @tailwindcss/postcss postcss

然后需要再配置文件postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

postcss插件可以理解为 是一个css的翻译器

那么如何使用tailwindcss来实现网页的效果呢？（实战才是最重要的，一个框架宣传的再好，也只有真正可以帮助解决问题，才是有效的工具）
tailwindcss靠着生态圈中各个封装好的工具，快速实现兼容性优秀的站点。

第一层 layout（站点最基础的配置）

第一种选择，使用AI generation 方式：https://purecode.ai/generations/
输入layout的描述，可以直接复制代码。如果真正需要满足需求的话，需要精细化处理下；

第二种的方式：直接套用kutty、tailwindcss提供的基础layout模板，也很方便。
这家也有免费的模板：https://www.creative-tim.com/templates/tailwind-free

第二层 header和footer组件

header和footer是每个网站都需要的部分。

footer可以使用这个网站提供的组件https://tailblocks.cc/，基本需求能满足。但是这个站点流量不咋地。

第三层 小模块

为什么叫小模块，其实footer和header也是小模块，只不过header和
也是从kutty网站可以直接找到需要的样式进行使用。kutty网站地址：https://kutty.netlify.app/components/

第四层 小组件

小组件区分于小模块，组件是最基础的元素，比如按钮、字体等。
这个可以使用shadcn，安装很方便，按需安装，不用对于其他css造成干扰。

使用这些积木，可以完成网站前端的基础框架。UI设计可以使用figma软件。
**UI的开发，很多细节需要在figma设计稿进行标注，**这样开发的时候，不用再纠结像素值。