Posting ini menunjukkan prosedur untuk mengonfigurasi jalur template di Tailwind CSS.
Bagaimana Cara Mengonfigurasi Jalur Template di Tailwind CSS?
“ penarik angin.config.js ” file konfigurasi digunakan untuk mengonfigurasi jalur Template tempat pengguna ingin menyematkan Tailwind CSS. Itu tidak ada secara default namun dapat dibuat dalam proyek menggunakan manajer paket 'npm'.
Bagian ini melakukan beberapa langkah penting untuk mengonfigurasi jalur template di file “tailwind.config.js”.
Catatan : Untuk mengimplementasikan “Tailwind CSS”, pasang “ Node.js ” aplikasi di sistem Anda melalui tautan yang disediakan “ https://nodejs.org/en ” untuk menjalankan perintah.
Langkah 1: Instal 'TailwindCSS'
Pertama, buat proyek baru bernama 'Project1' dan buka di editor kode. Sekarang, buka terminal baru dan instal 'Tailwind CSS' dengan bantuan perintah berikut:
npm install -D tailwindcss
Pada perintah di atas, “ npm ” adalah manajer paket node yang menginstal “TailwindCSS”, sebagai berikut:
Di sini hasilnya menunjukkan bahwa 'Tailwind CSS' dan paketnya berhasil diunduh.
Langkah 2: Buat File Konfigurasi Tailwind
Selanjutnya, buat file konfigurasi Tailwind CSS “ penarik angin.config.js ” untuk memperluas fungsinya seperti menentukan jalur template HTML, kelas yang ditentukan pengguna, dan banyak lainnya menggunakan perintah ini:
Output menunjukkan bahwa file konfigurasi yang ditentukan telah dibuat. Sekarang, lihat ' penarik angin.config.js ”berkas:
Langkah 3: Tambahkan Arahan Tailwind ke File CSS Utama
Sekarang, untuk menambahkan fungsionalitas khusus ke proyek Tailwind yang dibuat, tambahkan tiga arahan tailwind yang sudah ada sebelumnya di bagian utama “ style.css ”berkas:
komponen @tailwind;
utilitas @tailwind;
Di blok kode di atas:
- basis : Ini adalah lapisan pertama 'Tailwind CSS' yang mengubah gaya halaman web secara default seperti warna latar belakang, warna teks, atau jenis font.
- komponen : Layer kedua ini tersedia di dalam class “container” yang menambahkan lebar sesuai dengan ukuran browser. Di bagiannya, pengguna dapat menambahkan komponen eksternal yang mereka buat sendiri.
- keperluan : Ini adalah lapisan ketiga yang menjumlahkan hampir semua kelas gaya seperti bayangan, warna, penambahan, kelenturan, dan banyak kelas lainnya.
Arahan ini dapat dilihat pada jendela berikut:
Langkah 4: Bangun CSS
Sekarang, buat CSS menggunakan alat Tailwind CLI dengan menjalankan perintah berikut. Itu akan memindai semua file template dan membangun CSS di ' dist/output.css ”berkas:
Dapat diamati bahwa perintah di atas berhasil dijalankan. Sekarang, struktur file dari 'project1' terlihat seperti ini:
Langkah 5: Buat Template HTML dan Konfigurasi Path-nya
Buat template HTML tempat pengguna ingin menyematkan 'Tailwind CSS', lalu konfigurasikan jalurnya di ' penarik angin.config.js ”. Mari kita lihat dulu template HTML berikut “ index.html ”:
< tautan href = '/dist/keluaran.css' rel = 'lembar gaya' >
< / kepala >
< tubuh >
< h2 kelas = 'text-center font-tebal teks-putih bg-oranye-500' >Selamat datang di Linuxhint!< / h2 >< br >
< h3 kelas = 'text-center font-bold text-blue-600 bg-pink-400' >Tutorial Pertama: Tailwind CSS Framework.< / h3 >< br >
< P kelas = 'pusat teks teks-hijau-500' >Tailwind CSS adalah kerangka kerja CSS terkenal yang membantu mengatur kelas CSS yang telah ditentukan sebelumnya gaya elemen HTML Anda.< / P >
< / tubuh >
Pada baris kode di atas:
- Bagian 'kepala' menggunakan '
” untuk menautkan file CSS yang dibuat/dikompilasi “ /dist/output.css ” dengan file HTML yang ada “ index.html ”. - Bagian 'tubuh' pertama-tama menentukan ' ” yang menentukan subjudul pertama menggunakan kelas Tailwind “ Perataan Teks ” untuk menyesuaikan perataannya di “tengah”, “ Berat Font ” untuk “menebalkan” teks, “ Warna teks ” untuk menambahkan warna yang ditentukan, dan tombol “ Warna latar belakang ” untuk menerapkan masing-masing warna latar belakang yang diberikan.
- Selanjutnya, “ ” dan “ ” tag juga menggunakan kelas Tailwind yang dibahas di atas untuk mengatur gaya kontennya.
Konfigurasi Jalur Templat HTML
Selanjutnya, buka “ penarik angin.config.js ” dan tambahkan tautan atau jalur di bagian “konten” dari file template HTML yaitu, “index.html”:
Tekan ' Ctrl+S ” untuk menyimpan perubahan baru.
Langkah 6: Jalankan Kode HTML
Terakhir, jalankan kode HTML “index.html” di server langsung dan lihat hasilnya:
Keluaran
Seperti yang terlihat, output menampilkan konten HTML yang diberi gaya dengan bantuan Tailwind CSS.
Kesimpulan
Tailwind CSS menggunakan “ penarik angin.config.js ” file konfigurasi untuk mengonfigurasi jalur template HTML yang dibuat. Ini menentukan ' isi ” yang menyertakan jalur persis semua template HTML, file sumber yang berisi nama kelas Tailwind, dan komponen JavaScript. Itu memindai file HTML yang ditentukan dan kemudian mengimplementasikan Tailwind CSS dalam kontennya. Posting ini mengilustrasikan prosedur lengkap untuk mengonfigurasi jalur template di Tailwind CSS.