Uso de Tailwind CSS con SvelteKit
Instale y configure Tailwind CSS en un proyecto de SvelteKit con el plugin oficial.
Uso de Tailwind CSS con SvelteKit es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Por qué usar Tailwind
Tailwind es un framework CSS basado en utilidades que combina de forma natural con los estilos con ámbito de Svelte.
Instalación
Use la configuración oficial de Tailwind para SvelteKit.
npx svelte-add@latest tailwindcss
npm installConfiguración
La configuración de Tailwind (tailwind.config.js) busca en los archivos de Svelte los usos de clases.
content: ["./src/**/*.{html,js,svelte,ts}"]Uso en componentes
Aplique las clases de utilidad directamente a los elementos.
<button class="px-4 py-2 bg-blue-500 text-white rounded">Click</button>Plugins
Añada plugins de formularios, tipografía y relación de aspecto para obtener valores predeterminados más completos.
Tema personalizado
Modo oscuro
Use la variante dark: con una estrategia de clases controlada mediante un store de Svelte.
Composición
Combine las utilidades de Tailwind con bloques <style> con ámbito para realizar ajustes específicos de cada componente.
Rendimiento de JIT
El compilador JIT de Tailwind genera CSS muy pequeño al incluir únicamente las utilidades que utiliza.
Directiva @apply
Use @apply dentro de los bloques de estilos para combinar utilidades reutilizables.
Bibliotecas de interfaz basadas en Tailwind
Skeleton UI, Flowbite Svelte y Melt UI ofrecen componentes compatibles con Tailwind.
Comprobación rápida
¿Qué función cumple la configuración content de Tailwind?
Resumen
Tailwind y SvelteKit forman una combinación productiva. Configure las rutas de contenido y use las utilidades directamente en el marcado de los componentes.
Preguntas frecuentes
¿La lección «Uso de Tailwind CSS con SvelteKit» es gratis?
Sí — el texto completo de «Uso de Tailwind CSS con SvelteKit» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Uso de Tailwind CSS con SvelteKit»?
Instale y configure Tailwind CSS en un proyecto de SvelteKit con el plugin oficial. Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Uso de Tailwind CSS con SvelteKit»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Uso de Tailwind CSS con SvelteKit
- Gráficos de D3.js en Svelte
- Mapas de Leaflet con actions de Svelte
- Editores de texto enriquecido: Tiptap