TailwindCSS 从零开始 - 新增自己的 Utility

除了可以新增元件外，也可以增加自订义的功能。

虽然 TailwindCSS 已经提供非常多好用的 class，但还是会遇到需要自定义功能的情况，以下就介绍怎麽自订义功能吧！

新增功能起手式

使用官方范例，可以看到跟新增元件的概念相似，告诉 style.css 要新增或覆写哪一个图层的内容，然後在里面再撰写想要的样式内容。

style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .scroll-snap-none {
        scroll-snap-type: none;
    }
    .scroll-snap-x {
        scroll-snap-type: x;
    }
    .scroll-snap-y {
        scroll-snap-type: y;
    }
}

写完後记得编译，然後看一下 tailwind.css 是否有编译成功。

tailwind.css

.scroll-snap-none {
  -ms-scroll-snap-type: none;
      scroll-snap-type: none;
}

.scroll-snap-x {
  -ms-scroll-snap-type: x;
      scroll-snap-type: x;
}

.scroll-snap-y {
  -ms-scroll-snap-type: y;
      scroll-snap-type: y;
}

这边发现一个 bug，就是我在 HTML 没有写出对应的 class 时，似乎没有办法编译成功在 style.css 自订义的功能内容於 tailwind.css 的档案中，所以要在 HTML 加上写上此样式的 class 名称才能解决。

新增响应式功能

想要自响应式功能也非常方便，只要在图层中加上 @responsive 就完成各种断点，真是太狂了，如下方范例。

style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    @variants responsive { /*加在这边*/
      .scroll-snap-none {
        scroll-snap-type: none;
      }
      .scroll-snap-x {
        scroll-snap-type: x;
      }
      .scroll-snap-y {
        scroll-snap-type: y;
      }
    }
  }

在 HTML 也要写上要使用的响应式断点才能成功编译，

HTML

  <div class="scroll-snap-none sm:scroll-snap-x"></div>

tailwind.css

编译後才会成功出现自订义的内容，并且可以看到注解也会呈现在预设断点的後方，代表有编译成功。

.scroll-snap-none {
  -ms-scroll-snap-type: none;
      scroll-snap-type: none;
}

@media (min-width: 640px) { /*加在这边*/

  .sm\:scroll-snap-x {
    -ms-scroll-snap-type: x;
        scroll-snap-type: x;
  }
}

@media (min-width: 768px) { /*加在这边*/
}

@media (min-width: 1024px) { /*加在这边*/
}

@media (min-width: 1280px) { /*加在这边*/
}

@media (min-width: 1536px) { /*加在这边*/
}

新增伪类效果

之前有练习到可以在元件中建立伪类效果，那功能也会需要伪类效果，只要在 Utilites 里面加上 @variants hover, focus 就可以了。

网页最常出现就是按钮滑鼠经过时会有个颜色转换提示，下方练习为一个按钮当我滑鼠经过时，会从红色变为更深的红色。

HTML

 <button class="btn btn-red">click</button>

把想要新增的样式写在响应式里面！让我於响应式也可以吃到其效果。

style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    @variants responsive {
        /*加在这边*/
        @variants hover, focus {
            .btn {
                @apply px-4 py-2 rounded border-transparent text-white;
            }
            .btn-red {
                @apply bg-red-500 border-red-600 border-2;
            }
            .btn-hover {
                @apply bg-red-700;
            }
            .btn-focus {
                @apply border-red-400 border-2;
            }
        }
    }
}

编译後就会看到 tailwind.css 也会有自订义的样式罗！

.btn {
  border-color: transparent;
  border-radius: 0.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}

.btn-red {
  --tw-bg-opacity: 1;
  background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(220, 38, 38, var(--tw-border-opacity));
  border-width: 2px;
}

.hover\:btn-hover:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(185, 28, 28, var(--tw-bg-opacity));
}

.focus\:btn-focus:focus {
  --tw-border-opacity: 1;
  border-color: rgba(248, 113, 113, var(--tw-border-opacity));
  border-width: 2px;
}

最後记得要把效果加回到按钮的样式中喔！

 <button class="btn btn-red sm:hover:btn-hover focus:btn-focus">
            click
        </button>

before hover

after hover

参考资料

• TailwindCSS Adding New Utilities

• 【Tailwind CSS 教学 - 11】新增 Utilities 方式，让您不缺各种 util CSS Class！