React Tailwindcss
React + Tailwind CSS + Bun + Vite
React + TypeScript + Vite + TailwindCSS
https://tailwindcss.com/docs/installation/using-vite
- Création du projet avec Bun + Vite :
$ bun create vite helloworld
$ cd helloworld
- Ajout des dépendances NPM :
$ bun install tailwindcss @tailwindcss/vite @tailwindcss/cli
- Ajout de Tailwind aux plugins Vite (
./vite.config.css)
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
plugins: [react(), tailwindcss()]
});
- Création du fichier
./src/styles.css
@import "tailwindcss";
- Suppression des fichiers CSS générés par défaut à la création du projet :
./src/index.csset./src/App.css
- Suppression de la référence au fichier
./src/index.cssdans./src/main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)
- Suppression de la référence au fichier
./src/App.cssdans./src/App.tsx
function App() {
return (
<>
<h1 className="text-3xl font-bold underline">Hello world!</h1>
</>
);
}
export default App;
- Adaptation de
./index.html, intégration d'une balise link dans la balise head pour faire référence au nouveau fichier CSS./src/styles.css:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link href="/src/styles.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
--
Alexandre Leroux
Enseignant / Formateur
Développeur logiciel web & mobile
Nancy (Grand Est, France)
