Dynamically generate Tailwind CSS utility stylesheets.
Add the stylesheet tag to your site's head tag:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.curlwind.com">
</head>
<body>
<!-- ... -->
</body>
</html>Attach the classes query parameter to URL receive a stylesheet with only the classes you need.
Use commas and wildcards to match multiple classes:
<link rel="stylesheet" href="https://cdn.curlwind.com?classes=p-*,m-*">The generated stylesheet will contain only the classes you need:
/* output.css */
.p-0 {
padding: 0px;
}
.p-1 {
padding: 0.25rem;
}
/* ... */
.m-0 {
margin: 0px;
}
.m-1 {
margin: 0.25rem;
}
/* ... */Insert a colon (:) after the class name to generate variants:
<link rel="stylesheet" href="https://cdn.curlwind.com?classes=p-*:sm|md,m-*:hover">Generate stylesheets without Tailwind's Preflight CSS:
<link rel="stylesheet" href="https://cdn.curlwind.com?preflight=0">Generate utility classes with a prefix:
<link rel="stylesheet" href="https://cdn.curlwind.com?prefix=tw">Generate stylesheets unminified:
<link rel="stylesheet" href="https://cdn.curlwind.com?minify=0">Generate stylesheets with built-in Tailwind plugins enabled.
<link rel="stylesheet" href="https://cdn.curlwind.com?plugins=forms,typography,aspect-ratio,container-queries">