Vite + React環境でUnoCSSの使い方
以下の記事で UnoCSS が紹介されていたので、気になって使ってみました。
Vite のセットアップ
この記事では UnoCSS をメインで記述しますので、セットアップは以下の公式サイトを参考にしてください。
UnoCSS のセットアップ
公式サイトはこちら
以下のコマンドで UnoCSS をインストールします。
bun add -D unocss次にvite.config.tsに追加します。
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import UnoCSS from "unocss/vite";
export default defineConfig({
plugins: [react(), UnoCSS()],
});UnoCSS の設定ファイルuno.config.tsを作成します。
TailwindCSS を使う場合は、プリセットが先ほどインストールしたモジュールに入っています。
import { defineConfig, presetWind } from "unocss";
export default defineConfig({
presets: [presetWind()],
});最後にmain.tsxに UnoCSS を import します。
TailwindCSS 用のリセット CSS も import します。
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import "@unocss/reset/tailwind.css";
import "virtual:uno.css";
createRoot(document.getElementById("root")!).render(
<StrictMode>
<App />
</StrictMode>
);これで TailwindCSS 記法で書けるようになりました。
function App() {
return (
<>
<p className="text-red">UnoCSS</p>
</>
);
}
export default App;Attributify
Attributify 機能は、TailwindCSS を使っていて class が長くなり、読みにくいときに便利です。
例えば以下のコードを
<button class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600">
Button
</button>このように項目毎に属性を分けることができます。
<button
bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
text="sm white"
font="mono light"
p="y-2 x-4"
border="2 rounded blue-200"
>
Button
</button>導入するにはまず、uno.config.tsにpresetAttributifyを追加します。
import { defineConfig, presetWind, presetAttributify } from "unocss";
export default defineConfig({
presets: [presetWind(), presetAttributify()],
});次にvite.config.tsに記述している、UnoCSS()とreact()の順番が決まっており以下のように設定します。
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import UnoCSS from "unocss/vite";
export default defineConfig({
plugins: [UnoCSS(), react()],
});またこのままだと型に警告が発生するため、vite-env.d.tsに型情報を追加します。
/// <reference types="vite/client" />
import type { AttributifyAttributes } from "@unocss/preset-attributify";
declare module "react" {
// eslint-disable-next-line @typescript-eslint/no-empty-object-type, @typescript-eslint/no-unused-vars
interface HTMLAttributes<T> extends AttributifyAttributes {}
}最後にビルドスクリプトからtscを削除します。
"scripts": {
"build": "vite build",
},これで属性化が完了です。
拡張機能
VS Code を使っていたら UnoCSS の拡張機能が提供されていますので、インストールすると開発体験が良くなります。
おわり
今回設定した以外にも、Pure CSS によるアイコンやウェブフォントの設定など機能がたくさんあります。
紹介した機能のコードは以下の GitHub に置いてます。