Créer un projet React TypeScript avec Tailwind
npm create vite@latest mon-projet -- --template react-ts
Entrer dans le projet et initialiser
cd mon-projet
npm install
Installer Tailwind CSS
npm install -D tailwindcss postcss autoprefixer prettier eslint-config-prettier eslint-plugin-react
Initialiser Tailwind
npx tailwindcss init -p
Modifier le fichier tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
      content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}", 
      ],
      theme: {
        extend: {},
      },
      plugins: [],
    }
Remplacer index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
    
Ajout fichier Eslint/Prettier
touch .eslintrc.js .prettierrc
    
Fichier config pour Eslint

    /*.eslintrc.js*/
    module.exports = {
      env: {
        browser: true,
        es2021: true,
      },
      extends: [
        'eslint:recommended',
        'plugin:react/recommended',
        'plugin:react/jsx-runtime', // Ajout pour React 18+
        'plugin:react-hooks/recommended', // Ajout explicite des hooks rules
        'plugin:@typescript-eslint/recommended',
        'prettier',
      ],
      parser: '@typescript-eslint/parser',
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
        ecmaVersion: 'latest', // Plus moderne que 12
        sourceType: 'module',
      },
      plugins: ['react', '@typescript-eslint', 'react-hooks'],
      rules: {
        'react/react-in-jsx-scope': 'off',
        'react-hooks/rules-of-hooks': 'error', // Vérifie les règles des Hooks
        'react-hooks/exhaustive-deps': 'warn', // Vérifie les dépendances des effets
        'react/prop-types': 'off', // Off car vous utilisez TypeScript
      },
      settings: {
        react: {
          version: 'detect',
        },
      },
    };
    
Fichier config Prettier
{
      "semi": true,
      "tabWidth": 2,
      "printWidth": 100,
      "singleQuote": true,
      "trailingComma": "all",
      "jsxSingleQuote": true,
      "bracketSpacing": true
    }
    
Note :

2 fichiers tsconfig.app.json et tsconfig.node.json sont créés. On peut supprimer tsconfig.node.json pour une utilisation sans backend.

tsconfig.json :

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" }
  ]
}

tsconfig.app.json :

{
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

  },
  "include": ["src"]
}
shadcn/ui
Modifier tsconfig.json
{
        "files": [],
        "references": [
          {
            "path": "./tsconfig.app.json"
          },
          {
            "path": "./tsconfig.node.json"
          }
        ],
        "compilerOptions": {
          "baseUrl": ".",
          "paths": {
            "@/*": ["./src/*"]
          }
        }
      }
      
Et ensuite le fichier tsconfig.app.json
{
        "compilerOptions": {
          // ...
          "baseUrl": ".",
          "paths": {
            "@/*": [
              "./src/*"
            ]
          }
          // ...
        }
      }      
      
Installer
npm install -D @types/node
Ajouter les lignes a vite.config.ts
import path from "path"
      import react from "@vitejs/plugin-react"
      import { defineConfig } from "vite"
      
      export default defineConfig({
        plugins: [react()],
        resolve: {
          alias: {
            "@": path.resolve(__dirname, "./src"),
          },
        },
      })          
      
Installer shadcn
npx shadcn@latest init
configurer en répondant
Which style would you like to use? › New York
      Which color would you like to use as base color? › Zinc
      Do you want to use CSS variables for colors? › no / yes
      
exemple pour ajouter un composant
npx shadcn@latest add button