v0のhtmlでの利用方法
解決したいこと
v0を利用し、生成されるHTMLのコードを利用してデザインを再現したいと思っています。
背景
初学者向けにhtmlの研修でAIのデザイン生成を取り入れようとしています。そのなかでhtmlを自動で生成するv0の利用を考えています。
対象者はReactなどの学習コストが高いものは理解しない状態で、v0で画面を生成しhtmlやcssを簡単に修正することを想定しています。
発生している問題・エラー
v0で生成されたHTMLのコードを利用し、デザインをhtmlファイルで再現した場合、shadcnを利用している箇所が一部再現できない。
具体的には、shadcnを利用した箇所（チェックボックス等）が動作しなかったり、デザインが少し異なる。
該当するソースコード
以下、該当デザインと実際にHTMLで再現したコード。
https://v0.dev/r/BWV1ewhlaZF
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>タイトル</title>
<!-- trailwindcss読み込み -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
}
}
</style>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: 0 },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: 0 },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
};
</script>
</head>
<body>
<!--
// v0 by Vercel.
// https://v0.dev/t/NVcvEzrn0rn
-->
<div class="mx-auto max-w-sm space-y-6">
<div class="space-y-4">
<div class="space-y-2 text-center">
<h1 class="text-3xl font-bold">Sign Up</h1>
<p class="text-gray-500 dark:text-gray-400">
Enter your information to create an account
</p>
</div>
<div class="space-y-2">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="name"
>Name</label
><input
class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
id="name"
placeholder="Enter your name"
required=""
/>
</div>
<div class="space-y-2">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="email"
>Email</label
><input
class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
id="email"
placeholder="Enter your email"
required=""
/>
</div>
<div class="space-y-2">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="password"
>Password</label
><input
class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
id="password"
placeholder="Enter your password"
required=""
type="password"
/>
</div>
<div class="space-y-2">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="confirm-password"
>Confirm password</label
><input
class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
id="confirm-password"
placeholder="Confirm your password"
required=""
type="password"
/>
</div>
<div class="flex items-center space-x-2 text-sm">
<button
aria-checked="false"
class="peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
data-state="unchecked"
id="terms"
role="checkbox"
type="button"
value="on"
></button
><input
aria-hidden="true"
style="
transform: translateX(-100%);
position: absolute;
pointer-events: none;
opacity: 0;
margin: 0px;
"
tabindex="-1"
type="checkbox"
value="on"
/><label
class="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 leading-none"
for="terms"
>
I agree to the
<a class="underline" href="#"> Terms and Conditions </a></label
>
</div>
<button
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 w-full"
type="submit"
>
Sign Up
</button>
</div>
</div>
</body>
</html>
自分で試したこと
- tailwindcssはCDNで利用
-
この記事を参考に、shadcnを利用した場合の
tailwind.configを再現
上記の結果、デザインの色などは再現できたが、どうしても再現できない部分が発生する。
補足
Reactを利用した場合の再現や活用はすでにできます。しかし、Reactは初学者にはハードルが高いため、tailwindcssをCDNで利用するような方式を採用したいと思っております。
最後に
どなたか知見がある方ご存じでしたら教えていただければ幸いです。お願いいたします。
0