majiayu000 Guide d'Installation Astro + Tailwind sur Windows
Testé sur : Windows 10/11, Node.js 23.7.0
Prérequis
Observability
First: At the start of execution, display:
🔧 Skill "julien-ref-astro-install" activated
1. Node.js (version 18.20.8+ ou 20.3.0+ ou 22.0.0+)
- Télécharger depuis : https://nodejs.org/
- Installer la version LTS (Long Term Support)
- Vérifier l'installation :
node --version # Doit afficher v18+ ou v20+ ou v22+
2. Gestionnaire de paquets
Important : Sur Windows, pnpm est plus fiable que npm.
# Installer pnpm globalement
npm install -g pnpm
# Vérifier
pnpm --version
Méthode 1 : Installation Rapide (Recommandée)
Étape 1 : Créer le projet
# Aller dans le dossier de travail
cd "C:\Users\VotreNom\OneDrive\Coding\MonProjet"
# Créer le projet Astro avec pnpm
pnpm create astro@latest mon-site
Étape 2 : Choix lors de l'assistant
- Template : Empty (ou Minimal selon besoin)
- TypeScript : No (ou Yes si vous le souhaitez)
- Install dependencies : Yes
- Initialize git : Yes (recommandé)
Étape 3 : Ajouter Tailwind CSS
cd mon-site
pnpm astro add tailwind
# Accepter toutes les modifications (tapez "y")
Étape 4 : Lancer le serveur
pnpm run dev
Le site sera accessible sur http://localhost:4321
Méthode 2 : Installation Manuelle (Si problèmes)
Étape 1 : Créer la structure
mkdir mon-site
cd mon-site
pnpm init
Étape 2 : Installer les dépendances
pnpm add astro @astrojs/tailwind tailwindcss
Étape 3 : Créer les fichiers de configuration
package.json :
{
"name": "mon-site",
"type": "module",
"version": "1.0.0",
"scripts": {
"dev": "astro dev",
"build": "astro build",
"preview": "astro preview"
},
"dependencies": {
"astro": "^5.14.3",
"@astrojs/tailwind": "^5.1.5",
"tailwindcss": "^3.4.18"
}
}
astro.config.mjs :
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
export default defineConfig({
integrations: [tailwind()],
});
tailwind.config.mjs :
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extend: {},
},
plugins: [],
}
Étape 4 : Créer la structure de dossiers
mkdir -p src/pages
mkdir -p src/layouts
mkdir -p src/components
mkdir -p src/styles
mkdir public
Étape 5 : Créer le fichier CSS global
src/styles/global.css :
@tailwind base;
@tailwind components;
@tailwind utilities;
Étape 6 : Créer un layout de base
src/layouts/Layout.astro :
---
import '../styles/global.css';
interface Props {
title: string;
}
const { title } = Astro.props;
---
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>{title}</title>
</head>
<body>
<slot />
</body>
</html>
Étape 7 : Créer une page d'accueil
src/pages/index.astro :
---
import Layout from '../layouts/Layout.astro';
---
<Layout title="Mon Site Astro">
<main class="min-h-screen bg-gray-100 flex items-center justify-center">
<div class="text-center">
<h1 class="text-4xl font-bold text-blue-600 mb-4">
Bienvenue sur Astro + Tailwind
</h1>
<p class="text-gray-700">
Votre site est prêt !
</p>
</div>
</main>
</Layout>
Problèmes Courants sur Windows
Problème 1 : npm error ERR_INVALID_ARG_TYPE
Solution : Utiliser pnpm au lieu de npm
npm install -g pnpm
pnpm install
Problème 2 : Erreur de permissions
Solution : Lancer PowerShell en administrateur
- Clic droit sur PowerShell → "Exécuter en tant qu'administrateur"
Problème 3 : Scripts désactivés
Erreur : cannot be loaded because running scripts is disabled
Solution :
# Lancer PowerShell en administrateur
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
Problème 4 : Chemins avec espaces
Mauvais :
cd C:\Users\Nom Prénom\Mon Projet
Bon :
cd "C:\Users\Nom Prénom\Mon Projet"
Problème 5 : Port 4321 déjà utilisé
Solution : Changer le port dans astro.config.mjs :
export default defineConfig({
server: { port: 3000 },
integrations: [tailwind()],
});
Structure de Projet Recommandée
mon-site/
├── public/ # Assets statiques (images, fonts)
│ └── favicon.svg
├── src/
│ ├── layouts/
│ │ └── Layout.astro # Layout principal
│ ├── components/
│ │ ├── Header.astro
│ │ ├── Footer.astro
│ │ └── Button.astro
│ ├── pages/
│ │ ├── index.astro # Page d'accueil (/)
│ │ ├── about.astro # Page à propos (/about)
│ │ └── contact.astro # Page contact (/contact)
│ └── styles/
│ └── global.css # CSS global + Tailwind
├── astro.config.mjs # Config Astro
├── tailwind.config.mjs # Config Tailwind
├── package.json
└── tsconfig.json
Commandes Essentielles
| Commande | Description |
|---|---|
pnpm run dev |
Lancer serveur développement |
pnpm run build |
Build pour production |
pnpm run preview |
Prévisualiser le build |
pnpm astro add [integration] |
Ajouter une intégration |
pnpm astro check |
Vérifier erreurs TypeScript |
Intégrations Utiles
Ajouter React
pnpm astro add react
Ajouter Markdown
pnpm astro add mdx
Ajouter Sitemap
pnpm astro add sitemap
Hot Tips Windows
Utilisez Windows Terminal au lieu de PowerShell classique
- Téléchargez depuis Microsoft Store
- Meilleure expérience de développement
Utilisez VS Code avec l'extension Astro officielle
- Extension : "Astro" (officielle)
- Coloration syntaxique + autocomplete
Git Bash comme alternative
- Si vous préférez les commandes Linux-style
- Inclus avec Git for Windows
WSL2 pour un environnement Linux
- Plus stable pour le développement
- Installation :
wsl --install
Checklist de Vérification
Avant de commencer à développer :
- Node.js ≥18 installé
- pnpm installé globalement
- Projet Astro créé
- Tailwind CSS intégré
- Serveur dev lance sans erreur (
pnpm run dev) - http://localhost:4321 accessible
- VS Code + Extension Astro installés
- Git initialisé (optionnel mais recommandé)