Perkara yang saya tambahkan ke css tailwind keluar dari kotak

Untuk setiap projek CSS Tailwind, saya menambah beberapa gaya tersuai. Sesetengah gaya digunakan dalam hampir setiap projek. Saya akan berkongsi ini dan saya juga ingin tahu tentang apa yang semua orang telah menambah fail tailwind.css mereka.

Pertama, izinkan saya bercakap mengenai tabiat saya sendiri:

• Tentukan -webkit-tap-highlight-color .
• Tambah Bawah Isi env(safe-area-inset-bottom) .
• Mencantikkan senarai yang tidak teratur dengan simbol khas.

Berikut ini menerangkan tiga mata secara terperinci:

-webkit-tap-highlight-color

Sistem Android akan menyerlahkan apabila pautan diklik. Saya tidak suka kesan ini kerana ia mengaburkan unsur -unsur jadi saya mematikannya untuk pengalaman pengguna yang lebih baik.

@Layer Base {
  html {
    -Webkit-Tap-Highlight-warna: telus;
  }
}

@layer adalah arahan untuk Tailwind yang mengelakkan isu -isu kekhususan dengan memberitahu Tailwind untuk meletakkan gaya tersuai di mana "bekas" untuk diletakkan. Ia seperti berpura -pura bahawa lembaran gaya cascading tidak wujud, jadi tidak perlu bimbang terlalu banyak mengenai penyortiran CSS.

Hanya mengeluarkan klik menonjol boleh menyebabkan masalah kebolehcapaian kerana ia menyembunyikan arahan interaktif. Jadi, jika anda memilih pendekatan ini, lebih baik (jika anda mempunyai penyelidikan mengenai ini, saya juga ingin menyemaknya) untuk membolehkan :active untuk memberi maklum balas mengenai operasi ini. Chris menyediakan coretan kod untuk ini.

env(safe-area-inset-bottom)

Kelas utiliti ini mengendalikan bar bawah iPhone baru (tanpa butang "rumah"). Tanpa itu, beberapa elemen mungkin jatuh di bawah bar bawah, menjadikannya sukar untuk dibaca dan diklik.

@Layer Utilities {
  .pb-safe {
    padding-bottom: env (selamat-area-inset-bottom);
  }
}

Item Senarai Simbol Khas

Saya suka menggunakan simbol khas sebagai item senarai dalam senarai yang tidak teratur. Saya tidak akan menghukum anda kerana mencari ini. Kami pada dasarnya bercakap mengenai peluru dalam senarai yang tidak teratur. Tailwind memadamnya secara lalai melalui normalisasi. Saya menambah simbol khas untuk setiap projek saya.

Kaedah saya adalah seperti berikut:

@Layer Utilities {
  .list-interpunct> li: sebelum {
    Kandungan: '・';
    Terapung: Kiri;
    Margin: 0 0 0 -0.9em;
    lebar: 0.9em;
  }

  @media (min-lebar: 992px) {
   .list-interpunct> li: sebelum {
      Margin: 0 0 0 -1.5em;
      lebar: 1.5em;
    }
  }
}

Sekarang kita juga mempunyai ::marker yang boleh melaksanakan fungsi yang sama dan lebih mudah digunakan. Saya tidak menggunakannya kerana Safari mempunyai keserasian terhad.

Sekarang awak

Saya telah berkongsi apa yang saya tambah kepada semua projek tailwind, dan sekarang giliran anda. Apakah gaya tersuai yang anda tambahkan ke tailwind dalam projek anda? Adakah terdapat gaya yang anda perlukan? Tolong beritahu saya dalam komen! Saya suka mendapatkan beberapa idea dan mula mengintegrasikannya ke dalam projek lain.

Atas ialah kandungan terperinci Perkara yang saya tambahkan ke css tailwind keluar dari kotak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!