Setup Tailwind CSS v3 di Remix: Langkah Demi Langkah
Dalam artikel ini, kita akan belajar bagaimana install Tailwind CSS v3 didalam Remix. Yang paling pertama, pastikan remix project sudah ready untuk dipakai. Jike belum, Anda bisa install mulai dari sekarang.
Dalam artikel ini, kita akan belajar bagaimana install Tailwind CSS v3 didalam Remix. Yang paling pertama, pastikan remix project sudah ready untuk dipakai. Jike belum, Anda bisa install mulai dari sekarang.
npx create-remix@latest 'remix_tailwind'
Ganti name folder remix_tailwind dengan apapun yang Anda inginkan. Setelah itu cd kedalam folder tersebut cd remix_tailwind.
Sekarang install tailwind dan package yang lain yang kita butuhkan.
npm install -D concurrently tailwindcss postcss-cli postcss autoprefixer
Jika sudah selesai, maka kita bisa setup / initialize file config nya seperti berikut.
npx tailwind init -p
Maka harusnya, sekarang Anda sudah mempunyai 2 file baru di root directory yaitu tailwind.config.js dan postcss.config.js.
Setelah itu, buka file package.json, pada section scripts, silahkan hapus semua dan ganti dengan scripts berikut.
"scripts": {
"build": "remix build",
"postinstall": "remix setup node",
"start": "remix-serve build",
"dev:css": "postcss styles --base styles --dir app/styles -w",
"build:css": "postcss styles --base styles --dir app/styles --env production",
"dev": "concurrently \"npm run dev:css\" \"remix dev\""
},
Perhatikan pada section dev:css, jelas bahwa dia mengharapkan satu folder baru dengan nama styles di root directory. Jadi sekarang tugas kita adalah membuat folder tersebut sekalian buat satu file css didalamnya.
mkdir styles
touch styles/app.css
Jika sudah, sekarang Anda bisa buka file app.css tersebut. Dan import tailwind css nya dengan cara berikut.
@tailwind base;
@tailwind components;
@tailwind utilities;
Lanjut, buka file root.jsx yang ada di app directory. Didalam nya silahkan cari syntax untuk import css nya seperti berikut.
import globalStylesUrl from "~/styles/global.css";
import darkStylesUrl from "~/styles/dark.css";
Setelah itu, silahkan hapus, dan ganti dengan ini
import globalStylesUrl from "~/styles/app.css";
Lanjut, masih di file yang sama, coba dulu Anda buat atau tambah class tepat pada section <Document/> Anda bisa tambah class di body nya seperti <body className="antialiased font-sans bg-rose-500">, atau lengkap nya bisa Anda lihat dibawah.
function Document({ children, title }) {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
{title ? <title>{title}</title> : null}
<Meta />
<Links />
</head>
<body className="antialiased font-sans bg-green-500">
{children}
<ScrollRestoration />
<Scripts />
{process.env.NODE_ENV === "development" && <LiveReload />}
</body>
</html>
);
}
Setelah itu, buka kembali terminal Anda, dan jalankan perintah npm run dev. Maka harusnya sekarang dia akan memberikan kita alamat dengan port 8000 seperti berikut.
> dev
> concurrently "npm run dev:css" "remix dev"
[0]
[0] > dev:css
[0] > postcss styles --base styles --dir app/styles -w
[0]
[1] Watching Remix app in development mode...
[1] 💿 Built in 274ms
[1] Remix App Server started at http://localhost:3000
Jika sudah, buka browser Anda dan kunjungi http://localhost:3000 untuk melihat projectnya, jika berhasil, harusnya sekarang background body berwarna hijau.
Semoga artikel ini bermanfaat, jika Ada yang ingin ditanya, bisa lewat Twitter ya. Seri akan menyusul nanti nya.
Related Articles
Irsyad A. Panjaitan
Let's start living like no one can help us in any event, so that when we are helped in certain times, it becomes a plus in itself.
Go to Irsyad A. Panjaitan profile