TailwindCSS 从零开始 - 元件相同时，把共同样式拉出来

单一按钮样式元件

前篇有写到单一按钮，可以把样式拆成元件来使用。如下：

@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;
  }
}

如果今天我有两个按钮，一个绿色一个蓝色，依照上述概念，似乎要写成这样：

@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;
  }

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

其实我就是复制同一串样式，然後把颜色改掉，如此而已，当然画面也是会有同样效果啦...

可是如果今天画面有五颗按钮，那我颜色就要改五次，同样的程序码要复制五次，这样如果样式越来越多就越来越难维护跟阅读。

元件中再抽共用元件

後来观察，这跟 Bootstrap 有一点点异曲同工之妙，也就是可以再把按钮的共同样式拆出来，变成 .btn 去单独处理按钮，颜色之後再填上。

template

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

style.css

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

    .btn-blue {
        @apply bg-blue-500;
    }
    .btn-blue:hover {
        @apply bg-blue-700;
    }
    .btn-blue:focus {
        @apply ring-blue-400;
    }
}

虽然看起来样式变多了，可是细看会发现每个都单纯管理自己的内容，这样要修正相对好变动，不用担心改错了，其他也被影响到！

也顺便检查 tailwind.css 编译後的 CSS 有没有成功，看来是有成功编译罗！

tailwind.css

.btn {
  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: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: 0.75;
}

.btn-green {
  --tw-bg-opacity: 1;
  background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
}

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

.btn-green:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(52, 211, 153, var(--tw-ring-opacity));
}

.btn-blue {
  --tw-bg-opacity: 1;
  background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
}

.btn-blue:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(29, 78, 216, var(--tw-bg-opacity));
}

.btn-blue:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(96, 165, 250, var(--tw-ring-opacity));
}

画面也有成功渲染！