Inspired by the Official Tailwind Playground, this endpoint enables the use of Tailwind without node tooling (npm/node_modules/PostCSS/etc). Just POST an object with your html content and tailwind config and recieve the tailwind-cli generated CSS ready for use in the browser.
Api endpoint to generate Tailwind Css without a nodejs environment
This repository contains an AWS Lambda handler for dynamically processing Tailwind CSS configurations and generating CSS. It's designed to work seamlessly within Netlify's environment, using a standalone binary of the Tailwind CSS CLI.
POST this payload to the endpoint:
const css = `
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.content-auto {
content-visibility: auto;
}
}`
const content = `
<div class='content-auto'>
<h1 class='text-3xl text-clifford'>Hello world!</h1>
</div>`
const body = JSON.stringify({
content,
css,
plugins: ["@tailwindcss/forms", "@tailwindcss/typography"],
theme: {
extend: {
colors: {
clifford: "#da373d",
},
},
},
});
fetch("https://tailwind-compiler-endpoint.netlify.app/api", {
body,
method: "POST",
headers: { "Content-Type": "application/json" }
})- Endpoint:
https://tailwind-compiler-endpoint.netlify.app/api - Method:
POST - Headers:
Content-Type:application/json
- Body:
{ "css": "/* Your CSS here */", "content": "<html>Your HTML here</html>", "theme": {}, "plugins": [], "options": {} }