- 才踩坑完sass，TailwindCss又是什么？ 😱
- 想快速入门TailwindCss但又不想投入大量时间研究？😒
- 我们的项目为什么要用TailwindCss？
- TailwindCss相比less、scss、sass有什么特别之处吗？😍
逆熵而行，向阳而生，我是向阳花！如果你也有上述问题，并且也想快速低成本学习TailwindCss，这就是我整理TailwindCss专栏系列文章的意义。此系列文章分为：
- 环境篇：
包括Tailwind简介、·tailwindcss的优势、如何快速创建项目、turbopack简介及优势、TailwindCss相关插件（官方插件和类名排序插件的用法，以及其它特殊场景如何做排序，包括clsx类名拼接额外知识拓展等）、已有css知识体系如何快速跟TailwindCss做关联等等- 样式篇-上：如何使用
系统预设样式?、如何自定义样式?、宽高、如何撑满容器？和如何撑满设备屏幕？、什么是视口安全高度？、什么是布局视口高度？、什么是动态视口高度？、尺寸size-xx、边距（margin、padding、space）、边框（border、divide、outline）、字体相关（大小、样式、加粗、字符间距、行高）、文本排版（对齐方式、颜色、超出时的处理方式、换行、空白字符的处理）等等，还会包含一些容易忽略的css知识点。每个案例都附加源码与效果展示，主打一个让你不用实操一学就会！- 样式篇-下：下篇我们一起来学习
布局、Flexbox、Grid以及TailwindCss的核心功能-如何定制？- 答疑篇：会整理一些TailwindCss使用过程中常见的一些踩坑点及解决方案、比如
TailwindCss跟unocss的区别、如何覆盖默认的尺寸让1单位值不等于4px？听闻tailwindcss 会明显降低vite 热更新的速度😱？等等，如果你使用过程中也碰到了有趣的问题，也可以评论区一起交流 ☕️。⚠️ 注意 ⚠️
- 本系列文章所有案例项目中，TailwindCss版本是
3.4.1，Next框架版本为15.0.3- 如果你也想跟我一起从0-1体验一下Tailwindcss，但又嫌创建项目麻烦，可通过官方的 Playground在线快速体验。
TailwindCss是什么？
江湖有言：TailwindCss是目前最流行的 “原子化CSS框架” ？😱 并且截止目前为止已经斩获83.6k stars，而且社区也是异常的活跃👍🏻。它到底是怎么样一种框架？
Talk is cheap, show you the image~
相信通过这两张图片，你一定已经知道Tailwindcss大致是什么feel了，有没有一点当初写bootstrap般的丝滑感呢？那它还有没有什么优势呢？
给你几个爱上TailwindCss的理由
官方介绍的比较详细，不再重复赘述，此处只分享我自己体验过程中对于Tailwind优势的理解与总结：
- 可高度定制化
不同于less、scss、sass这类库还需我们手写css样式再引入，TailwindCss为我们提供了大量系统预设类名以及一些基础设计套件，比如尺寸、配色、布局、阴影等。当然也支持自定义，在无需手动编写与导入css样式的情况下非常快速的呈现界面（换用官方的话，就是让你不离开html而开发界面😄）。不得不说，tailwindcss真的是“不爱写css的前端党”的福音呐！😏
- 性能优化
通过按需加载样式类，TailwindCss可以显著减少css文件大小，提高页面加载速度(至于为何提高的后文也有提及)。关于显著提升文件体积这块，有一个原因是基于它样式的可复用性，举例：
如果不使用这类原子化的CSS框架，我们在页面中不同层级元素中或多或少存在着一些重复的样式，打包时会重复打包；而直接用TailwindCSS，是原子化最小粒度的引用，比如text-red-500，哪怕全局引用100次它也只会产生一份！当然一个标签中可能会存在比较多的类名也是我们需要为“原子化”买的单！但我们仍然可以通过熟练掌握它的玩法用更精简的写法替代尽可能规避这类问题。
- 强大的响应式集成
产物单位会自动转换成rem，当然也可以是其它比如em或者px等。再也无需通过媒体查询、百分比等一系列手段实现响应式了。
项目创建及TailwindCss安装
让我们从0-1创建一个Next项目一起开启TailwindCss探索之旅吧？
技术栈：TailwindCss+Next
⚠️注意⚠️
官网上的步骤 稍微有点繁琐，脚手架装完后需要手动安装一次
postcss、tailwindcss、autoprefixer等，而且安装完后还需要通过npx tailwindcss init -p进行初始化，初始化命令会自动生成postcss.config.js和tailwindcss.config.js两个文件，还要在主文件中手动注册TailwindCss相关样式，相对来说比较繁琐，我们可以按如下方式安装，最后再手动安装autoprefixer即可。
autoprefixer：作用是为每个浏览器自动新增前缀处理不同浏览器的兼容性问题- 跟postcss有什么关联？首先可以理解为它们是
上下游的关系，tailwind根据配置文件(tailwindcss.config.js)及其内部规则生成原生css文件，然后它需要postcss配合autoprefixer插件自动分析代码为不同css代码做浏览器兼容性处理，其次需要借助postcss自身的代码优化与压缩减少文件体积，当然也需要借助postcss的插件与各类主流打包工具集成。
- 创建项目
npx create-next-app@latest frontend-next-tailwindCss --use-pnpm
除了pnpm，还可以选择别的，我比较喜欢使用pnpm。
配置选择：TypeScript、Eslint、TailwindCss、选择src目录、AppRouter、打包工具选用官方的Turbopack(当然你也可以根据你的需求自行选择)
- 额外安装
额外安装autoprefixer,为每个浏览器自动新增前缀处理不同浏览器的兼容性问题
pnpm add autoprefixer
Turbopack是什么？打包工具为啥选它？
构建工具库这类项目,目前常用的构建工具如：rollup、esbuild、swc、vite等等，为啥Next采用了turbopack呢?（以下仅代表个人观点，如有不妥欢迎指出☕️）
- 为什么不是rollup？
rollup的优点
- rollup同时支持打包多种规范并且相对于webpack来说产物还可以分模块显示，而且没有运行时runtime的代码，产物非常简洁！
- 作为打包工具其生态也更加丰富，灵活性更高，曾经也受很多优秀组件库的青睐，比如Vite开发环境用 esbuild 插件的
transform来做代码转换（类似webpack的loader能力），而生产环境则是用的 rollup 打包的
通过下图可以看到，rollup打包时，不同规范的产物会分模块输出：
rollup的缺点
它是用JavaScript语言开发的，相比于esbuild(基于go开发)或者turbopack等一众基于Rust开发的打包工具而言，被拍在沙滩上也是早晚的事😭，况且平替它的rolldown也即将横空出世！
- 为什么不是esbuild？
esbuild是用Rust开发的超快的构建工具，但是它没有热更新和缓存
- 为什么不用vite？
Vite依赖浏览器原生的ESM特性，开发环境用 esbuild 插件的 transform 来做代码转换而无需构建已经是当下非常受追捧的构建工具。但是作为工具库的打包构建工具，依赖ESM这种方式当模块量足够多时，浏览器就需要处理大量的模块依赖。而Turbopack的初心更希望是从构建速度上下功夫！
- Turbopack的优势
综上，目前来看主流打包工具关于 “打包提速” 的解决思路要么是依赖ESM不做构建，要么是极速构建，显然Turbopack选择了后者，借助Rust的优势比如SWC的编译和 懒构建 的方案实现了超快打包构建的构想。
TailwindCss相关插件使用介绍
- Tailwind Css IntelliSense
TailwindCss固然好用，但全凭记忆也未免太废脑容量😱，而且我们也完全没必要去记忆类名，因为官方给我们提供了对应的vscode插件 Tailwind CSS IntelliSense 安装即可。它会为我们提供快速选择提示、同时也能在开发时直观地看到所选色系的色值等，而且将鼠标悬浮到指定类名上还可以看到css源码
这个是对类名进行排序的插件，使用也非常简单：
第一步：安装插件
pnpm add prettier prettier-plugin-tailwindcss -D
第二步：配置
首先在根目录下新增.prettierrc文件：touch .prettierrc
// 新增配置
{
"plugins": ["prettier-plugin-tailwindcss"]
}
自定义的非标类名排序
此插件默认对class进行排序的，如果我们的类名定义是来自各种插件的，比如className、:class、 [ngClass] 或其他自定义的类名，我们只需在.prettierrc文件中新增如下配置即可：
{
"tailwindAttributes": ["myClassList"]
}
函数调用中类名排序
对一些类似clsx的类名拼接库生成的类名进行排序时，可在.prettierrc文件中添加如下配置：
// .prettierrc
{
"tailwindFunctions": ["clsx"]
}
import clsx from 'clsx'
function MyButton({ isHovering, children }) {
let classes = clsx(
'px-4 bg-blue-500 rounded py-2 text-base text-white',
// 排序后
//'rounded bg-blue-500 px-4 py-2 text-base text-white'
{
'bg-blue-700 text-gray-100': isHovering,
},
)
return (
<button className={classes}>
{children}
</button>
)
}
关于clsx的额外拓展
- 基本拼接：
将多个类名直接拼接
import clsx from 'clsx';
const MyComponent = () => {
const classes = clsx('class1', 'class2');
return <div className={classes}>{'这是一个带有组合类名的元素'}</div>;
};
export default MyComponent;
- 条件拼接：
可根据特定条件动态拼接，默认为true时拼接false时不做拼接
import clsx from 'clsx';
const MyButtonComponent = ({ isActive }) => {
const classes = clsx('button', { 'active': isActive });
return <button className={classes}>{'这是一个按钮'}</button>;
};
export default MyButtonComponent;
- 多条件拼接：
支持同时拼接多个条件的类名，原理同上
import clsx from 'clsx';
const MyButtonComponent = ({ isActive, isLarge }) => {
const classes = clsx('button', {
'active': isActive,
'large': isLarge
});
return <button className={classes}>{'这是一个按钮'}</button>;
};
export default MyButtonComponent;
css中样式如何跟TailwindCss关联？
相信一定会有同学有相同的困惑，TailwindCss看起来需要记忆大量的类名，而且就算使用vscode插件辅助提示但是由于tailwind的定义跟我们已经熟知的css体系命名有很大初入，这就导致我们不知道我们非常熟悉的css在Tailwind中对应的样式是什么？如何关联？
这个问题也不难解决，官方的文档已经替我们想好了解决办法，为我们提供了强大的文档检索能力：比如我们想要定义行高，不管怎么输入编辑器都没法提示，这时就可以直接在官方文档中通过我们已掌握的css知识体系关键词检索啦！
总结
本文我们学习了包括Tailwind简介、·tailwindcss的优势、如何快速创建项目、turbopack简介及优势、TailwindCss相关插件（官方插件和类名排序插件的用法，以及其它特殊场景如何做排序，包括clsx类名拼接额外知识拓展）、已有css知识体系如何快速跟TailwindCss做关联等等。
本文过程整理的比较详细，主打一个让你一看就会！
逆熵而行，向阳而生，我是向阳花🌻！ 本文主要是给Tailwind初学者打造的，从而可以少走弯路快速学习！还望老司机们不喜轻喷，当然指教是非常欢迎的☕️。创作不易，如果本文对你相对有所帮助记得收藏，纯技术分享喜欢的话赞一个再走？😊☕️
下一篇-《TailwindCss最全实践指南-样式篇-上》 我们将正式开启TailwindCss体验之旅☕️
以下是作者其它专栏的部分文章，感兴趣的也可以顺便进来逛逛~
《重学JavaScript系列专栏》其它文章推荐：
- 前端如何取消请求？AbortController除了取消请求还能干啥？
- async 和 defer啥区别来着？
- 发布订阅者模式原来是这样 “搞事情” 的！
- 你家3岁小孩也能看懂的防抖和节流
- 手动模拟实现call、apply和bind方法---call和apply方法实现
- 手写call、apply、bind方法---bind方法实现
《手撕源码系列专栏》文章推荐
《Webpack配置从基础到高阶系列专栏》文章推荐
