前言
承接上文关于TailWind CSS 核心概念的介绍，最后剩下了一个高度可定制的概念。Tailwind CSS 是一个高度可定制化的 CSS 框架，它提供了大量的 utility classes，帮助开发者快速构建现代的、响应式的用户界面。我熟读了一下TailWind官网的一些地址化的相关介绍,发现可定制化的相关干货蛮多的。下面将详细介绍 Tailwind CSS 中的可定制化内容
整体内容
- 重用样式的方式
- 功能以及指令(重点)
- 整体配置
在介绍定制化之前,还有一个小模块需要简单的介绍一下
重用样式的方式
TailWind 一直在强调效用第一的原则，其可以在它本身的核心概念里和其他的实现方式里找到。它甚至还专门告诉使用TailWind的开发者们不要提前进行代码抽象(premature abstraction),然后提出了两个在开发中常见的解决方式
- 使用编辑器的
多光标编辑功能,VsCode里使用Ctrl+D就可以选中然后多光标编辑
- 使用开发语言的
Loop功能,其实也就是循环。react里面常用map,vue里用v-for即可解决
功能以及指令(重点)
指令
指令是自定义 Tailwind 特定的 at 规则为 Tailwind CSS 项目提供特殊功能。下面将介绍几种不同的指令在Tailwind里的使用
@tailwind@layer@apply@config
@tailwind
使用tailwind指令将CSS注入到不同的Bucket里，达到区分并且分层的效果,常见的Bucket包含以下三种
css
/** 注入TailWind的所有基本样式 */
@tailwind base;
/** 注入所有的组件类和自定义组件类 */
@tailwind components;
/** 注入所有的实用程序类*/
@tailwind utilities;@layer
使用 @layer 指令告诉 Tailwind 一组自定义样式属于哪个Bucket。有效层是基础层、组件层和实用程序层。注入的代码一般在目录里全局样式文件。举例:next创建的项目一般就在src/app下的globals.css 里。当然使用 @layer 不用担心顺序的问题。tailwind会自动将@layer指令中的css移动到与相应@tailwind规则相同的位置
细心的读者已经发现里面包含了@apply这个指令,下面介绍一下它
@apply
@apply会将现有tailwind里定义的css内联到我们自己使用的CSS中，当需要自己手写一个类组件CSS的时候,这将变得十分有效。但是@apply有一个比较重要的知识点需要记住：
- 使用
@apply的时候会默认删除!important声明来避免产生特殊性的问题 - 如果想要使用
@apply来添加!important声明时，最好的方式就是在最后内联CSS最后添加!important
@config
使用@config指令来指定TailWind在编译css文件的时候应该去使用哪一个配置 文件,可以使用这个指令来区分和使用不同的theme
这四类指定 是在定制化CSS时可能避不开的，因此如果有需要定制化自己风格的开发者,请务必掌握以上四种 指令。建议在使用的时候多多尝试，因为可能会涉及到各种各样不同的问题。我亲身体会使用tailwind的配置还是需要花费一些时间的。不过好事多磨，建议大家多多研究。
功能
tailwind提供了两个函数便于去构建我们自定义的样式
theme()screen()
theme
tailwind提供theme方法来访问我们配置文件 里的配置，使用方法如下。各位可以自己尝试编写自己的自定义config然后在css里试试基础的实现方式
screen
screen函数允许创建通过名称引用断点的媒体查询，而不是在自己的 CSS 中复制它们的值。
整体配置
接下来介绍比较冗杂但是比较核心 的配置文件所包含的内容以及我们需要了解的知识点。在TailWind里少不了一个文件就是tailwind.config.js,可以在这个文件里面编写绝大多数的需要自定义的CSS。
如何添加
使用Tailwind CLI 构建一个TailWind Config文件,然后创建tailwind.config.js文件
js
npx tailwindcss init
如果有小伙伴想要使用tailwindcss的整体的全部配置可以使用 --full 命令
js
npx tailwindcss init --full配置项
- Content
内容部分是您配置所有 HTML 模板、JS 组件以及包含 Tailwind 类名称的任何其他文件的路径的位置
在这里我就不细细的介绍关于Content 里的内容了,如果有兴趣的小伙伴可以去阅读
- Theme(重要)
主题部分是我们定义调色板、字体、字体比例、边框大小、断点的地方，还有许多强大的功能
不管是自定义的主题颜色,还是想要覆盖其TailWindCSS里默认的主题颜色，都可以在配置项Theme 里实现,详情参考
- Plugins(重要)
Plugins插件允许我们向 Tailwind 注册插件，这些插件可用于生成额外的实用程序、组件、基本样式或自定义变体,TailWind 自身提供了许多强大的插件，以及很多三方的开发者提供的插件
因为Plugins 和Theme 在TailWind里使用的比较频繁而且比较重要,后面我会单独给大家介绍一下这两个配置项的具体使用方法。有兴趣参考Plugins的请阅读
- Prefix
前缀选项允许我们向所有 Tailwind 生成的实用程序类添加自定义前缀。当将 Tailwind 分层在可能存在命名冲突的现有 CSS 之上时，这是非常有用的。
官网给的例子，可以通过设置 prefix 选项来添加 tw- 前缀，如下所示:
使用方法如下:
详情可以参阅
- Important important 选项可让我们控制 Tailwind 的CSS是否应标记为 !important。当将 Tailwind 与具有高特异性选择器的现有 CSS 一起使用时，这是非常有用的。
- Separator(分隔符)
分隔符选项允许我们自定义应使用哪个字符来将修饰符（屏幕大小、悬停、焦点等）与CSS类名分开。
我们默认使用冒号 :, 但可以根据个人开发喜好来进行更改
总结
本文介绍了Tailwind关于高度可定制化 的一些使用方法和配置项。但是还有两个比较重要的核心配置项我会放在后面的文章继续介绍，感兴趣的小伙伴可以自己试试如何创建自己的可配置文件以及进行一些简单的配置。Tailwind学习起来实践还是比什么都更重要，建议大家伙多试试。有问题的小伙伴欢迎指正，共同进步。