“Si te gusta el viento de cola entonces úsalo, si no te gusta el viento de cola entonces no lo uses. A nadie le importa” — Firship

No estoy aquí para discutir los pros y los contras, las trampas y las ventajas del viento de cola. Recurra a las profundidades de Twitter para una discusión informada y concisa sobre este tema. Ja

Una vez que haya llegado a la conclusión de que Tailwindcss le servirá mejor a usted y a las necesidades de su proyecto cuando se trata de agregar estilos a su aplicación web de inicio de un millón de dólares, lea esto.

Voy a ser muy breve, de nada.

1. Crear proyecto SvelteKit

Cree su aplicación SvelteKit , siéntase libre de elegir cualquier configuración inicial que desee. Use mecanografiado si es un desarrollador web real e ignore la configuración de prueba si es ChatGPT v3.

npm create svelte@latest my-app
cd my-app
npm install

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.cjs -p

1. esbelto.config.js
2. tailwind.config.js
3. postcss.config.cjs

touch src/app.css
touch src/routes/+layout.svelte

He agregado algunos alias comunes a continuación para su comodidad, siéntase libre de eliminarlos y crear los suyos propios. También deberá agregarlos a su tsconfig.json si está usando TypeScript.

/**
 * svelte.config.js
 */

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';


/** @type {import('@sveltejs/kit').Config} */
const config = {
 // Consult https://kit.svelte.dev/docs/integrations#preprocessors
 preprocess: vitePreprocess(),

 kit: {
  adapter: adapter(),
  alias: {
   '$components': './src/components',
   '$stores': './src/stores',
   '$utils': './src/utils',
   "$actions": "./src/actions",
   "$lib": "./src/lib",
   '$assets': './src/lib/assets',
  }
 }
};

export default config;
/**
 * tailwind.config.js
 */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,svelte,ts}"],
  mode: 'jit',
  // you dont need `purge: enabled: production` because you are using jit
  purge: [
    "./src/**/*.svelte",
    "./src/**/*.html"
  ],
  theme: {},
  plugins: [],
}

// src/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

// src/routes/+layout.svelte
<script lang="ts">
 import '../app.css';
</script>

<slot/>

Calidad de vida (Opcional)

1. Use prettier para ordenar sus clases de viento de cola. Si no eligió usar más bonito al configurar la ejecución del proyecto SvelteKit:

touch .prettierrc
npm install prettier prettier-plugin-svelte

Gracias por leer, este es mi primer artículo en Medium. Si esto te ayudó, deja algunos aplausos y deja algunas críticas constructivas para que pueda actualizar.