はじめに
以下の記事に書いた「esm.sh/tsx」を使ったお試しの続きです。
●「esm.sh/tsx」で HTML に書いた TypeScript や React の処理をブラウザで直接扱う - Qiita
https://qiita.com/youtoy/items/275644736abf0d40915b
上記の記事では、「esm.sh/tsx」を使って TypeScript や React をブラウザで直接扱いました。
今回は、React をブラウザで直接扱ってみたものに関し、少し見た目を整えるために、Tailwind CSS を追加してみます。Tailwind CSS は CDN から読みこむ形で、ブラウザで直接扱います。
試した内容
まず今回のお試しのベースとなる、前回行った内容を少し書いておきます。
前回の内容
前回は、記事内の以下の部分で掲載している「esm.sh/tsx」を扱いました。
そして、「esm.sh/tsx」を使って TypeScript や React をブラウザで直接扱っていたのですが、React を組み合わせてやったことについては、以下の部分に書いています。
この時は、「ボタンを押すと、ボタン上に表示された数字がカウントアップされる」というシンプルな内容を試していました。
text/tsx タイプのスクリプトに関する部分
上記の HTML の内容について、一部を抜粋して紹介します。
HTML に以下の内容を書いていますが、この「text/tsx タイプのスクリプト」を「esm.sh/tsx」を使って TSX（TypeScript + JSX）としてトランスパイルして実行する、ということをやっていました。
<script type="text/tsx">
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
function MyButton() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(c => c + 1)}>
Clicked {count} times
</button>
);
}
export default function MyApp() {
return (
<div>
<h1>Counters that update separately</h1>
<MyButton />
<MyButton />
</div>
);
}
const rootEl = document.getElementById("root");
createRoot(rootEl).render(<MyApp />);
</script>
今回追加する Tailwind CSS関連の内容
今回、上記の内容に CDN から読みこんだ Tailwind CSS を使い、ボタンの見た目を少し変えます。
CDN から Tailwind CSS を読みこむためのタグは、以下を参照しました。
●Play CDN - Tailwind CSS
https://tailwindcss.com/docs/installation/play-cdn
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
今回試したコード
今回、以下のようなコードを書いて試しました。ボタンを青系にして、また 2つのボタンの間に少しスペースを入れています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@19",
"react-dom/client": "https://esm.sh/react-dom@19/client"
}
}
</script>
<script type="module" src="https://esm.sh/tsx"></script>
</head>
<body>
<div id="root"></div>
<script type="text/tsx">
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
const Button = () => {
const [cnt, setCnt] = useState(0);
return (
<button
className="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded"
onClick={() => setCnt(cnt + 1)}
>
Clicked {cnt} times
</button>
);
};
const App = () => (
<div className="p-4 space-y-2">
<h1 className="text-xl font-bold">Counters that update separately</h1>
<div className="flex space-x-2"><Button /><Button /></div>
</div>
);
createRoot(document.getElementById("root")!).render(<App />);
</script>
</body>
</html>
上記をブラウザで開いたところ、以下のようになりました。
ちなみに、Tailwind CSS を使っていない時の状態は以下のとおりです。
おわりに
とりあえず、「esm.sh/tsx」を使って React ＋ Tailwind CSS をブラウザで直接扱う、ということを試せました。
さらに以下などを扱えるかなども、別途、試してみられればと思っています。
●Mantine
https://mantine.dev/
●daisyUI — Tailwind CSS Components ( version 5 update is here )
https://daisyui.com/
【追記】
その後、この続きの記事を書きました。
●「esm.sh/tsx」を使って React と daisyUI／Mantine をブラウザで直接扱う - Qiita
https://qiita.com/youtoy/items/27b8101249c9be03ec0c