Siaran ini menunjukkan prosedur untuk mengkonfigurasi laluan templat dalam CSS Tailwind.
Bagaimana untuk Mengkonfigurasi Laluan Templat dalam CSS Tailwind?
' tailwind.config.js ” fail konfigurasi digunakan untuk mengkonfigurasi laluan Templat di mana pengguna ingin membenamkan CSS Tailwind. Ia tidak hadir secara lalai namun ia boleh dibuat dalam projek menggunakan pengurus pakej 'npm'.
Bahagian ini menjalankan beberapa langkah penting untuk mengkonfigurasi laluan templat dalam fail 'tailwind.config.js'.
Catatan : Untuk melaksanakan 'Tailwind CSS', mula-mula pasang ' Node.js ' aplikasi dalam sistem anda melalui pautan yang disediakan ' https://nodejs.org/en ” untuk melaksanakan arahan.
Langkah 1: Pasang 'TailwindCSS'
Mula-mula, buat projek baharu bernama 'Projek1' dan bukanya dalam editor kod. Sekarang, buka terminal baharu dan pasang 'Tailwind CSS' dengan bantuan arahan berikut:
npm install -D tailwindcss
Dalam perintah di atas, ' npm ” ialah pengurus pakej nod yang memasang “TailwindCSS”, seperti berikut:
Di sini output menunjukkan bahawa 'Tailwind CSS' dan pakejnya berjaya dimuat turun.
Langkah 2: Cipta Fail Konfigurasi Tailwind
Seterusnya, buat fail konfigurasi Tailwind CSS “ tailwind.config.js ” untuk melanjutkan fungsinya seperti menentukan laluan templat HTML, kelas yang ditentukan pengguna dan banyak lagi menggunakan arahan ini:
Output menunjukkan bahawa fail konfigurasi yang ditentukan telah dibuat. Sekarang, lihat pada ' tailwind.config.js ” fail:
Langkah 3: Tambahkan Arahan Tailwind pada Fail CSS Utama
Sekarang, untuk menambahkan fungsi khas pada projek Tailwind yang dibuat, tambahkan tiga arahan tailwind yang sedia ada berikut dalam ' utama ' style.css ” fail:
komponen @tailwind;
utiliti @tailwind;
Dalam blok kod di atas:
- asas : Ia ialah lapisan pertama 'Tailwind CSS' yang mengubah suai penggayaan halaman web secara lalai seperti warna latar belakang, warna teks atau keluarga fon.
- komponen : Lapisan kedua ini tersedia di dalam kelas 'bekas' yang menambah lebar mengikut saiz penyemak imbas. Dalam bahagiannya, pengguna boleh menambah komponen luaran mereka sendiri yang dibuat.
- utiliti : Ia adalah lapisan ketiga yang menambah hampir semua kelas penggayaan seperti bayang-bayang, warna, penambahan, lentur dan banyak lagi kelas lain.
Arahan ini boleh dilihat dalam tetingkap berikut:
Langkah 4: Bina CSS
Sekarang, bina CSS menggunakan alat Tailwind CLI dengan melaksanakan arahan berikut. Ia akan mengimbas semua fail templat dan membina CSS dalam “ dist/output.css ” fail:
Ia boleh diperhatikan bahawa arahan di atas dilaksanakan dengan jayanya. Sekarang, struktur fail 'projek1' kelihatan seperti ini:
Langkah 5: Cipta Templat HTML dan Konfigurasikan Laluannya
Cipta templat HTML di mana pengguna ingin membenamkan 'Tailwind CSS' dan kemudian konfigurasikan laluannya dalam ' tailwind.config.js ”. Mari kita lihat dahulu templat HTML berikut ' index.html ”:
< pautan href = '/dist/output.css' rel = 'lembaran gaya' >
< / kepala >
< badan >
< h2 kelas = 'font pusat teks-teks tebal-putih bg-oren-500' >Selamat datang ke Linuxhint!< / h2 >< br >
< h3 kelas = 'font pusat teks-teks tebal-biru-600 bg-merah jambu-400' >Tutorial Pertama: Rangka Kerja CSS Tailwind.< / h3 >< br >
< hlm kelas = 'teks-pusat teks-hijau-500' >Tailwind CSS ialah rangka kerja CSS yang terkenal yang membantu dalam menetapkan kelas CSS yang telah ditetapkan kepada gaya elemen HTML anda.< / hlm >
< / badan >
Dalam baris kod di atas:
- Bahagian 'kepala' menggunakan '
teg ” untuk memautkan fail CSS yang dibuat/disusun “ /dist/output.css ” dengan fail HTML sedia ada “ index.html ”. - Bahagian 'badan' mula-mula menentukan ' teg ' yang mentakrifkan subtajuk pertama menggunakan kelas Tailwind ' Jajarkan Teks ” untuk melaraskan penjajarannya di “tengah”, “ Berat Font ” untuk “menebalkan” teks, “ Warna Teks ' untuk menambah warna yang ditentukan, dan ' Warna latar belakang ” untuk menggunakan warna latar belakang yang diberikan, masing-masing.
- Seterusnya, ' ' dan juga ' tag ” juga menggunakan kelas Tailwind yang dibincangkan di atas untuk menggayakan kandungannya.
Konfigurasikan Laluan Templat HTML
Seterusnya, buka ' tailwind.config.js ” dan tambahkan pautan atau laluan dalam bahagian “kandungan” fail templat HTML iaitu, “index.html”:
Tekan “ Ctrl+S ” untuk menyimpan perubahan baharu.
Langkah 6: Laksanakan Kod HTML
Akhir sekali, laksanakan kod HTML 'index.html' dalam pelayan langsung dan lihat outputnya:
Pengeluaran
Seperti yang dilihat, output menunjukkan kandungan HTML yang digayakan dengan bantuan CSS Tailwind.
Kesimpulan
Tailwind CSS menggunakan “ tailwind.config.js ” fail konfigurasi untuk mengkonfigurasi laluan templat HTML yang dibuat. Ia menyatakan ' kandungan ” bahagian yang merangkumi laluan tepat semua templat HTML, fail sumber yang mengandungi nama kelas Tailwind dan komponen JavaScript. Ia mengimbas fail HTML yang ditentukan dan kemudian melaksanakan CSS Tailwind dalam kandungannya. Siaran ini menggambarkan prosedur lengkap untuk mengkonfigurasi laluan templat dalam Tailwind CSS.