"Si vous aimez le vent arrière, utilisez-le, si vous n'aimez pas le vent arrière, ne l'utilisez pas. Personne ne s'en soucie » — Firship

Je ne suis pas ici pour discuter des avantages et des inconvénients, des pièges et des avantages du vent arrière. Recourez aux profondeurs de Twitter pour une discussion éclairée et concise sur ce sujet. Ha

Une fois que vous êtes parvenu à la conclusion que Tailwindcss vous servira au mieux, ainsi qu'aux besoins de votre projet, lorsqu'il s'agit d'ajouter des styles à votre application Web de démarrage d'un million de dollars, lisez ceci.

Je vais être très bref, de rien.

1. Créer un projet SvelteKit

Créez votre application SvelteKit , n'hésitez pas à choisir la configuration initiale que vous souhaitez. Utilisez un script dactylographié si vous êtes un vrai développeur Web et ignorez la configuration du test si vous êtes 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. svelte.config.js
2. tailwind.config.js
3. postcss.config.cjs

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

J'ai ajouté quelques alias courants ci-dessous pour plus de commodité, n'hésitez pas à les supprimer et à créer les vôtres. Vous devrez également les ajouter à votre tsconfig.json si vous utilisez du tapuscrit.

/**
 * 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/>

Qualité de vie (facultatif)

1. Utilisez plus joli pour trier vos classes de vent arrière. Si vous n'avez pas choisi d'utiliser plus joli lors de la configuration de l'exécution du projet SvelteKit :

touch .prettierrc
npm install prettier prettier-plugin-svelte

Merci d'avoir lu, c'est mon premier article sur Medium. Si cela vous a aidé du tout, laissez quelques applaudissements et laissez des critiques constructives pour que je puisse mettre à jour.