Cara membina laman web yang unik dan indah dengan css tailwind

Memilih rangka kerja CSS yang betul adalah bahagian penting dalam pembangunan projek baru. Rangka kerja seperti Bootstrap dan Yayasan adalah popular untuk komponen pratetap siap sedia mereka yang pemaju dapat dengan mudah dimulakan. Kaedah ini sesuai untuk laman web mudah dengan penampilan dan rasa yang lebih serba boleh. Tetapi untuk laman web yang lebih kompleks dan diperibadikan, masalah timbul.

Apabila projek berlangsung, kita perlu menyesuaikan komponen, membuat komponen baru, dan memastikan bahawa asas kod akhir tetap seragam dan mudah dikekalkan selepas pengubahsuaian.

Keperluan di atas sukar untuk bertemu dengan kerangka seperti bootstrap dan asas kerana rangka kerja ini membawa banyak gaya yang subjektif dan dalam banyak kes yang tidak diingini. Akibatnya, kita perlu terus menyelesaikan masalah kekhususan semasa cuba mengatasi gaya lalai. Ini tidak mudah.

Penyelesaian di rak mudah dilaksanakan, tetapi kekurangan fleksibiliti dan dibatasi oleh sempadan tertentu. Sebaliknya, mereka bentuk laman web tanpa rangka kerja CSS tidak mudah dikendalikan dan dikekalkan. Jadi, apakah penyelesaiannya?

Penyelesaian, seperti biasa, mengikuti min keemasan. Kita perlu mencari dan menggunakan keseimbangan yang betul antara konkrit dan abstrak. Rangka kerja CSS peringkat rendah memberikan keseimbangan ini. Terdapat banyak rangka kerja sedemikian, dan dalam tutorial ini, kami akan meneroka yang paling popular: CSS Tailwind.

mata utama

Tailwind CSS mengamalkan pendekatan pilihan yang praktikal yang membolehkan lebih banyak kawalan langsung dan penyesuaian komponen web dalam HTML, dengan itu memudahkan asas kod yang lebih mudah diurus dan berskala.
Pemasangan dan persediaan CSS Tailwind sangat mudah, termasuk pemasangan NPM, konfigurasi melalui
• , dan menggunakan perintah tailwind.config.js untuk memasukkan gaya. @tailwind
Tailwind CSS menyokong reka bentuk responsif melalui kelas utiliti pertama yang boleh digunakan secara kondusif menggunakan awalan breakpoint untuk membina laman web responsif dengan mudah.
Rangka kerja menggalakkan pengekstrakan corak umum ke dalam komponen yang boleh diguna semula, mengurangkan kelebihan dan meningkatkan kecekapan reka bentuk gaya.
penyesuaian kuat Tailwind membolehkan pemaju memperluaskan rangka kerja dengan kelas dan utiliti CSS mereka sendiri, menyesuaikan tema lalai untuk memenuhi keperluan khusus projek.
Dari blog peribadi kecil ke aplikasi perusahaan yang besar, CSS Tailwind sesuai kerana ia fleksibel dan mudah dikekalkan.

Apa itu Tailwind?

Tailwind bukan sekadar kerangka CSS, ia adalah enjin untuk mewujudkan sistem reka bentuk. -

Laman Web Rasmi TailWind

Tailwind adalah koleksi kelas utiliti peringkat rendah. Mereka boleh digunakan untuk membina apa -apa jenis komponen seperti batu bata LEGO. Koleksi ini meliputi sifat CSS yang paling penting, tetapi dapat dengan mudah dilanjutkan dalam beberapa cara. Dengan tailwind, penyesuaian tidak lagi menjadi masalah. Rangka kerja ini mempunyai dokumentasi yang sangat baik, butiran setiap utiliti kelas dan menunjukkan kaedah tersuai. Semua pelayar moden dan IE11 menyokongnya.

Mengapa menggunakan rangka kerja keutamaan praktikal?

Rangka kerja CSS keutamaan praktikal rendah seperti Tailwind mempunyai banyak manfaat. Mari kita meneroka beberapa yang paling ketara:

• anda boleh mempunyai kawalan yang lebih baik ke atas penampilan elemen. Menggunakan kelas utiliti, kita boleh mengubah dan menyempurnakan penampilan elemen dengan lebih mudah.
• Mudah untuk mengurus dan mengekalkan dalam projek besar, kerana anda hanya perlu mengekalkan fail HTML, bukan pangkalan kod CSS yang besar.
• Lebih mudah untuk membina reka bentuk laman web yang unik dan tersuai tanpa melawan gaya yang tidak diingini.
• Ia sangat disesuaikan dan berskala, yang memberikan kami fleksibiliti tanpa had.
• Ia mengamalkan pendekatan pertama mudah alih dan menjadikannya mudah untuk melaksanakan corak reka bentuk yang responsif.
• Anda boleh mengekstrak corak yang biasa dan berulang -ulang ke dalam komponen yang boleh diguna semula -dalam kebanyakan kes, tidak perlu menulis garis CSS tersuai.
• Ia mempunyai kelas yang ditakrifkan sendiri. Kita boleh bayangkan penampilan elemen gaya dengan hanya membaca nama kelas.

Akhirnya, sebagai pencipta Tailwind berkata:

Kali pertama saya melihatnya, hampir mustahil untuk berfikir ia adalah idea yang baik - anda perlu mencubanya.

Jadi, mari cuba!

pemula tailwind

Untuk menunjukkan penyesuaian tailwind, kita perlu memasangnya melalui npm:

<code class="language-bash">npm install tailwindcss</code>

Langkah seterusnya adalah untuk membuat fail styles.css, yang kami gunakan @tailwind arahan untuk memasukkan gaya bingkai:

<code class="language-css">@tailwind base;

@tailwind components;

@tailwind utilities;</code>

Selepas

, kami menjalankan perintah npx tailwind init, yang akan membuat fail tailwind.config.js yang minimum di mana kami akan meletakkan pilihan tersuai semasa pembangunan. Fail yang dihasilkan mengandungi kandungan berikut:

<code class="language-javascript">module.exports = {
  theme: {},
  variants: {},
  plugins: [],
}</code>

Langkah seterusnya adalah membina gaya supaya mereka dapat digunakan:

<code class="language-bash">npx tailwind build styles.css -o output.css</code>

Akhirnya, kami menghubungkan fail output.css yang dihasilkan dan fon hebat ke HTML kami:

<code class="language-html"><link rel="stylesheet" type="text/css" href="output.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"></code>

Sekarang, kami sudah bersedia untuk membuat.

(Langkah-langkah terperinci untuk membina template laman web satu halaman ditinggalkan di sini, kerana panjangnya terlalu panjang, tetapi gambar dan coretan kod utama dikekalkan)

Ringkasan

Seperti yang anda lihat, Tailwind menyediakan proses mudah tanpa mengehadkan pilihan atau fleksibiliti. Kaedah keutamaan praktikal yang disediakan oleh Tailwind telah berjaya digunakan untuk syarikat -syarikat besar seperti GitHub, Heroku, Kickstarter, Twitch, Segmen, dll.

secara peribadi, selepas berjam -jam "berjuang" dan "berjuang" dengan gaya kerangka seperti bootstrap, yayasan, UI semantik, UIKit, dan Bulma, menggunakan utiliti tailwind terasa seperti berada di langit tanpa awan terbang secara bebas di tengah -tengah .

(bahagian Soalan Lazim ditinggalkan di sini kerana terlalu lama, tetapi gambaran keseluruhan soalan dan jawapan utama dikekalkan) dan keserasian rangka kerja lain, reka bentuk responsif, kebolehgunaan projek berskala besar, penyesuaian tema, sokongan preprocessor, pengoptimuman persekitaran pengeluaran, reka bentuk e-mel, dan sumber pembelajaran.

output yang disemak semula ini mengekalkan kedudukan dan format imej asal sementara dengan ketara memanfaatkan teks untuk mencapai artikel yang berputar. juga diringkaskan.

Atas ialah kandungan terperinci Cara membina laman web yang unik dan indah dengan css tailwind. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!