Guide d'installation Astro + Tailwind sur Windows. Covers Node.js setup, pnpm, project creation, common Windows issues, and troubleshooting.
Guides Windows setup for Astro with Tailwind, covering Node.js, pnpm, project creation, and troubleshooting.
/plugin marketplace add theflysurfer/claude-skills-marketplace/plugin install theflysurfer-claude-skills-marketplace@theflysurfer/claude-skills-marketplaceThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Testé sur : Windows 10/11, Node.js 23.7.0
node --version
# Doit afficher v18+ ou v20+ ou v22+
Important : Sur Windows, pnpm est plus fiable que npm.
# Installer pnpm globalement
npm install -g pnpm
# Vérifier
pnpm --version
# 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
cd mon-site
pnpm astro add tailwind
# Accepter toutes les modifications (tapez "y")
pnpm run dev
Le site sera accessible sur http://localhost:4321
mkdir mon-site
cd mon-site
pnpm init
pnpm add astro @astrojs/tailwind tailwindcss
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: [],
}
mkdir -p src/pages
mkdir -p src/layouts
mkdir -p src/components
mkdir -p src/styles
mkdir public
src/styles/global.css :
@tailwind base;
@tailwind components;
@tailwind utilities;
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>
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>
npm error ERR_INVALID_ARG_TYPESolution : Utiliser pnpm au lieu de npm
npm install -g pnpm
pnpm install
Solution : Lancer PowerShell en administrateur
Erreur : cannot be loaded because running scripts is disabled
Solution :
# Lancer PowerShell en administrateur
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
Mauvais :
cd C:\Users\Nom Prénom\Mon Projet
Bon :
cd "C:\Users\Nom Prénom\Mon Projet"
Solution : Changer le port dans astro.config.mjs :
export default defineConfig({
server: { port: 3000 },
integrations: [tailwind()],
});
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
| 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 |
pnpm astro add react
pnpm astro add mdx
pnpm astro add sitemap
Utilisez Windows Terminal au lieu de PowerShell classique
Utilisez VS Code avec l'extension Astro officielle
Git Bash comme alternative
WSL2 pour un environnement Linux
wsl --installAvant de commencer à développer :
pnpm run dev)This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.