Tailwind CSS Color Alpha: Tùy chỉnh Màu Sắc của Bạn với Độ Mờ

Các biến thể tự động về độ mờ cho các màu sắc Tailwind CSS dựa trên cấu hình độ mờ của bạn

Tại Sao?

Tailwind chỉ hỗ trợ độ mờ nhưng đôi khi bạn cần áp dụng nền/border hoặc văn bản mờ mờ.

Bạn có thể điều chỉnh cấu hình Tailwind của mình như sau

module.exports = {
  theme: {
    colors: {
      primary: "#2b2e4a",
      "primary-10": "rgba(43,46,74, 0.1)",
      "primary-20": "rgba(43,46,74, 0.2)",
      "primary-75": "rgba(43,46,74, 0.75)",
      // ...
    },
    // ...
  },
};

Nhưng điều này lặp đi lặp lại, gây nhầm lẫn và dễ gây lỗi. Chúng ta có thể làm tốt hơn.

Cài Đặt

npm install --save-dev tailwind-color-alpha

module.exports = {
  // ...
  plugins: [require("tailwind-color-alpha")()],
};

Plugin sẽ tự động sử dụng màu sắc và cấu hình độ mờ của bạn để tạo ra tất cả các giá trị rgba tương ứng cho các lớp tiện ích văn bản, nền, viền, fill và stroke của bạn, tuân theo cài đặt biến thể của bạn cho mỗi lớp.

Ví Dụ

module.exports = {
  theme: {
    colors: {
      primary: "#2b2e4a",
    },
    opacity: {
      "25": ".25",
      "50": "0.5",
    },
  },
};

Cấu hình ở trên sẽ tạo ra các tiện ích sau:

.bg-primary-alpha-25 {
  background-color: rgba(43, 46, 74, 0.25);
}
.bg-primary-alpha-50 {
  background-color: rgba(43, 46, 74, 0.5);
}
.text-primary-alpha-25 {
  color: rgba(43, 46, 74, 0.25);
}
.text-primary-alpha-50 {
  color: rgba(43, 46, 74, 0.5);
}
.border-primary-alpha-25 {
  border-color: rgba(43, 46, 74, 0.25);
}
.border-primary-alpha-25 {
  border-color: rgba(43, 46, 74, 0.5);
}
.hover\:text-primary-alpha-25:hover {
  color: rgba(43, 46, 74, 0.25);
}
.focus\:text-primary-alpha-50:focus {
  color: rgba(43, 46, 74, 0.5);
}

/* and more... */

Lưu ý rằng một màu có tên là red.default sẽ tạo ra text-red và do đó, chúng ta tuân theo quy ước của Tailwind với bg-red-alpha-${opacity}

Chi Tiết Tải Xuống:

Tác Giả: soueuls
Nguồn: https://github.com/soueuls/tailwind-color-alpha

Giấy Phép: MIT license