Curlwind
Generate Tailwind utility stylesheets on demand.
Dynamically generate Tailwind (v3) CSS utility stylesheets.
Usage
Insert Tag
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 Classes
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-*">
Receive Stylesheet
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;
}
/* ... */
Options
Generate Variants
Insert a colon (:) after the class name to generate variants:
<link rel="stylesheet" href="https://cdn.curlwind.com?classes=p-*:sm|md,m-*:hover">
Exclude Preflight
Generate stylesheets without Tailwind's Preflight CSS:
<link rel="stylesheet" href="https://cdn.curlwind.com?preflight=0">
Prefixed Utilities
Generate utility classes with a prefix:
<link rel="stylesheet" href="https://cdn.curlwind.com?prefix=tw">
Unminified CSS
Generate stylesheets unminified:
<link rel="stylesheet" href="https://cdn.curlwind.com?minify=0">
Enable Plugins
Generate stylesheets with built-in Tailwind plugins enabled.
<link rel="stylesheet" href="https://cdn.curlwind.com?plugins=forms,typography,aspect-ratio,container-queries">
