
Créez un nouveau projet Vite + React v19 + TailwindCSS v4. Official doc
pnpm create vite my-app
# 1. React
# 2. TypeScript + SWC
cd my-app
# dépendances
pnpm add -D tailwindcss @tailwindcss/vite prettier-plugin-tailwindcss
pnpm add pentatrion-design
Supprimer les fichiers inutiles
.
└── src
├── App.tsx
├── index.css
├── main.tsx
└── vite-env.d.ts
Configuration de vite
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
plugins: [react(), tailwindcss()],
});
Mettre à jour le fichier src/index.css
/* src/index.css */
@import "tailwindcss";
@source "./node_modules/pentatrion-design/dist/lib";
@source "./node_modules/pentatrion-design/dist/components";
@source "./node_modules/pentatrion-design/dist/hooks";
@source "./node_modules/pentatrion-design/dist/redux";
@import "pentatrion-design/tailwind/index.css";
/* facultatif */
@import "pentatrion-design/tailwind/prose.css";
si on désire plus de contrôle sur nos imports
/* src/index.css */
@import "tailwindcss";
@source "./node_modules/pentatrion-design/dist/lib";
@source "./node_modules/pentatrion-design/dist/components";
@source "./node_modules/pentatrion-design/dist/hooks";
@source "./node_modules/pentatrion-design/dist/redux";
@import "pentatrion-design/tailwind/variants.css";
@import "pentatrion-design/tailwind/theme.css" layer(theme);
@import "pentatrion-design/tailwind/base.css" layer(base);
@import "pentatrion-design/tailwind/components-input-outline.css" layer(components);
@import "pentatrion-design/tailwind/components-range.css" layer(components);
@import "pentatrion-design/tailwind/components-resize-area.css" layer(components);
@import "pentatrion-design/tailwind/components-step.css" layer(components);
@import "pentatrion-design/tailwind/components.css" layer(components);
@import "pentatrion-design/tailwind/utilities.css";
@import "pentatrion-design/tailwind/utilities-dialog.css" layer(utilities);
@import "pentatrion-design/tailwind/prose.css";
// .prettierrc
{
"plugins": ["prettier-plugin-tailwindcss"]
}
La dépendance pentatrion-fonts
est optionnelle.
Mettre à jour src/App.tsx
import { Button } from "pentatrion-design/button";
import { useState } from "react"
function App() {
const [counter, setCounter] = useState(0);
return (
<div className="flex flex-col gap-2 items-center">
<h1 className="text-gray-6">Vite + React</h1>
<Button onClick={() => setCounter(c => c + 1)}>Click me !</Button>
<p>{counter}</p>
</div>
)
}
export default App
Create a .vscode/settings.json
file
{
"files.associations": {
"*.css": "tailwindcss"
}
}
anciennement dans le package.json
. plus nécessaire pour le moment
{
"scripts": {
"dev:tsc": "tsc -w -p tsconfig.build.json",
"dev:alias": "tsc-alias -w -p tsconfig.build.json",
"dev": "run-p dev:tsc dev:alias",
}
}
fichier tsconfig.json
.
{
"compilerOptions": {
"paths": {
"pentatrion-design/*": ["./*"]
},
}
}