📅 最后修改于: 2023-12-03 15:35:15.017000 🧑 作者: Mango
Tailwind CSS is a utility-first CSS framework that allows you to style your website without writing custom CSS. It has gained popularity due to its flexibility and ease of use.
A CDN (Content Delivery Network) is a network of servers that distribute content to users based on their geographical location. Using a CDN can improve the loading time of your website as content can be fetched from servers that are closer to the user.
You can use the Tailwind CSS CDN by adding the following link to your HTML file's head section.
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@npm:tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">
This link fetches the latest version of Tailwind CSS from the npm registry.
Here's an example of using Tailwind CSS CDN to style a button.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tailwind CSS CDN Example</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@npm:tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Button
</button>
</body>
</html>
This code snippet creates a blue button with rounded corners and bold text. The bg-blue-500 class sets the background color to a shade of blue, while hover:bg-blue-700 sets a darker shade of blue on hover.
Tailwind CSS has a wide range of classes to style your HTML elements. You can find the complete list of classes in the official documentation.
Using Tailwind CSS CDN can speed up the development process and reduce the amount of custom CSS you need to write. However, it's important to note that using a CDN can also introduce security risks and dependencies that may not be under your control. Therefore, it's recommended to use a build tool like npm or yarn to install Tailwind CSS locally and compile it into your project.