インストール

公式ページを参照
https://tauri.app/

すでにRust周りはインストールされているためCargoでコマンドをインストールしてプロジェクトを作成

以前見た記事だとCargoでインストールする場合時間がかかるとあったが、インストール+コンパイルで大体１分くらいでできた

SNKW

tauriでプロジェクト作成した際の初期設定のスクショ

初期設定のフロントエンドに使用する言語でJS/TSを選択した場合

パッケージマネージャー（pnpm,yarn,npm）
UIテンプレート (Vanilla,Vue,Svelt,React,Solid,Anguler)
TSを最初からインストールするか

の設定が可能
フロントエンドのビルドツールはデフォルトでViteになっていた

フロントエンドRustは選択してないのでどんな設定が可能かは不明

SNKW

とりあえずターミナルの表示に従い

pnpm install
pnpm tauri dev

を実行してみた

パッケージのインストールは問題なく完了したが、開発サーバーの立ち上げに失敗

エラーメッセージを見たところpkg-configがOSにインストールされてないとあったのでインストールし再度実行

が、ダメ

No package 'gobject-2.0' found

とエラーメッセージ中に表示されていたため、そのパッケージを入れて設定を行うこともできると思うが、いたちごっこになりそうなのであきらめてドキュメントを確認

前提条件のページに以下のパッケージを事前にインストールするようにあったので素直に従う

sudo apt update
sudo apt install libwebkit2gtk-4.0-dev \
    build-essential \
    curl \
    wget \
    libssl-dev \
    libgtk-3-dev \
    libayatana-appindicator3-dev \
    librsvg2-dev

SNKW

再度pnpm tauri devを実行したところ、別のエラーが発生

error[E0554]: `#![feature]` may not be used on the stable release channel

安定版では表示されている機能が使用できないというエラーらしい

rust e0554 ignore とググってGitHubのissueがヒットしたので参考に試してみる

無事にコンパイルが完了し、開発画面を立ち上げることができた

SNKW

いまさらながら環境について

Window11 Home 22H2
WSL Ubuntu 22.04.2

WSLgが有効になっているWSL経由で開発しているためか、プレビューウィンドウのアプリアイコンはLinuxのペンギンになっている

SNKW

Tailwind CSSとそのためのパッケージを追加

# 必要なパッケージのインストール
pnpm i tailwindcss postcss autoprefixer

# あまり必要ではないけどpostcssの設定ファイルの型補間のためにインストール
pnpm i -D postcss-load-config

# Tailwind CSSの設定ファイルの作成
npx tailwind init

# postcssの設定ファイルの作成
touch postcss.config.js

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
+ content: ["src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

+/**@type {import('postcss-load-config').Config} */
+
+export default {
+  plugins:{
+      tailwindcss: {},
+      autoprefixer: {}
+  }
+}

よく見るmodule.exportsを使用する場合は、ファイルの拡張子を.cjsにしてCommonJSを使用することを明示しないといけない点に注意