Tailwind: Gabungkan css tersuai dengan arahan @komponen

Hai dev,
Saya terjumpa satu cabaran yang ingin saya kongsikan dan bagaimana saya menyelesaikannya. Artikel ini akan membantu pembangun lain seperti saya yang menghadapi isu yang sama.

Cabarannya

Cabaran saya ialah untuk mencipta komponen boleh guna semula dengan arahan komponen tailwind semasa saya menggunakan CSS tersuai saya seperti yang dilihat di bawah. Nampaknya mustahil pada mulanya dan mencabar.

css tersuai saya

.text-shadow: {
  text-shadow: none
}

.tap-highlight: {
  --webkit-tap-highlight-color: transparent
}

arahan komponen tailwind

@layer components {
  @apply text-shadow tap-highlight bg-red-900 rounded-full text-base
}

Penyelesaiannya

Selepas mencari penyelesaian di internet, saya tidak dapat membuatnya berfungsi. Jadi saya mempunyai idea untuk menambah kelas utiliti saya melalui fungsi addUtilities daripada pemalam tailwind

const plugin = require("tailwindcss/plugin");
---- other code goes here
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        ".text-shadow": {
          textShadow: "none",
        },
        ".tap-highlight": {
          WebkitTapHighlightColor: "transparent",
        },
      });
    }),
  ],

Apa yang saya lakukan ialah mengimport tailwindcss/plugin dan menambah kelas utiliti saya seperti yang dilihat di atas. Voila berkesan

---

Terima kasih kerana membaca! Beritahu saya dalam ulasan jika anda mempunyai sebarang pertanyaan.

Atas ialah kandungan terperinci Tailwind: Gabungkan css tersuai dengan arahan @komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!