Tailwind CSS Installation (CDN)
If you just want to try it out, you can directly include the CDN link:
Use the official CDN library, the URL is as follows:
<script src="https://cdn.tailwindcss.com"></script>
Use the CDN library from jsDelivr, the URL is as follows:
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.3.0/dist/tailwind.min.css" rel="stylesheet">
Use it in this way:
- Advantages:No configuration required, suitable for rapid development and demonstration.
- Disadvantages: Cannot customize styles, and the file size is relatively large.
Usage Examples
The following example outputs Hello, world!
Example
<!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">
Hello world!
</h1>
</body>
</html>
Try it »
Edit the tailwind.config object to define your own configuration:
Example
<!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">
Hello world!
</h1>
</body>
</html>
Try it »
Use type="text/tailwindcss" to add custom CSS:
Example
<!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>
Use the plugins parameter to set the plugins to use, such as forms and typography:
Example
<!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>