SvelteKit + Landpage in PicoCSS + others pages in TailwindCSS

README.md

SvelteKit + Landpage in PicoCSS + others pages in TailwindCSS

Create

npm create svelte@latest landpage -y
cd landpage

nvm use 20.14.0

npm install

cat << EOF > src/routes/+layout.svelte
<!-- src/routes/+layout.svelte -->
<script>
  import "../app.css";
  import { page } from '\$app/stores';
</script>

{#if \$page.url.pathname.endsWith('/')}
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
>
{/if}

<slot />
EOF

cat << EOF > src/routes/+page.svelte
<!-- src/routes/+page.svelte -->
<main>
  <header class="container">
    <h1>Welcome to Our Landing Page</h1>
    <p>This landing page is styled using PicoCSS.</p>
    <a href="/about" role="button">Learn more about us</a>
  </header>
</main>
EOF

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

cat << EOF > src/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
EOF

mkdir src/routes/about

cat << EOF > src/routes/about/+page.svelte
<!-- src/routes/about/+page.svelte -->
<main class="flex flex-col items-center justify-center h-screen bg-gray-100 text-gray-900">
  <h1 class="text-4xl font-bold">About Us</h1>
  <p class="mt-4 text-lg">This page is styled using TailwindCSS.</p>
  <a href="/" class="mt-6 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700">Back to Home</a>

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-2">
  Click Me
</button>

<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mt-2">
  Click Me
</button>

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

<div class="grid grid-cols-12 gap-6">
  <div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 xl:col-span-2 w-32 h-32 bg-red-500">1</div>
  <div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 xl:col-span-2 w-32 h-32 bg-green-500">2</div>
  <div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 xl:col-span-2 w-32 h-32 bg-blue-500">3</div>
  <div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 xl:col-span-2 w-32 h-32 bg-yellow-500">4</div>
  <div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 xl:col-span-2 w-32 h-32 bg-purple-500">5</div>
  <div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 xl:col-span-2 w-32 h-32 bg-pink-500">6</div>
  <div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 xl:col-span-2 w-32 h-32 bg-red-500">1</div>
  <div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 xl:col-span-2 w-32 h-32 bg-green-500">2</div>
  <div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 xl:col-span-2 w-32 h-32 bg-blue-500">3</div>
  <div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 xl:col-span-2 w-32 h-32 bg-yellow-500">4</div>
  <div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 xl:col-span-2 w-32 h-32 bg-purple-500">5</div>
  <div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 xl:col-span-2 w-32 h-32 bg-pink-500">6</div>
</div>

</main>
EOF

cat << EOF > src/routes/about/+layout.svelte
<!-- src/routes/about/+layout.svelte -->
<script>
  import '../../app.css'; // TailwindCSS
</script>

<slot />
EOF

mkdir src/routes/profile

cat << EOF > src/routes/profile/+page.svelte
<div class="grid grid-cols-12 gap-6">
  <div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 xl:col-span-2 w-32 h-32 bg-red-500">1</div>
  <div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 xl:col-span-2 w-32 h-32 bg-green-500">2</div>
  <div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 xl:col-span-2 w-32 h-32 bg-blue-500">3</div>
  <div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 xl:col-span-2 w-32 h-32 bg-yellow-500">4</div>
  <div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 xl:col-span-2 w-32 h-32 bg-purple-500">5</div>
  <div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 xl:col-span-2 w-32 h-32 bg-pink-500">6</div>
  <div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 xl:col-span-2 w-32 h-32 bg-red-500">1</div>
  <div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 xl:col-span-2 w-32 h-32 bg-green-500">2</div>
  <div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 xl:col-span-2 w-32 h-32 bg-blue-500">3</div>
  <div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 xl:col-span-2 w-32 h-32 bg-yellow-500">4</div>
  <div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 xl:col-span-2 w-32 h-32 bg-purple-500">5</div>
  <div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 xl:col-span-2 w-32 h-32 bg-pink-500">6</div>
</div>
EOF