Tailwind CSS ialah salah satu rangka kerja CSS popular yang menawarkan banyak kelas. Kelas ini membantu memperkemas dan meningkatkan aliran kerja pembangunan web. Antara pelbagai kelas adalah beberapa kelas yang mungkin belum pernah didengar oleh pembangun, dipandang remeh atau agak baru.

Kelas ini mempunyai potensi besar untuk menyelaraskan aliran kerja pembangunan, meningkatkan estetika antara muka web dan meningkatkan produktiviti.

Dalam tutorial ini, kami akan memeriksa enam daripada kelas ini: kelas kontena, utiliti saiz, utiliti ruang, utiliti pengapit talian, utiliti gelang dan utiliti pemangkas. Kami akan menggunakan CDN Tailwind untuk tutorial ini.

Kelas kontena

Kelas kontena membolehkan anda membuat bekas yang menskalakan saiznya berdasarkan penyemak imbas anda. Ia direka bentuk untuk menetapkan lebar maksimum elemen agar sepadan dengan lebar min titik putus semasa, menjadikannya responsif kepada saiz skrin yang berbeza.

Responsif ini dicapai dengan melaraskan lebar bekas berdasarkan saiz port pandangan, memastikan kandungan dalam bekas dipaparkan dengan sewajarnya merentas pelbagai peranti.

Untuk menghuraikan, Tailwind CSS menggunakan set titik putus yang dipratentukan, seperti sm, MD, lg, xl, 2xl, yang sepadan dengan lebar minimum tertentu. Titik putus ini menggunakan gaya berbeza pada saiz skrin yang berbeza, menjadikannya lebih mudah untuk mencipta reka bentuk responsif tanpa perlu menulis pertanyaan media tersuai.

Kelas kontena memanfaatkan titik putus ini untuk melaraskan lebar maksimumnya dengan sewajarnya, memastikan kandungan dalam kontena berskala dan menyesuaikan diri dengan saiz port pandangan penyemak imbas.

Ini memastikan kandungan anda responsif dan kelihatan bagus pada semua peranti tanpa perlu menulis CSS tersuai untuk setiap titik putus. Ia menjimatkan masa dengan menyediakan struktur susun atur yang konsisten merentas projek anda.

Di bawah ialah contoh yang menunjukkan kelas kontena:

 
Container Class
 
 This is a demonstration of the container class in Tailwind CSS. The container is centered and scales its size based on the viewport size. 
 
  Click Me  
 

Apabila anda menyemak keputusan dalam penyemak imbas anda, anda sepatutnya mempunyai sesuatu seperti ini:

Anda akan melihat bahawa lebar bekas akan melaraskan secara automatik berdasarkan titik putus semasa, memastikan kandungan dipaparkan dengan sewajarnya merentas pelbagai peranti.

Utiliti saiz

Utiliti saiz membolehkan anda mengawal lebar dan ketinggian elemen secara serentak. Ciri ini amat berguna untuk mencipta elemen segi empat sama atau memastikan elemen mempunyai dimensi yang konsisten merentas projek anda.

Utiliti saiz menyediakan pelbagai pilihan, termasuk saiz piksel tetap seperti saiz-48 untuk saiz piksel tertentu dan saiz pratakrif daripada persediaan Tailwind anda, seperti saiz-2, yang menggunakan lebar dan ketinggian berdasarkan skala yang ditakrifkan dalam konfigurasi Tailwind anda.

Begini cara anda boleh menggunakan utiliti saiz:

 
 
 
Size 48
 
 
 
Size 64
 
 
 
Size 80
 
 
 

Untuk kotak pertama, saiz-48 menetapkan kedua-dua lebar dan tinggi kepada 48 skala jarak. Kotak kedua dan ketiga mengikut struktur yang sama, dengan saiz-64 dan saiz-80kelas bertujuan untuk menetapkan saiznya.

Apabila anda menyemak keputusan dalam penyemak imbas anda, anda sepatutnya mempunyai sesuatu seperti ini:

Utiliti ruang

Utiliti ruang direka untuk mengawal jarak antara elemen, menjadikannya lebih mudah untuk membuat reka letak yang menarik secara visual dengan jarak yang konsisten.

Tailwind menyediakan dua kelas utama untuk mengurus ruang: ruang-x untuk jarak mendatar dan ruang-y untuk jarak menegak. Kelas ini boleh digunakan pada elemen bekas untuk menggunakan jarak secara automatik antara elemen anak langsungnya.

Ini penting untuk mengekalkan jarak yang konsisten sepanjang reka bentuk anda. Ia menjimatkan masa dengan menghapuskan keperluan untuk menulis CSS tersuai untuk jarak, membolehkan anda menumpukan pada aspek lain dalam reka bentuk anda.

Di bawah ialah contoh cara menggunakan utiliti ruang untuk menambah jarak mendatar antara butang dalam bekas fleksibel:

 
 
 
 
Card 1 Title
 
 Card 1 description or additional information. 
 
 
 
 
 
Card 2 Title
 
 Card 2 description or additional information. 
 
 
 
 
 
Card 3 Title
 
 Card 3 description or additional information. 
 
 
 
 

Dalam kod di atas, utiliti space-y-4 menggunakan jarak menegak antara elemen anak setiap kad, dengan itu mewujudkan elemen jarak yang konsisten di dalam setiap kad.

Apabila anda menyemak keputusan dalam penyemak imbas anda, anda sepatutnya mempunyai sesuatu seperti ini:

Utiliti pengapit talian

Utiliti pengapit garis ialah alat berkuasa untuk mengawal limpahan teks. Ia membantu dengan memotong teks secara visual selepas bilangan baris yang tetap. Ia amat berguna untuk mengekalkan susun atur yang bersih dan seragam, terutamanya apabila berurusan dengan kandungan dinamik yang mungkin melebihi kawasan paparan yang dikehendaki.

Below is an example of a card that uses the line-clamp utility to control text:

  
 
Card Title
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor et velit aliquam efficitur. Sed velit nisi, lacinia eu nisl id, lacinia lacinia nisl. 
 
 
 #tag1 #tag2 
 

The description text is controlled using the line-clamp-3 class, which limits the text to three lines. If the text exceeds three lines, it will be truncated, and an ellipsis will be added to indicate the truncation.

This ensures that the card remains visually clean and that users can quickly understand the content without being overwhelmed by too much text.

When you check the result in your browser, you should have something like this:

Ring utility

The ring utility is used to apply a border around an element. It also provides a way to add outline shadows or focus rings to elements. This is a nice alternative to the older shadow-outline and shadow-xs classes, allowing for more customizable focus states.

It enhances the user experience by providing visual feedback on interactive elements, such as buttons or input fields, without the need for custom CSS. The ring utility is highly customizable, allowing you to control the width, color, and opacity of the ring.

Below is an example of how you can use the ring utility:

 
  Button 1   Button 2   Button 3  
 

In the code above, the ring utility is used to apply a ring outline around the button elements, which can be customized in terms of width and color.

Additionally, it's combined with other utilities to change the ring's appearance based on different states, such as hover or focus.

This approach allows for interactive and accessible designs by providing visual feedback to users when they interact with the buttons.

When you check the result in your browser, you should have something like this:

Truncate utility

The truncate utility is one of Tailwind's text overflow utilities used to truncate text that overflows its container by hiding the extra content and replacing it with an ellipsis (...).

This ensures that text does not spill out of its designated area, maintaining a clean and professional appearance. It saves time by preventing layout issues caused by overflowing text.

Below is an example showing how to use the truncate utility:

 
Card Title
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc at cursus pellentesque, nisl eros pellentesque quam, a faucibus nisl nunc id nisl. 
 

The truncate class is applied to the

tag to truncate the text with an ellipsis if it overflows its container.

When you check the result in your browser, you should have something like this:

And that's a wrap!

Conclusion

In this article, we examined six utility classes that can boost productivity and provided an example for each.

Understanding these utility classes can help you focus more on creating unique and functional designs rather than spending excessive time on repetitive CSS coding tasks.

Atas ialah kandungan terperinci Enam Kelas Utiliti CSS Tailwind untuk Meningkatkan Produktiviti Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!