RustでかわいいSPA：SycamoreでもTailwindCSSが使いたい #tailwindcss

背景

SycamoreというRustでSPAを作るためのライブラリがあります。このSycamoreを使ったSPAをビルドするときにはTrunkを使います。そしてこのTrunkがTailwindCSSに対応していた事実にいまさら気づいたのでお試ししてみたくなりました。

Trunkを使うのはCargoやwasm-packとは異なり、RustのWebアプリをビルドしたり動かしたりする時の作業を自動化することができて、静的なファイルの管理が簡単になるからです。

特に今回Trunkを使う理由として大きいのは、Node.jsやnpmやnpmみたいな役割のコマンドを使うことなくTailwindCSSを自動化する部分を使いたいというところです。

準備

Rust、Cargo、Trunkをインストールしておきます。環境次第なので説明はふんわりさせてください。

一般的にはこのへんを参考にがんばるようです💪

Sycamore＋TailwindCSSなSPAを作る

今回はTailwindCSSを使うのが実質本題なのでここを重点的に参考にします。

index.html

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8" />
		<link data-trunk rel="rust" href="./Cargo.toml" />
		<link data-trunk rel="tailwind-css" href="./globals.css" />
	</head>
	<body>
	</body>
</html>

こんな感じに書きますが、特に

index.html（抜粋）

		<link data-trunk rel="tailwind-css" href="./globals.css" />

↑ここがポイントです！

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

ここはいつものやつです。

次にここを参考に設定ファイルを書きます。

tailwind.config.js

module.exports={
	content:[
		'./src/**/*.rs',
		'./index.html',
	],
};

ここでRustのファイルを全部指定します。

あとはRustの部分を書きます。

まずもちろんパッケージをSycamoreに依存させます。

Cargo.toml（抜粋）

[dependencies.sycamore]
version="^0.9.0-beta.2"

src/main.rs

use sycamore::prelude::*;

fn main(){
	sycamore::render(||view!{
		h1(class="text-blue-500"){
			"hello world"
		}
	});
}

お試しするにはこれで十分です。

src/main.rs（抜粋）

		h1(class="text-blue-500"){

ここがポイントで、ここにTailwindCSSのクラスをなんか指定します。今回は水色にしてみます。

確認してみる

こんな感じのコマンドを実行して……

ターミナルで実行

trunk serve

ブラウザで開きます。

もう十分申し訳程度にはかわいいです🎉

感想

これでTailwindCSSを使うためだけにnpmのpackage.jsonを書かなくていいのはありがたみを感じました。