Instalar Tailwind CSS con SvelteKit

Configurando Tailwind CSS en un proyecto SvelteKit.

Crea tu proyecto

Comienza creando un nuevo proyecto SvelteKit si aún no tienes uno configurado. El enfoque más común se describe en la documentación de SvelteKit.

Terminal

npx sv create my-project
cd my-project

Instala Tailwind CSS

Instala @tailwindcss/vite y sus dependencias peer a través de npm.

Terminal

npm install tailwindcss @tailwindcss/vite

Configura el plugin de Vite

Añade el plugin @tailwindcss/vite a tu configuración de Vite.

vite.config.ts

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
  plugins: [
    tailwindcss(),
    sveltekit(),
  ],
});

Importa Tailwind CSS

Crea un archivo ./src/app.css y añade un @import que importe Tailwind CSS.

app.css

@import "tailwindcss";

Importa el archivo CSS

Crea un archivo ./src/routes/+layout.svelte e importa el archivo app.css recién creado.

+layout.svelte

<script>
  let { children } = $props();
  import "../app.css";
</script>
{@render children()}

Inicia tu proceso de build

Ejecuta tu proceso de build con npm run dev.

Terminal

npm run dev

Comienza a usar Tailwind en tu proyecto

Comienza a usar las clases de utilidad de Tailwind para estilizar tu contenido, asegurándote de importar tu tema de Tailwind CSS para cualquier bloque <style> que necesite ser procesado por Tailwind.

+page.svelte

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>
<style lang="postcss">
  @reference "tailwindcss";
  :global(html) {
    background-color: theme(--color-gray-100);
  }
</style>