Tailwind - 自定义样式

Tailwind 从根本上设计为可扩展和可定制，所以可以很方便的进行样式的扩展和自定义

自定义主题

可以通过tailwind.config.js 文件的 theme 部分对功能类对应的值进行自定义操作

任意值

虽然通常可以使用一组受限制的设计令牌(也就是预设值)来构建精心制作的设计，但有时需要打破这些限制才能达到像素完美的效果

<!--
	使用中括号语法来表示任意值
	中括号表示的任意值可以和任何功能类前缀一起结合使用
-->
<div class="top-[117px] lg:top-[344px]">
  <!-- ... -->
</div>

<!-- 使用自定义语法可以使用Tailwind提供的theme函数获取对应的静态值 -->

<!--	
	fit-content()是css原生函数 <=> min(maximum size, max(minimum size, argument))
	fit-content()表示自动计算元素的宽度或高度，以适应其内容的大小，但最终的尺寸不会超过指定的最大值，
	需要限制的最大值通过fit-content函数的参数进行指定，例如: fit-content(50px) --- 50px不需要添加对应的引号
	
	同样存在CSS变量属性值fit-content，以表示适应其内容的大小，例如: width: fit-content
-->
<div class="grid grid-cols-[fit-content(theme(spacing.32))]">
  <!-- ... -->
</div>

<!-- 
	自定义语法中可以使用css变量
	在引用css变量的时候，直接书写变量名即可，不需要添加var函数
-->
<div class="bg-[--my-color]">
  <!-- ... -->
</div>