/tailwind-compiler-endpoint

Api endpoint to generate Tailwind Css without a nodejs environment

Primary LanguageJavaScript

Demo with REPL

codepen demo

Tailwind Compiler Endpoint

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.

Example

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" }
  })

API Reference

  • 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": {}
}