Si vous souhaitez styliser vos applications avec un cadre 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 à basculer entre les fichiers HTML et CSS.

Contrairement à Bootstrap, Tailwind n'a pas de classes prédéfinies. Au lieu de cela, vous pouvez personnaliser le vôtre. Avec Tailwind, vous pouvez créer des composants complexes avec des utilitaires, des fonctions et des directives primitifs.

Découvrez comment 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 à installer Tailwind dans une application React, avec une petite différence dans le processus de configuration.

Allez à la Installation CSS Tailwind page. Allez ensuite au Guides du cadre section et sélectionnez 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 packages JavaScript, exécutez ces deux commandes de terminal :

npm install -D tailwindcss préfixe automatique postcss
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 la CLI Tailwind ou en tant que plug-in PostCSS.

Configurer les modèles

Après l'installation, vous devez configurer les chemins d'accès aux 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:

/** @taper {import('tailwindcss').Config}*/
module.exports = {
 contenu: [ 
"./app/**/*.{js, ts, jsx, tsx}",
"./pages/**/*.{js, ts, jsx, tsx}",
"./composants/**/*.{js, ts, jsx, tsx}",
// Ou si vous utilisez le répertoire `src`: 
"./src/**/*.{js, ts, jsx, tsx}",
 ],
 thème: { 
 étendre: {},
 },
 plugins: [],
}

Ajouter la directive Tailwind à l'application

Ensuite, ajoutez les directives Tailwind suivantes au fichier CSS de votre application. C'est le fichier nommé global.css. Vous devez supprimer le contenu du fichier global.css et ajouter les directives Tailwind.

@base de vent arrière ;
@composants tailwind ;
utilitaires @tailwind ;

Exécuter le processus de génération

Maintenant, sur le terminal, exécutez l'outil CLI avec la commande suivante :

npm run dev

Cette commande analyse vos fichiers de modèle pour les classes et construit votre CSS. Il ouvrira un port pour que vous puissiez voir le navigateur.

Maintenant, si vous naviguez vers le serveur à http://localhost: 3000 vous verrez votre application. Vous devriez remarquer un léger changement dans le contenu. Cela indique que le processus d'installation est un succès 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 voulez lui donner une couleur rouge avec un fond bleu clair.

Créer un Accueil.tsx fichier puis ajoutez le code suivant :

exporterdéfautfonctionMaison() {
retour (
"bg-bleu-300">
'texte-rouge-900'>Bonjour Tailwind CSS</h1>
 </body>
 );
} 

Maintenant, lorsque vous accédez au navigateur, vous verrez le texte changé en rouge et l'arrière-plan est bleu.

Vous pouvez explorer d'autres fonctionnalités CSS Tailwind pour styliser d'autres composants de votre application. Les modificateurs conditionnels vous permettent de créer des états réactifs comme le survol et le focus. Vous pouvez également personnaliser vos pages en modes sombre et clair selon les préférences de l'utilisateur.

Avantages de l'utilisation de Tailwind CSS

Créé par Adam Wathan en 2017, Tailwind CSS diffère des autres bibliothèques CSS à bien des égards. Il n'a aucun temps d'exécution, ce qui le rend rapide comme l'éclair. Et est facile à installer. Tailwind analyse tous les fichiers HTML et les composants JavaScript à la recherche de noms de classe 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 les interfaces utilisateur réactives. Suivez les étapes ici pour apprendre à installer et à utiliser Tailwind CSS pour personnaliser les applications qui correspondent à votre marque.