Bienvenue sur Panda 🐼
Installation
Pour installer PandaCSS, il faut aller sur la documentation officiel de PandaCSS.
(Et si on passe par Vite, il faut se rendre ici).
Steps
1/ npm install -D @pandacss/dev
2/ npx panda init --postcss
3/ Il faut mettre à jour le package.json pour ajouter le script suivant :
"scripts": {
+ "prepare": "panda codegen",
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
}
4/ Il demande de vérifier si le fichier panda.config.mjs possède bien la ligne suivante :
// Ici, ./src/**/*.css est le chemin de votre fichier CSS avec * qui signifie que tous les fichiers CSS seront compilés
include: ["./src/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"],
5/ Et voilà ! vous pouvez commencer à utiliser PandaCSS.
De la documentation
Si vous avez besoin de comprendre ce que possède PandaCSS, vous pouvez vous rendre sur la documentation
Pour allez plus loin, n’hésitez pas à consulter des ressources 🚀
📚 Article de blog
Panda-CSS 🐼: Unleashing Power 🦸 and Efficiency 🤖 in Styling 💃. Pt. 2
Comment ça fonctionne ?
Installation
npm install
Start
npm run dev