Styling
Secara bawaan, React Router udah ngeintegrasiin Tailwind CSS lewat Vite, jadi lo bisa langsung pake Tailwind CSS di project lo. Kalo lo mau pake opsi yang lain, tinggal ikutin aja panduan di dokumentasi library tersebut. Karena cara setup setiap library itu pasti beda-beda.
CSS
Secara mendasar, lo bisa pake CSS reguler dan bisa langsung import file-nya ke component React lo.
Bisa liat contohnya di file app/root.tsx. Di sana ada import "app.css"; yang ngimpor file CSS global.
Isi dari file tersebut kayak gini:
Kayak yang lo liat, di sini ada @import "tailwindcss"; yang ngimpor Tailwind CSS.
Versi Tailwind CSS yang dipake di sini adalah versi 4.
Itu kenapa lo nggak liat file tailwind.config.js di dalam project ini, karena buat versi 4 ini mereka pake file CSS buat ngekonfigurasinya.
Fonts
Kalo mau pake custom font, lo bisa taro file font-nya di dalam folder public dan import font tersebut di file CSS lo kayak gini contohnya:
Alternatifnya, lo bisa pake Google Fonts atau font CDN lainnya. Lo tinggal import aja file CSS-nya di file app/root.tsx kayak yang udah dicontohin sama React Router secara default:
Buat font CDN lainnya juga sama harusnya kalo mereka nyediain file CSS yang bisa di-import.
Kenapa pake <link> dan nggak pake @import di CSS aja?
Sebagai contoh, kalau lo pakai <link href="a.css"> buat load CSS, dan di dalam a.css ada @import 'b.css', maka browser bakal download a.css dulu, baru setelah itu download b.css.
Ini bikin loading jadi sekuensial (satu-satu), bukan paralel. Alhasil, web lo jadi lebih lambat.
Padahal, kalau lo pakai banyak <link> langsung di HTML (atau @import di dalam <style> tag), browser bisa download semua CSS secara paralel—hasilnya lebih cepat.
Kesimpulannya, hindarin @import di file CSS secara umum. Kecuali kalau lo terpaksa (misalnya di CMS yang cuma bisa akses 1 file CSS), ya udah nggak masalah.