8000 fix:Tailwind style to lucia login (#540) · sveltejs/cli@c230246 · GitHub
[go: up one dir, main page]
Skip to content

Commit c230246

Browse files
brettearlemanuel3108
brettearle
and
manuel3108
authored
fix:Tailwind style to lucia login (#540)
* Tailwind style to lucia login * Tailwind classes added to lucia demo when tailwind present in dependencies * Tailwind classes added to lucia demo when tailwind present in dependencies + formatted nicer * Fix build issue with missing quote * make optional dependency to tailwindcss explicit --------- Co-authored-by: Manuel Serret <mserret99@gmail.com>
1 parent c381051 commit c230246

File tree

1 file changed

+25
-6
lines changed

1 file changed

+25
-6
lines changed

‎packages/addons/lucia/index.ts

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,11 @@ export default defineAddon({
3838
shortDescription: 'auth guide',
3939
homepage: 'https://lucia-auth.com',
4040
options,
41-
setup: ({ kit, dependencyVersion, unsupported, dependsOn }) => {
41+
setup: ({ kit, dependencyVersion, unsupported, dependsOn, runsAfter }) => {
4242
if (!kit) unsupported('Requires SvelteKit');
4343
if (!dependencyVersion('drizzle-orm')) dependsOn('drizzle');
44+
45+
runsAfter('tailwindcss');
4446
},
4547
run: ({ sv, typescript, options, kit, dependencyVersion }) => {
4648
const ext = typescript ? 'ts' : 'js';
@@ -505,6 +507,12 @@ export default defineAddon({
505507
return content;
506508
}
507509

510+
const tailwind = dependencyVersion('@tailwindcss/vite') !== undefined;
511+
const twInputClasses =
512+
'class="mt-1 px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"';
513+
const twBtnClasses =
514+
'class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition"';
515+
508516
const svelte5 = !!dependencyVersion('svelte')?.startsWith('5');
509517
const [ts, s5] = utils.createPrinter(typescript, svelte5);
510518
return dedent`
@@ -515,17 +523,28 @@ export default defineAddon({
515523
</script>
516524
517525
<h1>Login/Register</h1>
518-
<form method='post' action='?/login' use:enhance>
526+
<form method="post" action="?/login" use:enhance>
519527
<label>
520528
Username
521-
<input name='username' />
529+
<input
530+
name="username"
531+
${tailwind ? twInputClasses : ''}
532+
/>
522533
</label>
523534
<label>
524535
Password
525-
<input type='password' name='password' />
536+
<input
537+
type="password"
538+
name="password"
539+
${tailwind ? twInputClasses : ''}
540+
/>
526541
</label>
527-
<button>Login</button>
528-
<button formaction='?/register'>Register</button>
542+
<button ${tailwind ? twBtnClasses : ''}
543+
>Login</button>
544+
<button
545+
formaction="?/register"
546+
${tailwind ? twBtnClasses : ''}
547+
>Register</button>
529548
</form>
530549
<p style='color: red'>{form?.message ?? ''}</p>
531550
`;

0 commit comments

Comments
 (0)
0