TailwindCSS 从零开始 - 把重复使用的功能变成元件

tailwindcss

Utility-first 固然方便，也是有缺点的，虽然免除了定义 class 名称的困扰，但换来的是满满的样式名称，像是如果要做一张图文卡片，就会变成这样。

demo: https://codepen.io/hnzxewqw/pen/gOmNGVB

说实在要维护起来真的满困难的，如果刚好接手的又对 TailwindCSS 不熟，那就会花费很多时间。

包装成元件

虽然 Utility-first 的特性就是会有满满的样式名称，的确是令人诟病的，但 TailwindCSS 贴心的让开发者可以对於重复使用的元件同一功能且可重复使用的方法。

例如：我今天开发了一个按钮样式

demo: https://codepen.io/hnzxewqw/pen/wvJLPBZ

但一个网页一定不只一颗按钮，总不能每次做按钮，都要打这麽多 class 吧? 就算是复制，也是会花满多时间，而且可能贴错。

使用 @apply 语法组成汇重复使用的 class

像这个按钮可能会很多页面都会用到，如果一开始接触 TailwindCSS，光是要找按钮在哪里，就会花点时间，官方建议使用 @layer 图层的属性，去告诉框架，我是要在 component 的里面去更新或覆写预设样式，再来可以把原本按钮的样式名称用 @apply 包装，写在 TailwindCSS 预设的 style.css 里面。

如果也是跟我一样是平面设计转职的朋友，相信用图层的方式去理解应该满快速的。

style.css

/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components{
  .btn-green {
    @apply py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md;
  }
  .btn-green:hover {
    @apply bg-green-700;
  }
  .btn-green:focus {
    @apply outline-none ring-2 ring-green-400 ring-opacity-75;
  }
}

再来把 HTML 的按钮样式改成包装好的样式名称 btn-green，

template

  <button class="btn-green">Click me</button>

完成後，进行编译，编译完後就可以出现效果。

如果还不放心，可以到 tailwindcss.css 档案中找一下刚刚内容做重复的检查，就会看到编译过後的样式罗！

tailwindcss.css

.btn-green {
  --tw-bg-opacity: 1;
  background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
  border-radius: 0.5rem;
  font-weight: 600;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}

.btn-green:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(4, 120, 87, var(--tw-bg-opacity));
}

.btn-green:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(52, 211, 153, var(--tw-ring-opacity));
  --tw-ring-opacity: 0.75;
}

如此就可以完成跟上方写的按钮相同的样式罗！