Si vous souhaitez styliser vos applications avec un framework rapide, flexible et fiable, Tailwind CSS est une excellente option. Tailwind est un framework CSS qui vous aide à concevoir des composants web personnalisés. Vous pouvez concevoir des composants sans avoir à passer d’un fichier HTML à un fichier CSS.
Contrairement à Bootstrap, Tailwind n’a pas de classes prédéfinies. Au lieu de cela, vous devez personnaliser les vôtres. Avec Tailwind, vous pouvez construire des composants complexes avec des utilitaires primitifs, des fonctions et des directives.
Apprenez à installer et à utiliser Tailwind pour créer des interfaces utilisateur étonnantes dans vos projets Next.js.
Installer Tailwind CSS dans Next.js
Commencez par installer Tailwind dans une application Next.js. Le processus est similaire à l’installation de Tailwind dans une application React, avec une petite différence dans le processus de configuration.
Allez sur la page d’installation de Tailwind CSS. Puis allez à la page Guides du cadre section et sélection Suivant.js. Cette section contient toutes les instructions dont vous avez besoin pour configurer Tailwind dans votre projet Next.js.
Pour installer Tailwind via npm, le gestionnaire de paquets JavaScript, lancez ces deux commandes dans le terminal :
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Ces commandes créent deux fichiers de configuration nommés tailwind.config.js et postcss.config.js dans le dossier racine du projet. Ces fichiers indiquent que TailwindCSS a été installé avec succès. Vous pouvez également installer Tailwind CSS via l’interface de commande Tailwind ou en tant que plugin PostCSS.
Configurer les modèles
Après l’installation, vous devez configurer les chemins des modèles fournis dans le guide d’installation dans le fichier de configuration de votre application. Ajoutez le code suivant au fichier tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Ajouter la directive Tailwind à l’application
Ensuite, ajoutez les directives Tailwind suivantes au fichier CSS de votre application. Il s’agit du fichier nommé global.css. Vous devez supprimer le contenu du fichier global.css et ajouter les directives Tailwind.
@tailwind base;
@tailwind components;
@tailwind utilities;
Exécuter le processus de construction
Maintenant, dans le terminal, lancez l’outil CLI avec la commande suivante :
npm run dev
Cette commande recherche les classes dans les fichiers de votre modèle et construit votre CSS. Elle ouvrira un port pour que vous puissiez voir le navigateur.
Maintenant, si vous naviguez vers le serveur à l’adresse http://localhost:3000 vous verrez votre application. Vous devriez remarquer un léger changement dans le contenu. Cela indique que le processus d’installation a réussi et que Tailwind CSS est en ligne.
Utiliser Tailwind dans le projet
Ensuite, testons les fonctionnalités CSS de Tailwind en appliquant des classes à votre projet. Par exemple, vous avez une application avec le texte « Hello Tailwind ». Vous souhaitez lui donner une couleur rouge sur un fond bleu clair.
Créer une Home.tsx puis ajoutez le code suivant :
export default function Home() {
return (
<body className="bg-blue-300">
<h1 className='text-red-900'>Hello Tailwind CSS</h1>
</body>
);
}
Maintenant, lorsque vous naviguez dans le navigateur, vous verrez que le texte est devenu rouge et que l’arrière-plan est bleu.
Vous pouvez explorer d’autres fonctionnalités CSS de Tailwind pour styliser d’autres composants de votre application. Les modificateurs conditionnels vous permettent de créer des états réactifs tels que hover et focus. Vous pouvez également personnaliser vos pages en mode sombre ou clair selon les préférences de l’utilisateur.
Avantages de l’utilisation de Tailwind CSS
Fabriqué par Adam Wathan en 2017, Tailwind CSS diffère des autres bibliothèques CSS à bien des égards. Elle a un temps d’exécution nul, ce qui la rend rapide comme l’éclair. Et elle est facile à installer. Tailwind analyse tous les fichiers HTML et les composants JavaScript à la recherche de noms de classes sur votre application. Il génère ensuite les styles correspondants qui conçoivent les éléments.
Tailwind CSS vous permet de concevoir des composants complexes à partir d’utilitaires primitifs. Vous pouvez réutiliser les styles entre les composants et utiliser des modificateurs pour styliser des interfaces utilisateur réactives. Suivez les étapes ci-dessous pour apprendre à installer et à utiliser Tailwind CSS afin de personnaliser des applications qui correspondent à votre marque.
