TailwindCSS
TailwindCSS
Introduction à TailwindCSS
TailwindCSS est un framework CSS qui a pris de l'ampleur grâce à son approche "utility-first". Contrairement aux frameworks traditionnels qui proposent des composants prédéfinis, Tailwind permet aux développeurs de construire rapidement des interfaces personnalisées sans quitter leur HTML.
Historique et philosophie
Tailwind a été créé par Adam Wathan et a été officiellement lancé en novembre 2017. L'idée était de fournir un ensemble de classes utilitaires atomiques qui peuvent être combinées pour créer n'importe quel design directement dans le balisage HTML. Cette approche vise à réduire le temps passé à passer d'un fichier CSS à un fichier HTML et à augmenter la cohérence du design sur toute l'interface.
Comparaison avec Bootstrap
Bootstrap est l'un des frameworks CSS les plus populaires et utilise une approche basée sur des composants prédéfinis. Voici quelques différences clés entre Bootstrap et TailwindCSS :
- Approche de conception : Bootstrap utilise des composants prédéfinis, tandis que Tailwind adopte une approche "utility-first" qui encourage la composition de classes utilitaires pour créer des styles uniques.
- Personnalisation : Avec Bootstrap, personnaliser des composants peut nécessiter de surcharger des styles, tandis que Tailwind est conçu pour être entièrement personnalisé via le fichier de configuration.
Exemples pratiques
Dans cette section, nous allons voir comment utiliser TailwindCSS pour créer des éléments d'interface courants.
Bouton
Voici un exemple de comment créer un bouton simple avec TailwindCSS :
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Bouton
</button>
Navbar
Pour une barre de navigation (navbar), TailwindCSS permet de construire quelque chose comme ceci :
<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
<div class="flex items-center flex-shrink-0 text-white mr-6">
<span class="font-semibold text-xl tracking-tight">MonSite</span>
</div>
<!-- Reste de la navbar -->
</nav>
Formulaire
Créer un formulaire simple avec TailwindCSS pourrait ressembler à cela :
Installation de TailwindCSS avec Vite
Pour intégrer TailwindCSS dans un projet Vite, suivez les étapes suivantes :
Installation des dépendances
Ouvrez votre terminal et exécutez :
npm install tailwindcss @tailwindcss/vite
- Documentation d’installation : https://tailwindcss.com/docs/installation/using-vite
Ajout de l’import de Tailwind dans le CSS
Dans votre fichier ./src/assets/main.css, remplacez le contenu du fichier par les directives de Tailwind suivantes :
@import "tailwindcss";
Avec ces étapes, vous aurez intégré TailwindCSS dans votre projet Vite et serez prêt à construire votre interface avec une flexibilité et une personnalisation accrues.
Intégration de Tailwind CSS dans l'application
Modification du fichier vite.config.js
-
Ouvrez le fichier
vite.config.jssitué à la racine du projet. -
Importez le plugin Tailwind CSS en modifiant le fichier comme ceci :
import { defineConfig } from 'vite'
// ...
import tailwindcss from '@tailwindcss/vite' // importez le plugin
export default defineConfig({
// ...
plugins: [
tailwindcss(), // ajouté le plugin à la liste
],
})
Modification du fichier App.vue
-
Ouvrez le fichier
App.vuesitué dans le répertoiresrc. -
Remplacez le contenu existant du fichier par le code suivant :
<script setup>
import { ref } from 'vue';
// État pour le menu de navigation
const isNavOpen = ref(false);
const toggleNav = () => {
isNavOpen.value = !isNavOpen.value;
};
</script>
<template>
<div class="flex flex-col h-full">
<header>
<!-- Barre de navigation fixe -->
<nav class="bg-gray-800 text-white p-4 fixed w-full top-0 z-50">
<div class="container mx-auto flex justify-between items-center">
<a class="text-lg font-bold" href="#">Fixed navbar</a>
<button
class="md:hidden p-2"
@click="toggleNav"
aria-label="Toggle navigation"
>
<span class="material-icons">menu</span>
</button>
<div :class="{'hidden': !isNavOpen, 'flex': isNavOpen}" class="w-full md:flex md:w-auto">
<ul class="md:flex md:space-x-4">
<li>
<a class="block p-2 hover:bg-gray-700" href="#">Home</a>
</li>
<li>
<a class="block p-2 hover:bg-gray-700" href="#">Link</a>
</li>
<li>
<a class="block p-2 text-gray-500 cursor-not-allowed" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="flex mt-4 md:mt-0">
<input
class="form-input px-4 py-2 border rounded-lg md:mr-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button class="bg-transparent text-white border border-white px-4 py-2 ml-2 rounded-lg hover:bg-white hover:text-gray-800" type="submit">
Search
</button>
</form>
</div>
</div>
</nav>
</header>
<!-- Contenu principal de la page -->
<main class="flex-shrink-0 pt-24 pb-5">
<div class="container mx-auto px-4">
<h1 class="text-3xl font-bold mt-5">Sticky footer with fixed navbar</h1>
<p class="text-lg mt-4">
Fixez un pied de page au bas de la fenêtre dans les navigateurs de bureau avec
ce code HTML et CSS personnalisé. Une barre de navigation fixe a été ajoutée avec un <code class="font-mono bg-gray-200 px-1 py-0.5 rounded">padding-top: 60px;</code>
sur le <code class="font-mono bg-gray-200 px-1 py-0.5 rounded">main > .container</code>.
</p>
</div>
</main>
<!-- Pied de page -->
<footer class="bg-gray-100 mt-auto py-3">
<div class="container mx-auto px-4">
<span class="text-gray-600">Place sticky footer content here.</span>
</div>
</footer>
</div>
</template>
<style>
#app {
height: 100vh;
}
</style>
Ce code crée une structure de base pour notre application en utilisant les classes CSS de Tailwind. Il comprend une barre de navigation (nav), une section principale (main) et un pied de page (footer).
Ressources :