Tailwind 速记及注意事项

# Tailwind 速记及注意事项

# 默认大小为 4

比如高 4px 可以写为 h-1； margin-left:16px-> ml-4;

需要记的就是前面的前缀缩写，4 以内 0.5 为 step，10 以内 1 为 step，16 以内 2 为 step，后面都是 4，最大 94

# 百分比的写法

宽 25% : w-3/12 or w-1/4

# 选择器

: 的解释，伪类选择，媒体查询

# 非最后一个的写法

[&:not(:last-child)]:ml-6 or ml-6 last:ml-0

# 路径的问题

bg-[url('./static/images/swich_light.png')] css 路径跟 js 不一样，比如这个路径是相对于最外面引入的那个 css 文件的路径，本质是 @tailwind utilities,因为背景属于这一层

# @layer base components utilities

就是在 css 的使用的地方分了一个层的概念，优先级 utilities>components>base；其次插件会对这三个分层起作用，如果你直接写不会享有 tailwindcss 的一些插件功能，比如 tree shaking、设置主题对应大小等

# 父级元素

父元素有 active 的时候，子元素才有 xxx 的样式可以如下这样写，父元素加 group，子元素用 group-[.active] 判断父元素是否含有 active

<div
  className={`group relative ml-6 overflow-hidden ${state ? "active" : ""}`}
  onClick={toggle}
>
  <div className="flex h-[20px] w-[20px] flex-col justify-between">
    <div className="bg-base h-[2px] w-[18px] transform transition-all duration-300 group-[.active]:translate-x-10"></div>
    <div className="bg-base h-[2px] w-[18px] transform transition-all delay-75 duration-300 group-[.active]:translate-x-10"></div>
    <div className="bg-base h-[2px] w-[18px] transform transition-all delay-150 duration-300 group-[.active]:translate-x-10"></div>

    <div className="absolute top-2.5 -translate-x-10 transform transition-all duration-500 group-[.active]:translate-x-0">
      <div className="bg-base absolute h-[2px] w-5 rotate-0 transform transition-all delay-300 duration-500 group-[.active]:rotate-45"></div>
      <div className="bg-base absolute h-[2px] w-5 -rotate-0 transform transition-all delay-300 duration-500 group-[.active]:-rotate-45"></div>
    </div>
  </div>
</div>

# important 的用法

具体描述的前面添加 !

# 取名字不能使用关键字

比如我定义了一个颜色叫 base,想要设置一个字体的颜色为我自定义的颜色，但是字体大小里面有个叫 text-base，这样就冲突了，明明是我设置的颜色，最终字体的大小也会被影响到

# 不要动态构建 className

❌

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

正确

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

# 合理使用 css 变量，html 属性等

可结合动态 className 理解

# 官方不建议与预处理一起使用

编译会更快
导致tailwindcss 的一些功能无法正常使用，如：theme、@apply，@screen 等并不是不能使用，换个写法，或者使用某种语法让预编译不处理某些语句还是可以用的

# v3 当中已经是 JIT

← Tailwind CSS