Cara saya menyediakan projek Mentor Frontend saya dengan Tailwind CSS

Perubahan terbaharu dalam beban kerja saya di tempat kerja telah menghalang saya daripada menikmati menjadi pembangun seperti biasa - iaitu, tiada ciri bahagian hadapan untuk dibina. Untuk mengimbanginya, saya memulakan semula pembangunan projek pada platform mentor bahagian hadapan, yang menyediakan mockup UI yang cantik yang boleh diubah oleh pembangun menjadi projek sebenar. Saya mula menggunakan platform itu kira-kira setahun yang lalu dan telah kagum bukan sahaja dengan kualiti projek, tetapi juga dengan tumpuannya pada pembinaan komuniti, dengan tumpuan khusus untuk mendidik pembangun tentang amalan terbaik kebolehaksesan. Ini adalah sumber hebat yang saya sangat mengesyorkan kepada mana-mana pembangun yang ingin mengasah kemahiran bahagian hadapan mereka pada projek dunia sebenar - tahap kesukaran yang berbeza-beza, bermula dengan projek yang sangat mudah yang hanya memerlukan HTML dan CSS, jadi setiap Terdapat projek untuk setiap tahap kemahiran!

Salah satu perkara hebat tentang platform ini ialah ia hanya menyediakan reka bentuk dan beberapa kod permulaan asas, jadi anda bebas memilih mana-mana gabungan teknologi yang anda suka untuk menyelesaikan projek anda. Secara peribadi, saya cuba mengurangkan penggunaan rangka kerja ¹ dan menumpukan pada menulis HTML semantik dan menambahkan beberapa JS tulen untuk interaktiviti, jadi itulah sebahagian besar daripada penyelesaian masa depan saya.

Walau bagaimanapun, saya masih sangat menyukai Tailwind sebagai penyelesaian penggayaan projek sampingan saya. Saya telah menggunakannya secara profesional selama kira-kira tiga tahun sekarang, dan saya mendapati bahawa ia mencapai keseimbangan yang baik antara kelas utiliti lalai yang berguna dan pengalaman pembangunan yang menyenangkan apabila melanjutkan fungsi asasnya (kami akan perincikan perkara ini di bawah). Saya tidak mencadangkan bahawa pemula harus mula membina dengan Tailwind dengan segera - pastikan anda mempelajari CSS terlebih dahulu! Walau bagaimanapun, sebagai seseorang yang tahu banyak tentang cara CSS berfungsi, Tailwind ialah alat produktiviti untuk saya kerana saya memahami perkara yang dilakukan oleh kelas utilitinya di bawah hud.

Jadi selepas saya menyelesaikan beberapa cabaran dengan mentor bahagian hadapan, saya terpaksa menambahkan Tailwind pada kod permulaan projek yang disediakan beberapa kali. Saya fikir ia mungkin berguna untuk pembangun lain yang baru menggunakan platform tetapi ingin menggunakan Tailwind dalam projek mereka, untuk mendokumenkan aliran kerja saya untuk memasang dan mengkonfigurasi Tailwind dalam projek permulaan biasa. Seperti banyak perkara dalam pengurusan pergantungan, mungkin terdapat sejuta cara berbeza untuk melakukannya. Ini hanyalah kaedah pilihan saya, jadi keputusan sebenar anda mungkin berbeza-beza.

Pasang Tailwind

Pemasangan pakej

Pertama, anda perlu menavigasi ke direktori akar kod permulaan yang anda muat turun dari Front End Tutor dan jalankan arahan berikut untuk memasang Tailwind dan kebergantungannya:

pasang npm -D tailwindcss postcss autoprefixer

Beberapa nota tentang kebergantungan:

• Tailwind CSS menggunakan PostCSS untuk mengendalikan CSS anda. PostCSS ialah alat yang menggunakan pemalam JavaScript untuk menukar CSS, dan Tailwind CSS sendiri ialah pemalam PostCSS ².
• Autoprefixer ialah pemalam PostCSS yang menambahkan awalan vendor pada peraturan CSS anda menggunakan nilai daripada Can I Use. Ia memastikan bahawa CSS anda berfungsi merentas pelayar yang berbeza.

Secara teknikalnya ini tidak diperlukan untuk memasang Tailwind dalam projek anda, tetapi saya biasanya mendapati ia berjalan lebih lancar apabila menggunakannya.

Memulakan TailwindCSS

Seterusnya, kami akan menjana fail tailwind.config.js dan postcss.config.js menggunakan arahan berikut:

npx tailwindcss init -p

Konfigurasikan laluan sumber

Seterusnya, navigasi ke tailwind.config.js dan tambahkan index.html pada tatasusunan kandungan - ini akan memastikan gaya yang tidak perlu dikosongkan. Anda boleh membaca lebih lanjut tentang cara ini sebenarnya berfungsi dalam dokumentasi Konfigurasi Kandungan Tailwind.

Sila ambil perhatian bahawa jika anda membuat berbilang fail HTML untuk projek anda yang akan digayakan menggunakan kelas utiliti Tailwind, anda juga mesti menambah laluannya ke tatasusunan ini.

<code>module.exports = {
  content: ["index.html"],
  theme: {},
  plugins: [],
};</code>

Sertakan Tailwind dalam CSS anda

Buat fail CSS dalam akar projek anda (saya biasanya menamakannya styles.css) dan tambah kandungan berikut padanya:

<code>@tailwind base;
@tailwind components;
@tailwind utilities;</code>

Tambah dan jalankan skrip binaan

Dalam fail package.json anda, tambahkan skrip untuk membina CSS anda. Ini akan mencipta fail output.css yang mengandungi gaya terbina. Bendera --watch membolehkan kami menonton perubahan CSS dalam masa nyata, bermakna kami tidak perlu memulakan semula skrip setiap kali kami mengemas kini gaya.

Perhatikan bahawa anda boleh menamakan arahan ini apa sahaja yang anda suka - Saya hanya mengikuti konvensyen di sini.

<code>"scripts": {
  "build:css": "tailwindcss build styles.css -o output.css --watch"
}</code>

Kini anda boleh menyusun CSS anda dengan menjalankan skrip berikut:

npm run build:css

Pautan lembaran gaya

Akhir sekali, anda perlu memasukkan teg pautan dalam kepala fail index.html anda (dan mana-mana fail HTML lain yang anda mahu gaya digunakan):

<code><link href="output.css" rel="stylesheet"></link></code>

Anda kini sepatutnya dapat menguji sama ada Tailwind berfungsi dalam fail ini. Saya biasanya menambah sesuatu seperti >

Pasang fon projek

Apabila anda memuat turun kod permulaan untuk projek anda daripada Front End Mentor, ia mengandungi fail fon untuk fon dalam reka bentuk yang akan anda bina. Ini biasanya termasuk gabungan fail fon berubah dan fail fon statik. Untuk tujuan kami, kami akan menggunakan fail yang disediakan dalam ./assets/fonts/static.

Saya mengesyorkan anda melihat fail ini serta fail style-guide.md yang disediakan dalam direktori akar projek untuk melihat fon yang digunakan dan berat fon yang diperlukan.

Tambahkan @peraturan muka fon

Setelah itu ditentukan, anda perlu mencipta satu lagi fail CSS baharu dalam akar projek (saya biasanya menamakannya fonts.css) dan kemudian menentukan peraturan @font-face untuk setiap fail fon yang disediakan dalam kod permulaan:

<code>@font-face {
  font-family: "Inter";
  font-weight: 400;
  src: url("assets/fonts/static/Inter-Regular.ttf") format("ttf");
}

@font-face {
  font-family: "Inter";
  font-weight: 600;
  src: url("assets/fonts/static/Inter-SemiBold.ttf") format("ttf");
}

@font-face {
  font-family: "Inter";
  font-weight: 700;
  src: url("assets/fonts/static/Inter-Bold.ttf") format("ttf");
}</code>

Contoh di atas adalah daripada penyelesaian saya kepada cabaran profil pautan sosial, yang menggunakan tiga pemberat berbeza fon Inter.

Selepas menentukan muka fon, anda perlu memautkan helaian gaya dalam dokumen HTML sama seperti menggunakan output.css sebelum ini:

<code>module.exports = {
  content: ["index.html"],
  theme: {},
  plugins: [],
};</code>

Konfigurasi Tailwind Lanjutan

Kini kami perlu melanjutkan tema dalam tailwind.config.js untuk menambah beberapa kelas utiliti untuk menggunakan fon projek kami jika diperlukan:

<code>@tailwind base;
@tailwind components;
@tailwind utilities;</code>

Sila ambil perhatian bahawa jika projek anda mempunyai berbilang fon tersuai, anda boleh menentukan sebarang bilangan sifat dalam objek fonFamily. Anda boleh menamakan sifat ini apa sahaja yang anda suka, tetapi saya biasanya hanya menukar nama fon kepada tanda sempang agar selaras dengan cara kebanyakan utiliti Tailwind ditulis di luar kotak, seperti komik-sans.

Kini anda sepatutnya boleh menambah kelas antara fon pada HTML anda dan melihat fon baharu anda digunakan pada penanda anda! Anda juga boleh menggunakan pemberat fon berbeza yang kami tetapkan, seperti fon-semibold untuk menggunakan fon pada berat 600.

<code>"scripts": {
  "build:css": "tailwindcss build styles.css -o output.css --watch"
}</code>

Atas ialah kandungan terperinci Cara saya menyediakan projek Mentor Frontend saya dengan Tailwind CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!