Installation de Tailwind CSS (CDN)
Si vous voulez simplement l'essayer, vous pouvez directement inclure le lien CDN :
Utilisez la bibliothèque CDN officielle, l'URL est la suivante :
<script src="https://cdn.tailwindcss.com"></script>
Utilisez la bibliothèque CDN de jsDelivr, l'URL est la suivante :
Utilisez-le de cette façon :
- Avantages :Aucune configuration requise, adapté au développement rapide et à la démonstration.
- Inconvénients : Impossible de personnaliser les styles, et la taille du fichier est relativement importante.
Exemples d'utilisation
L'exemple suivant affiche Hello, world!
Exemple
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold underline">
Bonjour le monde !
</h1>
</body>
</html>
Essayez-le »
Modifiez l'objet tailwind.config pour définir votre propre configuration :
Exemple
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
clifford: '#da373d',
}
}
}
}
</script>
</head>
<body>
<h1 class="text-3xl font-bold underline text-clifford">
Bonjour le monde !
</h1>
</body>
</html>
Essayez-le »
Utilisez type="text/tailwindcss" pour ajouter du CSS personnalisé :
Exemple
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
}
</style>
</head>
<body>
<div class="lg:content-auto">
<!-- ... -->
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
}
</style>
</head>
<body>
<div class="lg:content-auto">
<!-- ... -->
</div>
</body>
</html>
Utilisez le paramètre plugins pour définir les plugins à utiliser, tels que forms et typography :
Exemple
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp,container-queries"></script>
</head>
<body>
<div class="prose">
<!-- ... -->
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp,container-queries"></script>
</head>
<body>
<div class="prose">
<!-- ... -->
</div>
</body>
</html>