Consultez notre guide vid\u00e9o sur l’utilisation de Tailwind CSS pour la construction de sites web<\/a> :<\/strong> Tailwind CSS est un framework utility-fist CSS (feuilles de style en cascade)<\/a> avec des classes pr\u00e9d\u00e9finies que vous pouvez utiliser pour construire et concevoir des pages web directement dans votre balisage. Il vous permet d’\u00e9crire du CSS dans votre HTML sous la forme de classes pr\u00e9d\u00e9finies.<\/p>\n Nous allons d\u00e9finir ce qu’est un framework et ce que nous entendons par \u00ab utility-first CSS \u00bb\u00a0pour vous aider \u00e0 mieux comprendre ce qu’est Tailwind CSS.<\/p>\n En tant que terme g\u00e9n\u00e9ral de programmation, un framework<\/a> est un outil qui fournit des composants r\u00e9utilisables et pr\u00eats \u00e0 l’emploi construits \u00e0 partir des fonctionnalit\u00e9s d’un outil d\u00e9j\u00e0 existant. L’objectif g\u00e9n\u00e9ral de la cr\u00e9ation de frameworks est d’augmenter la vitesse de d\u00e9veloppement en faisant moins de travail.<\/p>\n Maintenant que nous avons \u00e9tabli la signification d’un framework, cela devrait vous aider \u00e0 comprendre que Tailwind CSS est un outil construit \u00e0 partir des fonctionnalit\u00e9s CSS. Toutes les fonctionnalit\u00e9s du framework sont d\u00e9riv\u00e9es des styles CSS compos\u00e9s en tant que classes.<\/p>\n Lorsque nous disons \u00ab utility-first CSS \u00bb, nous faisons r\u00e9f\u00e9rence \u00e0 des classes dans notre balisage (HTML)<\/a> avec des fonctionnalit\u00e9s pr\u00e9d\u00e9finies. Cela implique que vous n’avez qu’\u00e0 \u00e9crire une classe \u00e0 laquelle sont attach\u00e9s des styles pr\u00e9d\u00e9finis, et ces styles seront appliqu\u00e9s \u00e0 l’\u00e9l\u00e9ment.<\/p>\n Dans le cas o\u00f9 vous travaillez avec le CSS vanilla (CSS sans framework ou biblioth\u00e8que), vous donnerez d’abord un nom de classe \u00e0 votre \u00e9l\u00e9ment, puis vous attacherez diff\u00e9rentes propri\u00e9t\u00e9s et valeurs \u00e0 cette classe, qui, \u00e0 son tour, appliquera un style \u00e0 votre \u00e9l\u00e9ment.<\/p>\n Nous allons vous montrer un exemple. Ici, nous allons cr\u00e9er un bouton avec des coins arrondis et un texte qui dit \u00ab Clic me \u00bb Voici \u00e0 quoi ressemblera le bouton :<\/p>\n Nous allons d’abord faire cela en utilisant le CSS vanilla, puis en utilisant les classes utilitaires disponibles dans le CSS Tailwind.<\/p>\n Nous avons donn\u00e9 aux balises de bouton la classe Tout ceci est n\u00e9cessaire pour obtenir le m\u00eame effet que l’exemple avec le CSS vanilla. Aucune feuille de style externe o\u00f9 vous devez \u00e9crire les styles n’a \u00e9t\u00e9 cr\u00e9\u00e9e car chaque nom de classe que nous avons utilis\u00e9 poss\u00e8de d\u00e9j\u00e0 un style pr\u00e9d\u00e9fini.<\/p>\n Avant d’utiliser Tailwind CSS, il y a quelques conditions pr\u00e9alables que vous devez envisager de r\u00e9unir pour utiliser les fonctionnalit\u00e9s du framework sans difficult\u00e9s. En voici quelques-unes :<\/p>\n Vous pouvez utiliser Tailwind CSS dans des projets web frontend, notamment dans des frameworks JavaScript tels que React.js<\/a>, Next.js<\/a>, Laravel<\/a>, Vite, Gatsby, etc.<\/p>\n Voici quelques-uns des avantages de l’utilisation de Tailwind CSS:<\/p>\n Voici quelques-uns des inconv\u00e9nients de l’utilisation de Tailwind CSS:<\/p>\n Tailwind CSS est utilis\u00e9 de pr\u00e9f\u00e9rence pour acc\u00e9l\u00e9rer le processus de d\u00e9veloppement en \u00e9crivant moins de code. Il est livr\u00e9 avec un syst\u00e8me de conception qui aide \u00e0 maintenir la coh\u00e9rence entre les diverses exigences de conception telles que le remplissage, l’espacement, et ainsi de suite ; avec cela, vous n’avez pas \u00e0 vous soucier de cr\u00e9er vos syst\u00e8mes de conception.<\/p>\n Vous pouvez \u00e9galement utiliser Tailwind CSS si vous cherchez \u00e0 utiliser un framework facilement configurable, car il ne vous oblige pas \u00e0 utiliser les composants (barres de navigation, boutons, formulaires<\/a>, etc.) de la m\u00eame mani\u00e8re \u00e0 chaque fois ; vous pouvez choisir l’apparence de vos composants. Mais vous ne devriez jamais utiliser Tailwind si vous n’avez pas appris et pratiqu\u00e9 le CSS.<\/p>\n Voici quelques similitudes :<\/p>\n Voyons maintenant quelques diff\u00e9rences :<\/p>\n Avant d’installer Tailwind CSS et de l’int\u00e9grer \u00e0 votre projet, assurez-vous que :<\/p>\n Voici \u00e0 quoi ressemble la structure de notre projet pour le moment :<\/p>\n Ensuite, d\u00e9marrez un terminal pour votre projet et ex\u00e9cutez les commandes suivantes :<\/p>\n La commande ci-dessus installera le framework CSS Tailwind en tant que d\u00e9pendance. Ensuite, g\u00e9n\u00e9rez votre fichier tailwind.config.js en ex\u00e9cutant la commande ci-dessous :<\/p>\n Le fichier tailwind.config.js sera vide lors de sa cr\u00e9ation, nous devons donc ajouter quelques lignes de code:<\/p>\n Les chemins de fichier fournis dans le tableau de contenu permettront \u00e0 Tailwind de purger\/supprimer tout style inutilis\u00e9 lors de la construction.<\/p>\n La prochaine chose \u00e0 faire est d’ajouter les directives \u00ab\u00a0@tailwind\u00a0\u00bb \u00e0 votre fichier CSS dans le dossier src<\/strong> – c’est l\u00e0 que Tailwind g\u00e9n\u00e8re tous ses styles utilitaires pr\u00e9d\u00e9finis pour vous :<\/p>\n La derni\u00e8re chose \u00e0 faire est de lancer le processus de construction en ex\u00e9cutant cette commande dans votre terminal :<\/p>\n Dans le code ci-dessus, nous indiquons \u00e0 Tailwind que notre fichier d’entr\u00e9e est la feuille de style dans le dossier src et que les styles que nous avons utilis\u00e9s doivent \u00eatre int\u00e9gr\u00e9s dans le fichier de sortie dans le dossier public. Maintenant que nous avons install\u00e9 et configur\u00e9 Tailwind CSS pour notre projet, voyons quelques exemples pour comprendre pleinement son application.<\/p>\n Pour utiliser flex<\/a> dans Tailwind CSS, vous devez ajouter une classe de flex et ensuite la direction des \u00e9l\u00e9ments flex :<\/p>\n L’utilisation de Tout comme l’exemple pr\u00e9c\u00e9dent, Lorsque nous sp\u00e9cifions des colonnes et des lignes dans le syst\u00e8me de grille, nous adoptons une approche diff\u00e9rente en passant dans un nombre qui d\u00e9terminera comment les \u00e9l\u00e9ments occuperont l’espace disponible :<\/p>\n Tailwind est livr\u00e9 avec un grand nombre de couleurs pr\u00e9d\u00e9finies. Chaque couleur poss\u00e8de un ensemble de variations diff\u00e9rentes, la variation la plus claire \u00e9tant de 50 et la plus fonc\u00e9e de 900.<\/p>\n Voici une image de plusieurs couleurs et de leurs codes hexagonaux HTML<\/a> pour illustrer ceci<\/p>\n Nous allons vous donner un exemple de la fa\u00e7on dont vous pouvez proc\u00e9der en utilisant la couleur rouge ci-dessus pour donner une couleur d’arri\u00e8re-plan\u00a0\u00e0 un \u00e9l\u00e9ment de bouton :<\/p>\n Cette syntaxe est la m\u00eame pour toutes les couleurs dans Tailwind, \u00e0 l’exception du noir et du blanc, qui s’\u00e9crivent de la m\u00eame mani\u00e8re mais sans l’utilisation de chiffres Pour ajouter une couleur de texte, vous utilisez la classe Tailwind dispose d\u00e9j\u00e0 d’un syst\u00e8me de conception qui vous aiderait \u00e0 conserver une \u00e9chelle coh\u00e9rente dans vos conceptions. Il vous suffit de conna\u00eetre la syntaxe d’application de chaque utilitaire.<\/p>\n Les utilitaires suivants permettent d’ajouter du padding \u00e0 vos \u00e9l\u00e9ments :<\/p>\n Pour les appliquer \u00e0 vos \u00e9l\u00e9ments, vous devrez utiliser les num\u00e9ros appropri\u00e9s fournis par Tailwind – un peu comme les num\u00e9ros qui repr\u00e9sentaient les variantes de couleur dans la derni\u00e8re section. Voici ce que nous voulons dire :<\/p>\n Les utilitaires pr\u00e9d\u00e9finis pour le padding et la marge sont tr\u00e8s similaires. Vous devez remplacer le M\u00eame si Tailwind CSS dispose de nombreux utilitaires et syst\u00e8mes de conception d\u00e9j\u00e0 construits pour vous, il est toujours possible que vous ayez une fonctionnalit\u00e9 particuli\u00e8re que vous aimeriez ajouter pour \u00e9tendre ce pour quoi Tailwind peut \u00eatre utilis\u00e9. Tailwind CSS nous permet de le faire en cr\u00e9ant une extension.<\/p>\n Mettons les mains dans le cambouis en cr\u00e9ant une extension\u00a0qui ajoute la couleur aqua et un utilitaire de rotation qui fait pivoter un \u00e9l\u00e9ment de 150\u00ba sur l’axe des X. Nous allons cr\u00e9er ces utilitaires dans le fichier tailwind.config.js<\/strong> en utilisant un peu de JavaScript<\/a>.<\/p>\n Maintenant, d\u00e9composons tout cela. La premi\u00e8re chose que nous avons faite est d’importer la fonction plugin de Tailwind :<\/p>\n Ensuite, nous avons cr\u00e9\u00e9 nos extensions dans le tableau des extensions :<\/p>\n Vous devrez peut-\u00eatre r\u00e9-ex\u00e9cuter le script de construction apr\u00e8s avoir cr\u00e9\u00e9 votre extension.<\/p>\n Maintenant que les extensions sont pr\u00eates, nous pouvons les tester :<\/p>\n Si vous avez tout fait correctement, vous devriez avoir un bouton de couleur aqua avec le texte tourn\u00e9 \u00e0 150\u00ba sur l’axe X.<\/p>\n\n
\nQu’est-ce que Tailwind CSS ?<\/h2>\n
![\"Tailwind](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/01\/tailwind-css-homepage-1024x472.png\")
Qu’est-ce qu’un framework ?<\/h2>\n
Qu’est-ce qu’un framework CSS utility-first ?<\/h2>\n
![\"Notre](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/01\/button.png\")
Avec Vanilla CSS<\/h3>\n
<button class=\"btn\">Click me<\/button><\/code><\/pre>\nbtn<\/code>, qui sera stylis\u00e9e \u00e0 l’aide d’une feuille de style externe. C’est-\u00e0-dire :<\/p>\n.btn {\n background-color: #000;\n color: #fff;\n padding: 8px;\n border: none;\n border-radius: 4px;\n}<\/code><\/pre>\nAvec Tailwind CSS<\/h3>\n
<button class=\"bg-black text-white p-2 rounded\">Click me<\/button><\/code><\/pre>\nPr\u00e9-requis \u00e0 l’utilisation de Tailwind CSS<\/h2>\n
\n
O\u00f9 peut-on utiliser Tailwind CSS ?<\/h3>\n
Avantages et inconv\u00e9nients de Tailwind CSS<\/h3>\n
\n
\n
Quand utiliser Tailwind CSS<\/h3>\n
Similitudes et diff\u00e9rences entre Tailwind CSS et les autres frameworks CSS<\/h3>\n
\n
\n
Comment commencer \u00e0 utiliser Tailwind CSS<\/h2>\n
\n
-Tailwind-tutorial\n -public\n -index.html\n -styles.css\n -src\n -styles.css<\/code><\/pre>\n npm install -D tailwindcss<\/code><\/pre>\n npx tailwindcss init<\/code><\/pre>\nmodule.exports = {\n content: [\".\/src\/**\/*.{html,js}\", \".\/public\/*.html\"],\n theme: {\n extend: {},\n },\n plugins: [],\n};<\/code><\/pre>\n@tailwind base;\n@tailwind components;\n@tailwind utilities;<\/code><\/pre>\n npx tailwindcss -i .\/src\/styles.css -o .\/public\/styles.css --watch<\/code><\/pre>\n--watch<\/code> permet \u00e0 Tailwind de surveiller les changements dans votre fichier pour un processus de construction automatique ; l’omettre signifie que nous devons ex\u00e9cuter ce script chaque fois que nous voulons construire notre code et voir la sortie souhait\u00e9e.<\/p>\n\nUtiliser Tailwind CSS<\/h3>\n
Exemple de Flexbox<\/h4>\n
<div class=\"flex flex-row\">\n <button> Button 1 <\/button>\n <button> Button 2 <\/button>\n <button> Button 3 <\/button>\n <\/div><\/code><\/pre>\n![\"Nos](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/01\/flexbox-container-1024x582.png\")
flex-row-reverse<\/code> inversera l’ordre d’apparition des boutons.<\/p>\nflex-col<\/code> les empilera les uns sur les autres. Voici un exemple :<\/p>\n <div class=\"flex flex-col\">\n <button> Button 1 <\/button>\n <button> Button 2 <\/button>\n <button> Button 3 <\/button>\n <\/div><\/code><\/pre>\n![\"Nos](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/01\/flex-col-1024x582.png\")
flex-col-reverse<\/code><\/strong> inverse l’ordre.<\/p>\nExemple de grille<\/h4>\n
<div class=\"grid grid-cols-3\">\n <button> Button 1 <\/button>\n <button> Button 2 <\/button>\n <button> Button 3 <\/button>\n <button> Button 4 <\/button>\n <button> Button 5 <\/button>\n <button> Button 6 <\/button>\n <\/div><\/code><\/pre>\n![\"Nos](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/01\/grid-col-1024x582.png\")
Couleurs<\/h4>\n
![\"Personnalisation](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/01\/tailwind-color-variants-1024x617.png\")
<button class=\"bg-red-50\">Click me<\/button>\n<button class=\"bg-red-100\">Click me<\/button>\n<button class=\"bg-red-200\">Click me<\/button>\n<button class=\"bg-red-300\">Click me<\/button>\n<button class=\"bg-red-400\">Click me<\/button>\n<button class=\"bg-red-500\">Click me<\/button>\n<button class=\"bg-red-600\">Click me<\/button>\n<button class=\"bg-red-700\">Click me<\/button>\n<button class=\"bg-red-800\">Click me<\/button>\n<button class=\"bg-red-900\">Click me<\/button><\/code><\/pre>\nbg-black<\/code> et bg-white<\/code>.<\/p>\ntext-{color}<\/code>:<\/p>\n<p class=\"text-yellow-600\">Hello World<\/p><\/code><\/pre>\nMarge int\u00e9rieure (Padding)<\/h4>\n
\n
p<\/code> indique une marge int\u00e9rieure sur l’ensemble de l’\u00e9l\u00e9ment.<\/li>\npy<\/code> d\u00e9signe une marge int\u00e9rieure en haut et une marge int\u00e9rieure en bas.<\/li>\npx<\/code> indique lune marge int\u00e9rieure \u00e0 gauche et une marge int\u00e9rieure \u00e0 droite.<\/li>\npt<\/code> indique une marge int\u00e9rieure en haut.<\/li>\npr<\/code> indique une marge int\u00e9rieure \u00e0 droite.<\/li>\npb<\/code> d\u00e9signe une marge int\u00e9rieure en bas de page.<\/li>\npl<\/code> d\u00e9signe une marge int\u00e9rieure \u00e0 gauche<\/li>\n<\/ul>\n<button class=\"p-0\">Click me<\/button>\n<button class=\"pt-1\">Click me<\/button>\n<button class=\"pr-2\">Click me<\/button>\n<button class=\"pb-3\">Click me<\/button>\n<button class=\"pl-4\">Click me<\/button><\/code><\/pre>\nMarge<\/h4>\n
p<\/code> par un m<\/code>:<\/p>\n\n
m<\/code><\/li>\nmy<\/code><\/li>\nmx<\/code><\/li>\nmt<\/code><\/li>\nmr<\/code><\/li>\nmb<\/code><\/li>\nml<\/code><\/li>\n<\/ul>\nComment cr\u00e9er une extension CSS Tailwind<\/h2>\n
const plugin = require(\"tailwindcss\/plugin\");\n\nmodule.exports = {\n content: [\".\/src\/**\/*.{html,js}\", \".\/public\/*.html\"],\n theme: {\n extend: {},\n },\n plugins: [\n plugin(function ({ addUtilities }) {\n const myUtilities = {\n \".bg-aqua\": { background: \"aqua\" },\n \".rotate-150deg\": {\n transform: \"rotateX(150deg)\",\n },\n };\n addUtilities(myUtilities);\n }),\n ],\n\n};<\/code><\/pre>\nconst plugin = require(\"tailwindcss\/plugin\");<\/code><\/pre>\n plugins: [\n plugin(function ({ addUtilities }) {\n const newUtilities = {\n \".bg-aqua\": { background: \"aqua\" },\n \".rotate-150deg\": {\n transform: \"rotateX(150deg)\",\n },\n };\n addUtilities(newUtilities);\n }),\n ],<\/code><\/pre>\n<button class=\"bg-aqua rotate-150deg\">Click me<\/button><\/code><\/pre>\nR\u00e9sum\u00e9<\/h2>\n