Bina laman web dengan CSS React dan Tailwind

Tutorial ini menunjukkan cara membuat laman web produk menggunakan CSS React dan Tailwind. Kami akan meliputi cara menubuhkan React dengan CSS Tailwind menggunakan Create React App Configuration Override (Craco); Kelas dan varian utiliti CSS Tailwind dan cara menggunakannya; bagaimana dengan mudah menjadikan mod laman web gelap serasi; Kumpulan apa; dan bagaimana untuk membolehkan varian.

Anda boleh melihat demo laman web yang kami buat di sini, dan anda boleh mencari kod untuk repositori ini di repositori GitHub ini.

Takeaways Key

Gunakan Create React App dan Craco untuk menubuhkan React dengan Tailwind CSS dengan cekap, mengelakkan kerumitan konfigurasi manual.
Leverage Tailwind CSS Utiliti Kelas dan Varian ke Komponen Gaya Mudah Tanpa Menulis CSS Custom yang luas.
Melaksanakan mod gelap dengan perubahan konfigurasi mudah dalam CSS tailwind untuk menyesuaikan diri dengan keutamaan OS pengguna.
meneroka kuasa kelas utiliti untuk reka bentuk responsif dan kelas pseudo, menjadikan gaya lebih dinamik dan fleksibel.
Sesuaikan tema TailWind untuk memenuhi keperluan penjenamaan dengan mengubah warna, fon, dan elemen lain secara langsung dalam fail konfigurasi.
Gunakan plugin CSS Tailwind dan lanjutkan fungsi untuk memasukkan gaya tambahan, utiliti, dan komponen tersuai.
Dayakan varian CSS Tailwind khusus untuk keadaan hover dan pelarasan responsif, meningkatkan aspek interaktif dan responsif dari laman web.

Prasyarat

Sebelum kita mula, anda perlu mempunyai Node.js dan NPM dipasang. Jika anda mempunyai Node.js dipasang, maka anda akan memasang NPM.

Untuk memeriksa sama ada nod dipasang, jalankan yang berikut dalam baris arahan:

<span>node -v
</span>

anda sepatutnya dapat melihat versi. Lakukan perkara yang sama untuk npm:

<span>npm -v
</span>

Harus diingat bahawa CSS Tailwind memerlukan versi Node.js 12.13.0 atau lebih tinggi.

Jika anda mendapat ralat sama ada, maka anda perlu memasang nod. Anda boleh mengikuti arahan pemasangan di laman web Node, atau anda boleh mengikuti bersama dengan artikel kami "Memasang pelbagai versi Node.js menggunakan NVM".

Menyediakan React dan Tailwind CSS

NOTA: Jika anda tidak biasa dengan Create React App, lihat "Buat App React: Dapatkan Projek React Ready Fast" terlebih dahulu.

Pertama, buat projek React dengan create-react-app:

npx create-react-app react-shop

Kemudian, tukar direktori ke projek yang dibuat:

<span>cd react-shop
</span>

Seterusnya, kami akan memasang kebergantungan yang diperlukan untuk CSS Tailwind:

<span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

Kami memasang CSS Tailwind dengan membina keserasian PostCSS 7, seperti Create React App (atau CRA) tidak menyokong PostCSS 8 pada masa menulis artikel ini. Kami juga memasang AutoPrefixer, kerana ia diperlukan untuk CSS Tailwind selepas versi 2.0.

Menyediakan Craco

Biasanya, untuk mengkonfigurasi CRA, anda perlu menjalankan reaksi-skrip Eject atau NPM Run Eject dengan skrip lalai CRA. Walau bagaimanapun, ini sangat menyusahkan, kerana ia akan mengeluarkan semua konfigurasi yang tersembunyi di CRA (seperti konfigurasi webpack, konfigurasi babel, konfigurasi postcss, dan banyak lagi) ke dalam projek anda, dan mengeditnya boleh menjadi masalah atau menghasilkan masalah yang CRA tidak lagi dapat menyokong.

Ini adalah di mana membuat konfigurasi aplikasi React Override (atau Craco) masuk. Craco adalah perpustakaan yang menambah lapisan konfigurasi mudah ke CRA. Daripada mengeluarkan semua konfigurasi di dalam CRA ke dalam projek anda - contohnya, hanya untuk menambah beberapa konfigurasi ke Webpack - semua konfigurasi baru atau perubahan pada konfigurasi asal akan dimasukkan ke dalam fail baru craco.config.js. Craco membolehkan anda mengkonfigurasi CRA untuk mendapatkan yang terbaik daripada itu tanpa kerumitan.

Kami memerlukan Craco di sini untuk mengatasi konfigurasi PostCSS dan tambah plugin TailWindCSS. Jadi, mari kita pasang terlebih dahulu:

<span>node -v
</span>

Apabila menggunakan CRA, skrip dalam pakej.json kelihatan seperti ini:

<span>npm -v
</span>

Seperti yang kita gunakan Craco untuk melakukan apa yang tidak boleh kita lakukan dengan CRA secara lalai, kita perlu menukar skrip untuk menggunakan Craco untuk membina projek atau menjalankannya dalam pembangunan:

npx create-react-app react-shop

Kami telah menggantikan skrip reaksi dengan Craco pada permulaan, membina dan menguji skrip. Kami tidak membuat apa -apa perubahan pada skrip eject.

Seterusnya, buat fail konfigurasi Craco craco.config.js dalam akar projek:

<span>cd react-shop
</span>

Fail konfigurasi ini menambah plugin tailwindcss dan autoprefixer ke postcss.

Sekarang kami akan menghasilkan fail konfigurasi untuk CSS Tailwind:

<span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

Nota: Jika anda menggunakan Node.js v14, terdapat isu yang dilaporkan mengenai ralat yang dilemparkan semasa menjalankan arahan ini yang mengatakan "tidak dapat mencari modul 'AutoPrefixer'". Mengemas kini ke Node.js v15 harus berfungsi, tetapi jika anda tidak dapat berbuat demikian, sila ikuti salah satu penyelesaian di sini.

Ini akan membuat fail tailwind.config.js dalam akar projek. Ia akan mempunyai kandungan berikut:

<span>npm install @craco/craco
</span>

inilah yang setiap kunci konfigurasi bermaksud:

1. Purge: Ini digunakan untuk menentukan fail CSS tailwind harus mengimbas dan melihat kelas CSS yang digunakan, supaya ia dapat menghapuskan semua gaya dan kelas yang tidak digunakan dalam pengeluaran.
2. DarkMode: Ini menentukan tingkah laku mod gelap dalam projek anda. Nilai boleh menjadi media - yang bermaksud bahawa gaya mod gelap akan digunakan berdasarkan pertanyaan media mod gelap, yang bergantung pada mod lalai untuk OS pengguna. Ia juga boleh menjadi kelas, yang bermaksud bahawa gaya mod gelap akan digunakan apabila elemen induk dalam dokumen HTML mempunyai kelas gelap.
3. Tema: Ini boleh digunakan untuk mengubah suai palet warna tema, fon, titik putus, dan banyak lagi. Kami akan melihat bagaimana untuk membuat perubahan pada tema kemudian dalam tutorial.
4. Variasi: Ini membolehkan anda memohon varian tambahan kepada plugin teras CSS Tailwind. Kami akan melihat bagaimana ia berfungsi kemudian dalam tutorial.
5. Plugin: Satu bahagian untuk menambah plugin yang boleh menambah kelas utiliti tambahan, varian tersuai, gaya asas atau lebih.

Buat masa ini, kami hanya akan membuat dua perubahan. Pertama, kita akan menukar kekunci pembersihan:

<span>node -v
</span>

Ini memberitahu CSS Tailwind untuk melihat melalui semua fail JS, JSX, TS dan TSX dalam direktori SRC, dan fail awam/indeks.html untuk mengetahui kelas mana yang akan digunakan dari CSS Tailwind dan mengeluarkan kelas yang tidak digunakan.

Perubahan kedua adalah untuk mod gelap:

<span>npm -v
</span>

Demi kesederhanaan dalam tutorial ini, kami akan menyimpan mod gelap hanya berdasarkan keutamaan OS pengguna.

Langkah terakhir dalam menubuhkan projek React kami dengan CSS Tailwind adalah untuk memasukkan beberapa gaya CSS Tailwind dalam src/index.css. Gantikan kandungan fail ini dengan yang berikut:

npx create-react-app react-shop

Arahan @TailWind pada dasarnya mengimport gaya ke dalam index.css. Dan secara lalai, CRA mengimport src/index.css dalam src/index.js:

<span>cd react-shop
</span>

Ini bermakna gaya CSS tailwind akan digunakan dalam projek React kami, dan kami bersedia untuk mula membina laman web yang indah!

Memahami Utiliti dan Varian CSS Tailwind

Sebelum masuk ke dalam pengekodan, mari kita faham apa kelas dan variasi utiliti CSS Tailwind. CSS Tailwind direka untuk menjadikan komponen gaya lebih mudah dan membantu anda memberi tumpuan kepada membuat komponen yang boleh diguna semula. Kelas Utiliti adalah pelbagai kelas yang membolehkan anda gaya komponen anda dengan cara yang anda boleh fikirkan tanpa menulis mana -mana CSS.

Sebagai contoh, untuk gaya elemen

dengan sempadan, menukar saiz fon, menukar latar belakang dan warna teks, anda perlu menulis sesuatu seperti ini dengan CSS:

<span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

Menggunakan CSS Tailwind, anda boleh melakukannya hanya menggunakan kelas utiliti:

<span>npm install @craco/craco
</span>

inilah yang dimaksudkan setiap kelas dalam contoh ini:

1. sempadan: menetapkan lebar sempadan hingga 1px
2. sempadan-merah-100: menetapkan warna sempadan ke bawah naungan merah (berdasarkan tema)
3. teks-lg: memberikan saiz fon 1.125rem dan ketinggian garis 1.75rem
4. bg-red-400: menetapkan warna latar belakang ke bawah naungan merah (berdasarkan tema)
5. teks-putih: menetapkan warna teks menjadi putih

Terdapat banyak kelas lain yang boleh anda gunakan, dengan pelbagai warna warna yang berbeza, yang menjadikannya lebih mudah. Menggunakan kelas utiliti, anda jarang perlu menulis apa -apa CSS sama sekali.

Baiklah, tapi bagaimana dengan pertanyaan media? Bagaimana dengan kelas psuedo? Bagaimana dengan mod gelap? Bolehkah ini dilakukan tanpa perlu menulis CSS sendiri?

Itulah ketika varian masuk. Varian membolehkan anda menambah gaya kepada elemen berdasarkan titik putus peranti, keadaan elemen, atau sama ada mod gelap diaktifkan atau tidak.

Jadi, sebelum ini anda mungkin telah melakukan ini untuk menukar lebar elemen berdasarkan saiz peranti:

<span>node -v
</span>

dengan css tailwind, ia hanya boleh dilakukan seperti ini:

<span>npm -v
</span>

Ini menggunakan kelas W-1/2 (yang bermaksud lebar: 50%) Apabila min-lebar: 1025px terpakai pada lebar skrin semasa, digunakan kelas W-3/4 (yang bermaksud lebar: 80%) -Width: 768px terpakai pada lebar skrin semasa, dan menggunakan kelas W-Full (yang bermaksud lebar: 100%;) Apabila varian lain tidak digunakan lagi.

Ini pasti menjadikan kerja yang membosankan yang perlu anda lakukan dalam setiap projek lebih mudah dan lebih cepat. Pada mulanya, ia mungkin kelihatan mengelirukan, tetapi apabila anda mula berkecimpung di dalamnya, anda akan menyedari bagaimana ia menjadi sifat kedua untuk menggunakan kelas dan varian utiliti.

anda boleh membaca lebih lanjut mengenai mengkonfigurasi tailwind dalam dokumentasi rasmi projek.

Melaksanakan komponen kami

Kembali ke laman web kami. Kami membuat laman web mudah yang akan memaparkan produk dalam reka bentuk yang kemas. Untuk kesederhanaan, kami akan menggunakan data palsu dari API kedai palsu. Daripada sebenarnya melakukan permintaan ke API, kami akan mengambil respons JSON sampel dan meletakkannya dalam fail JSON dalam projek kami. Sekali lagi, ini hanya untuk kesederhanaan tutorial.

pergi ke titik akhir produk dan salin respons. Kemudian, buat fail src/data/products.json dan tampal respons di dalamnya. Ia harus menjadi pelbagai objek yang serupa dengan ini:

npx create-react-app react-shop

mari kita mulakan dengan melaksanakan komponen produk. Komponen ini akan menjadi komponen kad yang menunjukkan maklumat mengenai produk. Buat src/komponen/produk.js dengan kandungan berikut:

<span>cd react-shop
</span>

Seperti yang anda lihat, komponen produk hanya menunjukkan butiran produk. Kami belum menambah kelas untuk gaya pada masa ini.

Seterusnya, pergi ke src/app.js dan tukar kandungan kepada yang berikut:

<span>node -v
</span>

di sini, kami mengimport fail Products.json sebagai produk. Kemudian, kami melingkari produk dan memaparkan setiap produk menggunakan komponen produk yang kami buat sebelum ini. Sekali lagi, perhatikan kami tidak menambah sebarang kelas untuk gaya.

mari kita mulakan pelayan sekarang. Jalankan arahan berikut:

<span>npm -v
</span>

anda akan melihat bahawa hanya ada sekumpulan teks, tetapi tidak ada gaya apa pun.

Menambah beberapa warna latar belakang

mari kita mula menambah beberapa gaya. Pertama, kita akan menukar warna latar belakang halaman. Untuk melakukan itu, kami akan menggunakan kelas warna latar belakang Tailwind. Kelas warna latar belakang berada dalam format bg- {color}-{numericscale}, di mana numericscale adalah pilihan.

Warna -warna secara lalai boleh menjadi putih, hitam, kelabu, merah, biru, hijau, kuning, oren, indigo, ungu dan merah jambu. Skala angka mentakrifkan warna warna, di mana 50 adalah teduh paling ringan dan 900 adalah yang paling gelap. Sebagai contoh, jika anda mahu warna latar belakang menjadi merah ringan, anda boleh menggunakan BG-Red-200.

Di laman web kami, kami akan menetapkan warna latar belakang menjadi kelabu muda, jadi kami akan menambah kelas BG-Grey-200 ke elemen yang paling luar

dalam src/app.js:

Jika anda menyemak laman web sekarang (jika anda tidak mempunyai pelayan yang masih berjalan, pastikan untuk menjalankannya lagi), anda akan melihat bahawa latar belakang telah berubah menjadi naungan cahaya kelabu.

npx create-react-app react-shop

Menukar lebar kandungan

Perkara seterusnya yang akan kita lakukan ialah menukar lebar kandungan kepada 50% daripada lebar sebenar skrin apabila lebar skrin sekurang -kurangnya 768px, tetapi simpan lebar penuh pada peranti kecil. Kami akan menggunakan kelas lebar Tailwind, yang kami pergi sebelum sedikit. Kelas lebar berada dalam format w- {saiz}, di mana saiz boleh menjadi julat dari 0 hingga 96, yang merujuk kepada nilai dalam REM; nisbah seperti 1/2 atau 3/5, atau nisbah lain yang merujuk kepada peratusan; atau kata kunci seperti auto untuk lebar auto atau penuh untuk lebar 100%.

Untuk menentukan lebar berdasarkan saiz skrin, kami menggunakan varian seperti SM, MD, LG, dan lain -lain. Varian ini menentukan saiz skrin minimum yang diperlukan untuk peraturan yang akan digunakan.

Dalam kes kami, kerana kami mahu lebarnya menjadi 50% daripada ibu bapa untuk skrin yang mempunyai lebar sekurang-kurangnya 768px, kami akan menggunakan varian MD dengan W-1/2:

<span>node -v
</span>

Lebar kini akan diubah menjadi separuh lebar skrin. Walau bagaimanapun, ia akan menjadi lebih baik untuk memusatkannya secara mendatar. Untuk melakukan itu, kami akan menggunakan kelas utiliti margin Tailwind. Kelas margin berada dalam format m {side}-{value}, di mana sisi adalah pilihan dan boleh sama ada khusus untuk setiap sisi elemen seperti T untuk atas, b untuk bawah, L untuk kiri dan r untuk kanan, atau spesifik secara mendatar menggunakan y, atau secara menegak menggunakan x. Nilai boleh berada dalam julat dari 0 hingga 96, boleh menjadi PX untuk hanya 1px, atau auto. Bukan itu sahaja, tetapi anda juga boleh menambah margin negatif dengan menambah - pada permulaan kelas. Sebagai contoh, -m -2.

Oleh kerana kami memusatkan elemen secara mendatar, kami akan menggunakan MX-AUTO:

<span>npm -v
</span>

dan anda dapat melihatnya berpusat.

menggayakan komponen produk

Mari kita beralih ke komponen produk. Kami juga akan menambah warna latar belakang untuk kad produk. Kami akan menjadikannya putih jadi kami akan menggunakan BG-White. Kami juga akan menjadikannya lebar penuh supaya kami akan menggunakan W-Full. Untuk memisahkan kad produk dari satu sama lain, kami akan menambah margin bawah ke unsur-unsur menggunakan MB-5:

npx create-react-app react-shop

dan anda dapat melihat perubahan di laman web:

seperti yang anda lihat dalam komponen produk kami, di dalam elemen paling luar kita mempunyai dua elemen, yang mempunyai imej latar belakang produk dan yang lain mempunyai maklumat. Kami mahu memaparkannya di sebelah satu sama lain. Perkara pertama yang perlu kita lakukan ialah menukar paparan yang paling luar

ke flex. Untuk melakukan itu, kami akan menggunakan kelas paparan Tailwind. Tidak seperti kelas terdahulu yang kami sebutkan, kelas paparan tidak mempunyai format. Mereka hanya nama paparan yang kami mahukan. Oleh itu, untuk menukar harta paparan elemen ke Flex, anda hanya menambah kelas Flex:

Seterusnya, kita akan mengubah lebar elemen

menggunakan kelas lebar seperti sebelumnya:

<span>cd react-shop
</span>

Jika anda menyemak laman web sekarang, anda akan melihat bahawa imej dan teks sekarang bersebelahan.

<span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

Menambah beberapa jarak

masih banyak yang perlu diperbaiki. Pertama, mari tambahkan beberapa padding untuk bekas maklumat produk. Untuk melakukan itu, kami akan menggunakan kelas padding Tailwind. Kelas padding sama persis dengan kelas margin yang kami periksa sebelum ini, kecuali kami menggunakan p bukan m.

Jadi, kami akan menambah P-5 ke bekas maklumat produk. Kami juga akan menambah beberapa margin ke bekas penerangan menggunakan MT-4:

Kami juga akan menambah margin atas dan bawah ke seluruh bekas dalam src/app.js supaya produk pertama dan terakhir tidak betul di pinggir halaman dari kedua -dua belah pihak. Untuk melakukan itu, kami akan menambah kelas PY-4:

<span>node -v
</span>

kita akan melihat laman web mula kelihatan lebih baik sekarang.

Meningkatkan tipografi komponen

mari kita bekerja pada tipografi sedikit. Anda dapat melihat bahawa maklumat produk semua kelihatan sama. Kami tidak dapat membezakan tajuk dari kategori dari keterangan dan sebagainya. Pertama, mari kita ubah warna beberapa teks. Untuk melakukan itu, kami akan menggunakan kelas warna teks Tailwind. Format untuk kelas ini sama dengan kelas warna latar belakang, tetapi menggantikan B dengan teks. Sebagai contoh, untuk menjadikan warna teks teks anda menambah teks kelas-hijau-100.

Jadi, mari kita ubah warna teks kategori ke Text-Grey-400 untuk menjadikannya sedikit pudar berbanding dengan teks lain, dan mari kita ubah warna teks harga ke Text-Red-500 untuk membuatnya menonjol. Kami juga akan menambah margin teratas untuk harga untuk memastikan ia paling menonjol:

<span>npm -v
</span>

Jika anda pergi ke laman web sekarang, anda akan melihat teks kelihatan sedikit lebih jelas dari segi membezakan antara bahagian yang berbeza:

Seterusnya, mari kita ubah saiz fon. Untuk melakukan itu, kami akan menggunakan kelas saiz fon Tailwind. Format untuk kelas ini adalah teks- {saiz}, di mana saiznya berkisar dari SM hingga 9xl.

kami akan membuat saiz fon harga yang lebih besar dengan menambahkan teks kelas-4XL untuk skrin yang mempunyai lebar sekurang-kurangnya 768px menggunakan varian MD, dan Text-XL untuk skrin yang lebih kecil, dan kami akan membuat tajuk lebih besar dengan menambahkan teks kelas-2xl untuk skrin yang mempunyai lebar sekurang-kurangnya 768px juga:

teks kelihatan lebih baik sekarang.

npx create-react-app react-shop

meletakkan imej produk

Seterusnya, mari kita selesaikan imej untuk menjadikannya sepenuhnya muncul dan meletakkan imej latar belakang dengan betul.

Pertama, kita akan menukar saiz imej latar belakang. Untuk melakukan itu, kami akan menggunakan kelas saiz latar belakang Tailwind. Format kelas ini adalah Bg- {Size}, di mana saiz boleh menjadi auto, mengandungi atau menutup. Dalam kes kami, ia akan menjadi BG-CONTAIN untuk memastikan keseluruhan imej dilihat.

Kedua, kami akan menukar atribut berulang latar belakang untuk memastikan imej tidak diulangi beberapa kali. Untuk melakukan itu, kami akan menggunakan kelas berulang latar belakang Tailwind. Format untuk kelas ini adalah Bg- {RepeatValue}, di mana REPELVALUE adalah nilai yang akan anda berikan kepada harta latar belakang, atau BG-Repeat-Round untuk nilai bulat dan ruang BG-Repeat untuk nilai ruang. Dalam kes kami, kami akan menggunakan BG-No-Repeat.

Ketiga, kita akan mengubah atribut kedudukan latar belakang supaya imej sentiasa berpusat. Untuk melakukan itu, kami akan menggunakan kelas kedudukan latar belakang Tailwind. Format untuk kelas ini adalah Bg- {Position}, di mana kedudukan adalah nilai yang akan anda berikan kepada harta latar belakang. Kami akan menambah kelas BG-Center:

<span>node -v
</span>

Sekarang, kita dapat melihat imej sepenuhnya.

Anda akan melihat bahawa beberapa imej menyentuh tepi bekas. Untuk membetulkannya, kami akan menambah elemen pembungkus

ke elemen imej latar belakang dan menambah padding kepadanya:

<span>npm -v
</span>

Perhatikan bahawa kami telah memindahkan lebar yang kami berikan kepada imej latar belakang ke elemen pembalut dan kami telah menambah W-Full dan H-Full ke Elemen Imej Latar Belakang untuk memastikan ia memerlukan 100% lebar ibu bapanya dan ketinggian.

menambah bayang -bayang kotak dan sudut bulat

Produk kami kini kelihatan lebih baik. Kami akan menambah dua sentuhan terakhir kepada gaya semasa. Pertama, kami akan menambah beberapa bayangan kepada setiap produk. Kami akan menggunakan kelas bayangan kotak Tailwind. Format untuk kelas ini adalah Shadow- {Size}, di mana saiz adalah pilihan dan boleh berkisar dari SM ke 2XL. Ia juga tidak boleh mengeluarkan mana -mana bayang -bayang kotak atau dalaman untuk membuat bahagian dalam bayang -bayang. Kedua, kami akan membuat sempadan kad produk sedikit bulat. Kami akan menggunakan kelas radius sempadan Tailwind. Format untuk kelas ini dibulatkan- {kedudukan}-{saiz}, di mana saiz adalah pilihan dan boleh berkisar dari SM hingga 3XL atau tidak boleh untuk 0 radius sempadan atau penuh untuk menjadikannya bulat sepenuhnya. Kedudukan juga pilihan dan boleh menjadi kedudukan khusus seperti T untuk atas atau L untuk kiri, atau boleh menjadi khusus untuk kelebihan tertentu seperti TL untuk kiri atas.

kami akan menambah bayangan-sm ke kad produk untuk menambah bayangan kecil kepadanya, dan bulat-lg untuk membuat sempadan dibulatkan:

npx create-react-app react-shop

Akhirnya, halaman senarai produk kami kelihatan seperti tangkapan skrin di bawah.

Menyesuaikan tema

Setakat ini, semua gaya yang kami lakukan telah berdasarkan gaya lalai Tailwind. Walau bagaimanapun, Tailwind juga membolehkan kami menyesuaikan tema kami. Kita boleh menukar warna, keluarga fon, dan banyak lagi. Semua perubahan ini dilakukan di tailwind.config.js.

Mari cuba menukar warna sedikit. Terdapat cara yang berbeza untuk menukar warna tema.

Satu cara untuk melakukannya adalah dengan menentukan warna anda sendiri. Sebagai contoh, untuk menambah warna baru kepada tema kami, kami boleh melakukan perkara berikut di tailwind.config.js:

Perhatikan bahawa di dalam tema.extend, kami telah menambah objek warna, kemudian di dalamnya kami telah menambah turquoise utama dengan kod hex untuk warna biru. Sekarang kita boleh menggunakan warna itu seperti kita akan menggunakan warna lalai. Sebagai contoh, untuk menetapkan warna latar belakang ke turquoise, anda boleh menggunakan bg-turquoise.

<span>cd react-shop
</span>

Cara lain untuk menyesuaikan warna tema adalah dengan menukar warna lalai. Seperti yang dinyatakan sebelum ini, warna lalai di Tailwind adalah putih, hitam, kelabu, merah, biru, hijau, kuning, oren, indigo, ungu dan merah jambu. Anda boleh menukar nilai sebenar untuk warna ini.

Sebagai contoh, untuk menukar kuning menjadi lebih banyak kuning mustard, lakukan ini:

<span>node -v
</span>

Sekarang, apabila anda menggunakan kelas lalai untuk kuning, anda akan mendapat warna kuning yang anda tentukan di sini. Anda juga boleh menentukan nilai untuk warna yang berbeza warna menggunakan skala angka:

<span>npm -v
</span>

anda juga boleh menggunakan kekunci seperti ringan, ringan, lalai, gelap, paling gelap:

npx create-react-app react-shop

Menambah palet warna

Cara ketiga untuk menukar warna adalah dengan menggunakan palet warna lain di CSS tailwind, yang akan kita lakukan.

Pertama, memerlukan warna dari tailwindcss/warna pada permulaan tailwind.config.js:

<span>cd react-shop
</span>

Seterusnya, kami akan menukar merah ke palet mawar, dan kelabu ke kelabu biru:

<span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

Jika anda menyemak laman web sekarang, anda akan melihat sedikit perubahan dalam warna yang kami gunakan.

Jika anda ingin melihat perbezaan warna dengan baik, anda boleh cuba menukar kelabu ke amber:

<span>npm install @craco/craco
</span>

anda akan melihat bahawa latar belakang kini kuning-ish.

anda juga boleh menukar keluarga font, dan banyak lagi, semuanya dari tailwind.config.js, sementara masih menggunakan kelas yang sama yang disediakan dengan CSS Tailwind. Dengan cara ini, anda boleh menyesuaikan tema dengan mudah untuk disesuaikan dengan reka bentuk anda.

Menambah mod gelap

Varian gelap membolehkan kita dengan mudah gaya elemen kita untuk mod gelap pada masa yang sama kita menggayakannya untuk mod cahaya.

Pada mulanya, ketika kami sedang menubuhkan laman web kami, kami menukar kunci gelap di tailwind.config.js ke media. Ini bermakna mod gelap akan digunakan apabila penyemak imbas atau OS ditetapkan ke mod gelap.

Jika anda ingin menguji bagaimana laman web akan melihat dalam mod gelap tetapi anda tidak mempunyai mod gelap, anda boleh mencontohi ini dalam devtools Chrome. Buka DevTools dengan menekan

f12 , kemudian tekan ctrl shift p (atau cmd shift 🎜> p pada macOS) dan dalam lungsur turun yang muncul Enter "Show Rendering" dan pilih pilihan yang ditunjukkan. Akhirnya, tatal ke bawah untuk "mencontohi ciri media CSS lebih suka-warna-skema" dan pilih lebih suka-warna-skema: gelap. Perkara yang sama boleh dilakukan untuk menguji mod cahaya dengan memilih skema-skema yang lebih suka: cahaya.

mari kita mulakan dengan menukar warna latar belakang laman web dalam mod gelap dengan menambah kelas gelap: bg-gray-800 dalam src/app.js:

<span>"scripts": {
</span>  <span>"start": "react-scripts start",
</span>  <span>"build": "react-scripts build",
</span>  <span>"test": "react-scripts test",
</span>  <span>"eject": "react-scripts eject"
</span><span>}
</span>

Jika anda menyemak sekarang dan penyemak imbas/OS anda ditetapkan ke mod gelap (atau ditiru), anda akan melihat bahawa warna latar belakang telah berubah menjadi warna kelabu yang lebih gelap.

mari kita buat perubahan pada kad produk. Kami akan menambah kelas gelap: BG-GRAY-300 ke elemen paling luar:

<span>node -v
</span>

Jika anda menyemak sekarang, anda akan melihat bahawa warna latar belakang kad produk telah berubah, tetapi anda juga akan melihat bahawa imej sekarang tidak kelihatan bagus, kerana ia mempunyai latar belakang putih.

mari kita menjadikannya lebih baik dengan menambah latar belakang putih ke pembalut latar belakang apabila ia berada dalam mod gelap. Ini boleh dilakukan dengan menambah kelas gelap: BG-WHITE. Juga, warna teks kategori kini hampir tidak dapat dilihat, jadi kami akan mengubahnya menjadi sesuatu yang lebih gelap dengan menambah kelas gelap: Text-Grey-700:

<span>npm -v
</span>

Pandangan akhir laman web kami ditunjukkan di bawah.

kumpulan dan membolehkan varian untuk plugin

Sesetengah varian tidak didayakan untuk semua plugin secara lalai, kerana ia akan membawa kepada saiz fail yang besar. Jadi, jika kita perlu menggunakan varian ini, kita perlu membolehkan mereka secara manual di Tailwind.config.js untuk plugin yang kita mahu. Plugin Berikut adalah kelas yang telah kami gunakan sepanjang masa. Sebagai contoh, warna latar belakang milik plugin latar belakang.

Salah satu variasi yang tidak diaktifkan ialah kumpulan-hover. Satu kumpulan adalah beberapa elemen yang dikumpulkan bersama, supaya mana -mana negeri (contohnya, hover) boleh menjejaskan seluruh kumpulan. Kumpulan diisytiharkan dengan menambahkan kelas kumpulan ke bekas. Kemudian, anda boleh menggunakan varian kumpulan-hover dengan salah satu kelas utiliti pada elemen yang merupakan anak bekas. Kelas utiliti yang anda gunakan kumpulan-hover tidak akan digunakan melainkan jika mana-mana elemen dalam kumpulan (iaitu, mana-mana elemen di dalam elemen kontena) dilegakan.

Kami akan membuat setiap kad produk satu kumpulan, kemudian apabila hover kami akan mengezum ke imej. Oleh itu, kami akan menambah kelas kumpulan ke elemen paling luar dalam komponen produk, maka kami akan menambah elemen yang mempunyai imej latar belakang kelas berikut:

1. Peralihan-transformasi: salah satu kelas peralihan Tailwind. Ia menggunakan sifat peralihan untuk mengubah perubahan sahaja.
2. Durasi-300: Salah satu kelas tempoh peralihan Tailwind. Ia menggunakan jangkauan peralihan dengan nilai 300ms.
3. Kumpulan-hover: Transform: Seperti yang dijelaskan di atas, varian kumpulan-hover memastikan bahawa kelas transform hanya digunakan apabila elemen dalam kumpulan berlegar. Transform adalah salah satu kelas transformasi Tailwind. Ia membolehkan menambah kelas berkaitan transform lain.
4. Kumpulan-hover: Skala-125: Kelas Skala-125 adalah salah satu kelas skala Tailwind. Ia menetapkan skala untuk kedua -dua x dan y hingga 1.25, tetapi anda perlu menambah kelas transform terlebih dahulu.

Menggunakan kelas di atas, imej akan mengezum dalam sekali mana -mana elemen dalam produk dilegakan. Kami juga akan menambah kelas limpahan yang tersembunyi ke elemen paling luar dalam komponen produk untuk memastikan bahawa, jika imej tumbuh di luar bekasnya, ia tidak melimpah. Kami juga akan menggunakan Hover: Shadow-2XL untuk membuat bayang-bayang kad produk lebih besar dengan jangka masa-shadow-300, untuk memastikan peralihan adalah lancar:

<span>node -v
</span>

NOTA: Jika anda meniru mod gelap (atau menggunakan mod gelap), anda mungkin melihat kesan yang lebih baik dalam mod cahaya, jadi pastikan untuk beralih ke mod cahaya.

Jika anda cuba melayang di atas produk sekarang, anda akan melihat bahawa bayang -bayang membesarkan dan imej zoom masuk.

Kesimpulan

Kami telah mencipta laman web yang kemas dan responsif dengan React tanpa perlu menulis apa -apa CSS! Itulah keajaiban CSS Tailwind. Tailwind CSS menghilangkan kerja yang membosankan, berulang -ulang atau menulis CSS. Ia juga memudahkan mewujudkan tema, dan membolehkan anda memberi tumpuan kepada mewujudkan komponen yang boleh diguna semula dengan reka bentuk yang anggun, yang sesuai untuk bertindak balas. Apa yang kita tutupi dalam artikel ini hanya menggaru permukaan semua perkara yang indah yang anda boleh buat dengan mudah dengan css tailwind.

Soalan Lazim Menggunakan React with Tailwind

Apa itu CSS Tailwind, dan mengapa saya harus menggunakannya dengan React?

Tailwind CSS adalah rangka kerja CSS yang pertama yang menyediakan satu set kelas yang telah ditetapkan untuk aplikasi web gaya. Menggunakan CSS Tailwind dengan React dapat mempercepatkan proses pembangunan dan mengekalkan sistem reka bentuk yang konsisten.

anda boleh mengintegrasikan css tailwind ke dalam projek reaksi dengan memasangnya dengan npm atau benang dan mengkonfigurasi proses binaan anda untuk memproses kelas css tailwind. CSS Tailwind?

Ya, anda boleh menggunakan CSS Tailwind dengan Create React App. Terdapat beberapa kaedah, termasuk konfigurasi Craco atau persediaan PostCSS yang bertindak balas, untuk menjadikannya berfungsi dengan lancar.

Bagaimana saya menggunakan kelas CSS Tailwind ke komponen React saya?

Anda boleh memohon kelas CSS Tailwind terus ke komponen React anda menggunakan alat peraga classname. Sebagai contoh,

hello, tailwind!

.

Apakah faedah menggunakan kelas utiliti dalam css tailwind dengan reaksi?

Menggunakan kelas utiliti boleh menjadikan komponen React anda lebih ringkas, dan ia menggalakkan sistem reka bentuk yang konsisten. Ia juga memudahkan reka bentuk responsif dan menggalakkan kebolehgunaan semula.

Tailwind CSS menyediakan kelas responsif yang membolehkan anda menentukan gaya yang berbeza untuk pelbagai saiz skrin. Anda boleh menggunakan kelas -kelas ini dengan memasuki titik putus seperti MD: Untuk definisi kelas anda.

Walaupun Tailwind CSS berkuasa, ia boleh membawa kepada saiz fail yang lebih besar jika anda tidak berhati -hati dengan penggunaan kelas. Ia juga mungkin mencabar bagi pereka yang lebih suka bekerja dengan CSS tradisional.

Atas ialah kandungan terperinci Bina laman web dengan CSS React dan Tailwind. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!