{"id":54676,"date":"2021-09-24T10:50:38","date_gmt":"2021-09-24T08:50:38","guid":{"rendered":"https:\/\/www.codeur.com\/blog\/?p=54676"},"modified":"2025-09-11T17:15:58","modified_gmt":"2025-09-11T15:15:58","slug":"tailwind-css","status":"publish","type":"post","link":"https:\/\/www.codeur.com\/blog\/tailwind-css\/","title":{"rendered":"25+ th\u00e8mes et composants pour votre site Tailwind CSS"},"content":{"rendered":"

Tailwind CSS est un framework hautement personnalisable qui vous offre tous les \u00e9l\u00e9ments de base dont vous avez besoin pour cr\u00e9er des interfaces utilisateur personnalis\u00e9es, sans les styles dogmatiques par d\u00e9faut tellement banals que vous vous sentez oblig\u00e9s de les remplacer.
\nLa plupart des frameworks CSS (citons en exemple l\u2019illustre Bootstrap<\/a>) sont livr\u00e9s avec des dizaines de composants pr\u00e9d\u00e9finis qui peuvent vous aider \u00e0 avancer rapidement au d\u00e9but, mais qui causent plus de probl\u00e8mes qu’ils n’en r\u00e9solvent d\u00e8s qu’il s’agit de faire ressortir un design personnalis\u00e9 pour votre site.
\nTailwind est diff\u00e9rent\u00a0: il fournit des classes utilitaires de bas niveau qui vous permettent de cr\u00e9er des designs enti\u00e8rement personnalis\u00e9s sans jamais quitter votre code HTML.
\nSi vous en avez assez de vous battre contre le framework pour remplacer des styles ind\u00e9sirables, voici une liste qui contient une collection de th\u00e8mes CSS Tailwind gratuits ou premium, et dont vous pouvez vous servir pour d\u00e9marrer rapidement votre prochain projet de conception\/d\u00e9veloppement.
\nToutes les ressources incluses dans cette liste sont bien s\u00fbr responsives et class\u00e9es selon que vous soyez \u00e0 la recherche d\u2019un mod\u00e8le de landing page, de blog ou portfolio, d\u2019un e-shop et m\u00eame d\u2019un tableau de bord.<\/p>\n

Th\u00e8me Tailwind CSS pour votre boutique en ligne : GraphCMS eCommerce Storefront<\/h2>\n

\"GraphCMS
\nUne boutique de commerce en ligne construite \u00e0 l’aide de GraphCMS, Next.js et Stripe, le template utilise Tailwind CSS pour ses styles. Le r\u00e9f\u00e9rentiel de cette boutique est open-source, ce qui vous permet de cr\u00e9er rapidement un prototype et d’it\u00e9rer sur votre propre vitrine.
\nVous pouvez t\u00e9l\u00e9charger GraphCMS eCommerce Storefront ou voir une d\u00e9mo sur ce site<\/a>.<\/p>\n

<\/h2>\n

Th\u00e8me de blog Tailwind CSS : Blist<\/h2>\n

\"Blist\"
\nBlist est un th\u00e8me Hugo, id\u00e9al pour cr\u00e9er un blog personnel performant et optimis\u00e9 pour le r\u00e9f\u00e9rencement.
\nLe contenu est responsive et le blog contient une fonction de recherche performante, un mode sombre et int\u00e8gre les liens des r\u00e9seaux sociaux de l\u2019auteur dans un \u00e9l\u00e9gant module. La pagination du blog lui assure de belles performances\u00a0!
\nCod\u00e9 en Go avec Tailwind, vous pouvez en savoir plus en suivant ce lien<\/a>.<\/p>\n

Template de portfolio Tailwind CSS : ShowFolio<\/h2>\n

\"ShowFolio\"
\nComme Blist, ShowFolio est un th\u00e8me de portfolio moderne pour votre site Hugo.
\nIl s’agit d’un th\u00e8me aux performances optimis\u00e9es pour la cr\u00e9ation d’un site de portfolio simple mais attrayant, gr\u00e2ce \u00e0 son contenu responsive, la possibilit\u00e9 d\u2019y adosser un syst\u00e8me de blog qui supporte l\u2019ajout d\u2019extraits CodePen\u2026 Et encore une fois, la pr\u00e9sence du mode sombre.
\nRetrouvez ShowFolio<\/a> sur le site de l\u2019auteur.<\/p>\n

Les templates pour cr\u00e9er des landings pages Tailwind CSS<\/h2>\n

Hugo Landing Page<\/h3>\n

\"Hugo
\nUn mod\u00e8le de landing page simple construit avec Hugo, Gulp et Tailwind CSS. Son approche modulaire de la page unique, bas\u00e9e sur un syst\u00e8me de sections, en fait un th\u00e8me tr\u00e8s simple \u00e0 utiliser. Votre landing page sera rapide et n\u2019aura que tr\u00e8s peu de d\u00e9pendances. Hugo Landing Page a \u00e9t\u00e9 test\u00e9 sur un large \u00e9ventail de p\u00e9riph\u00e9riques.<\/p>\n

Le prix : Encore une fois disponible gratuitement chez Jamstack\u00a0<\/a>!<\/p><\/blockquote>\n

Tailwind Toolbox<\/h3>\n

\"Tailwind
\nCe mod\u00e8le de landing page convient \u00e0 tout objectif marketing pour un produit qu\u2019il soit num\u00e9rique ou physique, et peut \u00eatre utilis\u00e9 comme un v\u00e9ritable tunnel de vente pour augmenter votre taux de conversion. Enfin, il est enti\u00e8rement responsive (y compris les formulaires dynamiques), personnalisable et bien document\u00e9.
\nLe GitHub de Tailwind Toolbox<\/a> recense plusieurs sites l\u2019utilisant\u00a0: id\u00e9al pour se faire une id\u00e9e de son potentiel\u00a0!<\/p>\n

Template de site corporate: Open PRO<\/h2>\n

\"Open
\nOpen PRO est un template puissant de site \u00ab\u00a0corporate\u00a0\u00bb, qui est livr\u00e9 avec une mise en page sombre et une interface utilisateur propre. Gr\u00e2ce \u00e0 la pr\u00e9sence de plusieurs pages et composants, il constitue une solution id\u00e9ale pour les start-ups souhaitant pr\u00e9senter leur entreprise.
\nSi vous avez besoin d’un look professionnel et d’options de d\u00e9veloppement illimit\u00e9es, Open Pro<\/a> est un choix \u00e0 consid\u00e9rer.<\/p>\n

Th\u00e8me pour un application de Messagerie Tailwind : Tompson<\/h2>\n

\"Chat
\nTompson est un th\u00e8me de chat en direct dot\u00e9 d\u2019une interface utilisateur personnalisable et d\u2019un tableau de bord. Ce template responsive comprend des pages et des \u00e9l\u00e9ments qui peuvent vous aider \u00e0 construire une application \u00ab\u00a0messenger like\u00a0\u00bb, bas\u00e9e sur Tailwind CSS.<\/p>\n

Le prix : Disponible pour 14$ sur Theme Forest\u00a0<\/a>!<\/p><\/blockquote>\n

Th\u00e8mes de backoffice \/ administration Tailwind CSS<\/h2>\n

Midone<\/h3>\n

\"Midone\"
\nMidone est un kit de d\u00e9marrage pour votre futur tableau de bord d’administration avec bien entendu l\u2019int\u00e9gration de TailwindCSS.
\nLe template est con\u00e7u pour s’adapter \u00e0 diff\u00e9rents types d’\u00e9crans d’appareils et est livr\u00e9 avec quelques pages uniques et divers types de composants qui peuvent vous aider \u00e0 construire rapidement votre tableau de bord. Le temps gagn\u00e9 vous permettra de vous concentrer sur le d\u00e9veloppement du reste de votre projet, sans avoir \u00e0 vous pr\u00e9occuper de la cr\u00e9ation des templates du backoffice.<\/p>\n

Le prix : Le th\u00e8me est premium, disponible chez Theme Forest<\/a> pour 25$.<\/p><\/blockquote>\n

Vue Tailwind Admin<\/h3>\n

\"Vue
\nVue Tailwind Admin est un th\u00e8me d’administration avec une mise en page moderne, inspir\u00e9e des derni\u00e8res tendances en mati\u00e8re de design. Son interface utilisateur \u00e9voque des feuilles de papier dispos\u00e9es en diff\u00e9rentes couches, qui apportent de la profondeur et de l’ordre et ce quelle que soit la complexit\u00e9 de votre tableau d\u2019administration.<\/p>\n

Le prix : 100% open source, retrouvez Vue Tailwind Admin<\/a> sur la page Github du projet.<\/p><\/blockquote>\n

5 sites de composants pratiques pour votre site Tailwind CSS<\/h2>\n

Tailwind est diff\u00e9rent des frameworks classiques : il fournit des classes utilitaires de bas niveau qui vous permettent de cr\u00e9er des designs enti\u00e8rement personnalisables sans jamais quitter votre code HTML. Tailwind vous offre les \u00e9l\u00e9ments de base dont vous avez besoin pour cr\u00e9er des interfaces utilisateur, sans les styles par d\u00e9faut qui s\u2019av\u00e8rent presque toujours inutiles, puisque bien s\u00fbr, vous devez les remplacer.
\nD\u00e9couvrons ensemble quelques sites qui peuvent \u00eatre de pr\u00e9cieuses ressources afin d\u2019enrichir votre site Tailwind de nouveaux composants : apr\u00e8s une courte description du site, retrouvez une s\u00e9lection des composants les plus populaires.<\/p>\n

Tailwind Components<\/h3>\n

Tailwind components<\/a> est un r\u00e9f\u00e9rentiel gratuit pour des composants utilisant TailwindCSS.
\nC\u2019est un outil communautaire dans lequel les utilisateurs partagent leurs composants et mod\u00e8les d’interface utilisateur de Tailwind pour vous permettre de lancer vos nouvelles applications, projets ou landing pages !<\/p>\n

Les composants populaires de Tailwind Components<\/h3>\n

Barre de recherche<\/h4>\n

\"barre
\nUne barre de recherche<\/a> moderne et responsive, d\u00e9clin\u00e9e en plusieurs couleurs, permet d\u2019affiner la recherche en fonction des cat\u00e9gories.<\/p>\n

\u00c9cran de login<\/h4>\n

\"login
\nSi vous \u00eates \u00e0 la recherche d\u2019un template pour permettre \u00e0 vos utilisateurs de cr\u00e9er un compte sur votre site, ce composant<\/a> peut s\u2019av\u00e9rer utile\u00a0!<\/p>\n

Call to action Newsletter<\/h4>\n

\"inscription
\nQue diriez-vous si votre banni\u00e8re de souscription<\/a> \u00e0 votre newsletter \u00e9tait livr\u00e9e responsive et pr\u00eate \u00e0 \u00eatre utilis\u00e9e\u00a0?<\/p>\n

Fen\u00eatres modales<\/h4>\n

\"modale
\nCe composant est une bo\u00eete de dialogue<\/a> moderne et \u00e9l\u00e9gante qui s\u2019adaptera au design de la majorit\u00e9 des sites que vous cr\u00e9erez\u00a0!<\/p>\n

Tailwind UI<\/h3>\n

Tailwind UI<\/a> est une collection de snippets HTML con\u00e7us par les cr\u00e9ateurs de TailwindCSS, enti\u00e8rement responsives, que vous pouvez int\u00e9grer \u00e0 vos projets Tailwind. Commencez par consulter leurs composants gratuits, ou parcourez les pr\u00e9visualisations PNG dans les cat\u00e9gories premium qui vous int\u00e9ressent le plus.
\nChaque composant est int\u00e9gr\u00e9 directement sur la page et vous pouvez m\u00eame voir \u00e0 quoi il ressemble dans diff\u00e9rents points de rupture en faisant glisser le curseur sur la droite.<\/p>\n

Le prix : Gratuit et premium, 129$ par cat\u00e9gorie ou 239$ pour les 3.<\/p><\/blockquote>\n

Les composants populaires de Tailwind UI<\/h3>\n

Tableau avanc\u00e9<\/h4>\n

\"tableau
\nLes tableaux<\/a> sont souvent un enfer \u00e0 cr\u00e9er\u00a0: celui-ci est \u00e9l\u00e9gant, permet l\u2019insertion d\u2019images, du contenu sur plusieurs lignes par cellule, des boutons\u2026<\/p>\n

Page \u00ab\u00a0Mon compte\u00a0\u00bb<\/h4>\n

\"page
\nUn template de page profil<\/a> complet compos\u00e9 de plusieurs cartes distinctes et plusieurs boutons de sauvegarde.<\/p>\n

Aper\u00e7u rapide de produit<\/h4>\n

\"aper\u00e7u
\nPermettez \u00e0 vos clients d\u2019ouvrir une fen\u00eatre modale contenant l\u2019ensemble des informations de vos produits, avec les variations \u00e9ventuelles et le bouton d\u2019ajout au panier gr\u00e2ce \u00e0 ce composant<\/a>.<\/p>\n

Kit Wind<\/h3>\n

Kit Wind propose une s\u00e9lection gratuite de kits d’interface utilisateur polyvalents et enti\u00e8rement responsives, con\u00e7us avec Tailwind CSS, pour les start-ups et les sites de toute sorte.<\/p>\n

Le prix : Si ce premier \u00ab pack \u00bb est gratuit, on devine qu\u2019\u00e0 l\u2019avenir Kit Wind<\/a> disposera d\u2019une offre premium.<\/p><\/blockquote>\n

Les composants populaires de Kit Wind<\/h3>\n

Headers<\/h4>\n

\"header
\nUne s\u00e9lection vari\u00e9es de headers modernes<\/a>, dot\u00e9s (ou non) de Call-to-action, id\u00e9al pour d\u00e9buter une landing page ou simplement votre page d\u2019accueil.<\/p>\n

Blogs<\/h4>\n

\"template
\nAgencez les articles de votre blog<\/a> \u00e0 votre guise gr\u00e2ce \u00e0 ces templates originaux.<\/p>\n

Tableaux de prix<\/h4>\n

\"tableau
\nKit wind propose 4 tableaux de prix<\/a> diff\u00e9rents, du plus basique au plus \u00e9volu\u00e9, avec photos, offre vedette mise en valeur, etc.<\/p>\n

Tail Blocks<\/h3>\n

Tail blocks<\/a> fournit des blocs construits \u00e0 l’aide de Tailwind CSS que vous pouvez r\u00e9utiliser dans vos propres sites. Ce n’est pas une d\u00e9pendance que vous ajoutez \u00e0 votre projet, mais simplement du HTML que vous pouvez copier et coller dans votre propre code.
\nPour se faire, s\u00e9lectionnez un bloc que vous souhaitez utiliser, choisissez une couleur dans la palette pour le bloc que vous avez s\u00e9lectionn\u00e9 et indiquez si vous souhaitez utiliser le mode clair ou fonc\u00e9 \u00e0 l’aide du bouton \u00e0 bascule. Cliquez sur le bouton \u00ab\u00a0Afficher le code\u00a0\u00bb, vous n\u2019avez plus qu\u2019\u00e0 le Copier\/coller dans votre projet.<\/p>\n

Les composants populaires de Tail Blocks<\/h3>\n

\"blocs
\nLa navigation du site ne permet pas de lier les composants individuellement, toutefois vous retrouverez diff\u00e9rents templates de mise en page pour blogs, e-commerces, des tables de prix, des mod\u00e8les de landing pages, des formulaires de contact.<\/p>\n

Hero Icons<\/h3>\n

Hero Icons,<\/a> comme son nom l\u2019indique, ne propose qu\u2019une chose\u00a0: des ic\u00f4nes SVG con\u00e7ues par les cr\u00e9ateurs de Tailwind CSS.
\nPas moins de 230 ic\u00f4nes sont disponibles et conviennent pour 2 usages diff\u00e9rents, couvrant les besoins courants de tout site internet\u00a0:<\/p>\n

Ic\u00f4nes Outline<\/h4>\n

\"ic\u00f4nes
\nPour la navigation principale et les sections de marketing, elles sont con\u00e7ues pour \u00eatre rendues \u00e0 24×24.<\/p>\n

Ic\u00f4nes Solid<\/h4>\n

\"ic\u00f4nes
\nId\u00e9al pour tout type de boutons, pour vos \u00e9l\u00e9ments de formulaire et pour venir s\u2019ins\u00e9rer dans vos textes, elles sont con\u00e7ues pour \u00eatre rendues au format 20×20.<\/p>\n

Conclusion<\/h2>\n

Nulle doute que cette s\u00e9lection vous permettra de cr\u00e9er le site Tailwind CSS dont vous r\u00eavez.
\nSi toutefois vous rencontrez des difficult\u00e9s \u00e0 param\u00e9trer et personnaliser votre site, n’h\u00e9sitez pas \u00e0 faire appel \u00e0 un d\u00e9veloppeur Tailwind CSS freelance de Codeur.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Tailwind CSS est un framework hautement personnalisable qui vous offre tous les \u00e9l\u00e9ments de base dont vous avez besoin pour cr\u00e9er des interfaces utilisateur personnalis\u00e9es, sans les styles dogmatiques par d\u00e9faut tellement banals que vous vous sentez oblig\u00e9s de les remplacer. La plupart des frameworks CSS (citons en exemple l\u2019illustre Bootstrap) sont livr\u00e9s avec des […]<\/p>\n","protected":false},"author":69,"featured_media":54698,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[21],"tags":[79],"class_list":["post-54676","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-ressources"],"acf":[],"yoast_head":"\n25+ th\u00e8mes et composants pour votre site Tailwind CSS<\/title>\n<meta name=\"description\" content=\"Tailwind CSS est un framework hautement personnalisable qui vous offre tous les \u00e9l\u00e9ments de base dont vous avez besoin pour cr\u00e9er des interfaces\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codeur.com\/blog\/tailwind-css\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"25+ th\u00e8mes et composants pour votre site Tailwind CSS\" \/>\n<meta property=\"og:description\" content=\"Tailwind CSS est un framework hautement personnalisable qui vous offre tous les \u00e9l\u00e9ments de base dont vous avez besoin pour cr\u00e9er des interfaces\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codeur.com\/blog\/tailwind-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Codeur.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/fr-fr.facebook.com\/codeurfreelance\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-24T08:50:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-11T15:15:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2021\/08\/image-Tailwind-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"618\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"C\u00e9dric Reymbaut\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codeur\" \/>\n<meta name=\"twitter:site\" content=\"@codeur\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"C\u00e9dric Reymbaut\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codeur.com\/blog\/tailwind-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/tailwind-css\/\"},\"author\":{\"name\":\"C\u00e9dric Reymbaut\",\"@id\":\"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/fd068361dcde9cff7ed7697f613f839c\"},\"headline\":\"25+ th\u00e8mes et composants pour votre site Tailwind CSS\",\"datePublished\":\"2021-09-24T08:50:38+00:00\",\"dateModified\":\"2025-09-11T15:15:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/tailwind-css\/\"},\"wordCount\":1865,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/tailwind-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2021\/08\/image-Tailwind-1.jpg\",\"keywords\":[\"Ressources\"],\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.codeur.com\/blog\/tailwind-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codeur.com\/blog\/tailwind-css\/\",\"url\":\"https:\/\/www.codeur.com\/blog\/tailwind-css\/\",\"name\":\"25+ th\u00e8mes et composants pour votre site Tailwind CSS\",\"isPartOf\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/tailwind-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/tailwind-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2021\/08\/image-Tailwind-1.jpg\",\"datePublished\":\"2021-09-24T08:50:38+00:00\",\"dateModified\":\"2025-09-11T15:15:58+00:00\",\"description\":\"Tailwind CSS est un framework hautement personnalisable qui vous offre tous les \u00e9l\u00e9ments de base dont vous avez besoin pour cr\u00e9er des interfaces\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/tailwind-css\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codeur.com\/blog\/tailwind-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.codeur.com\/blog\/tailwind-css\/#primaryimage\",\"url\":\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2021\/08\/image-Tailwind-1.jpg\",\"contentUrl\":\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2021\/08\/image-Tailwind-1.jpg\",\"width\":1024,\"height\":618,\"caption\":\"9 th\u00e8mes pour votre site Tailwind CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codeur.com\/blog\/tailwind-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/www.codeur.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Graphisme\",\"item\":\"https:\/\/www.codeur.com\/blog\/graphisme\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Webdesign\",\"item\":\"https:\/\/www.codeur.com\/blog\/graphisme\/webdesign\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"25+ th\u00e8mes et composants pour votre site Tailwind CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codeur.com\/blog\/#website\",\"url\":\"https:\/\/www.codeur.com\/blog\/\",\"name\":\"Codeur.com\",\"description\":\"codeur\",\"publisher\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codeur.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codeur.com\/blog\/#organization\",\"name\":\"Codeur.com\",\"url\":\"https:\/\/www.codeur.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.codeur.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2022\/04\/logo-codeur-com.png\",\"contentUrl\":\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2022\/04\/logo-codeur-com.png\",\"width\":2560,\"height\":465,\"caption\":\"Codeur.com\"},\"image\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/fr-fr.facebook.com\/codeurfreelance\/\",\"https:\/\/x.com\/codeur\",\"https:\/\/www.linkedin.com\/company\/codeur\/\",\"https:\/\/www.youtube.com\/channel\/UCgj9ySM9xy3gdL8qBafl9Uw\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/fd068361dcde9cff7ed7697f613f839c\",\"name\":\"C\u00e9dric Reymbaut\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e5c5c5ea80ab9004dec5ca778b3a0296920ea60943b147078d0f7e299e2a8f6f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e5c5c5ea80ab9004dec5ca778b3a0296920ea60943b147078d0f7e299e2a8f6f?s=96&d=mm&r=g\",\"caption\":\"C\u00e9dric Reymbaut\"},\"description\":\"Je suis UX\/UI designer, passionn\u00e9 par les outils comme Figma et Framer. Le week-end, je m\u2019amuse \u00e0 concevoir des SaaS sur Lovable.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/cedricreymbaut74\/\"],\"url\":\"https:\/\/www.codeur.com\/blog\/author\/cedric\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"25+ th\u00e8mes et composants pour votre site Tailwind CSS","description":"Tailwind CSS est un framework hautement personnalisable qui vous offre tous les \u00e9l\u00e9ments de base dont vous avez besoin pour cr\u00e9er des interfaces","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codeur.com\/blog\/tailwind-css\/","og_locale":"fr_FR","og_type":"article","og_title":"25+ th\u00e8mes et composants pour votre site Tailwind CSS","og_description":"Tailwind CSS est un framework hautement personnalisable qui vous offre tous les \u00e9l\u00e9ments de base dont vous avez besoin pour cr\u00e9er des interfaces","og_url":"https:\/\/www.codeur.com\/blog\/tailwind-css\/","og_site_name":"Codeur.com","article_publisher":"https:\/\/fr-fr.facebook.com\/codeurfreelance\/","article_published_time":"2021-09-24T08:50:38+00:00","article_modified_time":"2025-09-11T15:15:58+00:00","og_image":[{"width":1024,"height":618,"url":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2021\/08\/image-Tailwind-1.jpg","type":"image\/jpeg"}],"author":"C\u00e9dric Reymbaut","twitter_card":"summary_large_image","twitter_creator":"@codeur","twitter_site":"@codeur","twitter_misc":{"\u00c9crit par":"C\u00e9dric Reymbaut","Dur\u00e9e de lecture estim\u00e9e":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codeur.com\/blog\/tailwind-css\/#article","isPartOf":{"@id":"https:\/\/www.codeur.com\/blog\/tailwind-css\/"},"author":{"name":"C\u00e9dric Reymbaut","@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/fd068361dcde9cff7ed7697f613f839c"},"headline":"25+ th\u00e8mes et composants pour votre site Tailwind CSS","datePublished":"2021-09-24T08:50:38+00:00","dateModified":"2025-09-11T15:15:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codeur.com\/blog\/tailwind-css\/"},"wordCount":1865,"commentCount":0,"publisher":{"@id":"https:\/\/www.codeur.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.codeur.com\/blog\/tailwind-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2021\/08\/image-Tailwind-1.jpg","keywords":["Ressources"],"articleSection":["Webdesign"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codeur.com\/blog\/tailwind-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codeur.com\/blog\/tailwind-css\/","url":"https:\/\/www.codeur.com\/blog\/tailwind-css\/","name":"25+ th\u00e8mes et composants pour votre site Tailwind CSS","isPartOf":{"@id":"https:\/\/www.codeur.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codeur.com\/blog\/tailwind-css\/#primaryimage"},"image":{"@id":"https:\/\/www.codeur.com\/blog\/tailwind-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2021\/08\/image-Tailwind-1.jpg","datePublished":"2021-09-24T08:50:38+00:00","dateModified":"2025-09-11T15:15:58+00:00","description":"Tailwind CSS est un framework hautement personnalisable qui vous offre tous les \u00e9l\u00e9ments de base dont vous avez besoin pour cr\u00e9er des interfaces","breadcrumb":{"@id":"https:\/\/www.codeur.com\/blog\/tailwind-css\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codeur.com\/blog\/tailwind-css\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.codeur.com\/blog\/tailwind-css\/#primaryimage","url":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2021\/08\/image-Tailwind-1.jpg","contentUrl":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2021\/08\/image-Tailwind-1.jpg","width":1024,"height":618,"caption":"9 th\u00e8mes pour votre site Tailwind CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codeur.com\/blog\/tailwind-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.codeur.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Graphisme","item":"https:\/\/www.codeur.com\/blog\/graphisme\/"},{"@type":"ListItem","position":3,"name":"Webdesign","item":"https:\/\/www.codeur.com\/blog\/graphisme\/webdesign\/"},{"@type":"ListItem","position":4,"name":"25+ th\u00e8mes et composants pour votre site Tailwind CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.codeur.com\/blog\/#website","url":"https:\/\/www.codeur.com\/blog\/","name":"Codeur.com","description":"codeur","publisher":{"@id":"https:\/\/www.codeur.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codeur.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.codeur.com\/blog\/#organization","name":"Codeur.com","url":"https:\/\/www.codeur.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2022\/04\/logo-codeur-com.png","contentUrl":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2022\/04\/logo-codeur-com.png","width":2560,"height":465,"caption":"Codeur.com"},"image":{"@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/fr-fr.facebook.com\/codeurfreelance\/","https:\/\/x.com\/codeur","https:\/\/www.linkedin.com\/company\/codeur\/","https:\/\/www.youtube.com\/channel\/UCgj9ySM9xy3gdL8qBafl9Uw"]},{"@type":"Person","@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/fd068361dcde9cff7ed7697f613f839c","name":"C\u00e9dric Reymbaut","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e5c5c5ea80ab9004dec5ca778b3a0296920ea60943b147078d0f7e299e2a8f6f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5c5c5ea80ab9004dec5ca778b3a0296920ea60943b147078d0f7e299e2a8f6f?s=96&d=mm&r=g","caption":"C\u00e9dric Reymbaut"},"description":"Je suis UX\/UI designer, passionn\u00e9 par les outils comme Figma et Framer. Le week-end, je m\u2019amuse \u00e0 concevoir des SaaS sur Lovable.","sameAs":["https:\/\/www.linkedin.com\/in\/cedricreymbaut74\/"],"url":"https:\/\/www.codeur.com\/blog\/author\/cedric\/"}]}},"_links":{"self":[{"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/posts\/54676","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/users\/69"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/comments?post=54676"}],"version-history":[{"count":0,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/posts\/54676\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/media\/54698"}],"wp:attachment":[{"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/media?parent=54676"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/categories?post=54676"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/tags?post=54676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}