tailwind-check.ts

// Name: Tailwind Check
// Author: Josh Davenport-Smith
// Twitter: @joshdprts

import "@johnlindquist/kit";

const b = await npm("beautify");

const input = await arg({
  name: "Enter Tailwind classes",
  hint: "Enter Tailwind classes to check, only supports stock theme values. Values are applied to a .output-check class.",
});

const checkFile = `/tmp/tw-${Date.now()}.css`;

writeFile(
  checkFile,
  `
@tailwind base;
@tailwind components;
@tailwind utilities;

/*OUTPUTCHECKSTART*/
.output-check {
  @apply ${input};
}
/*OUTPUTCHECKEND*/
`
);

const { stdout } = await exec(`npx tailwindcss -i ${checkFile}`);

rm(checkFile);

const outputMatch = stdout
  .replace(/\n/g, "")
  .match(/\/\*OUTPUTCHECKSTART\*\/([^\/]+)\/\*OUTPUTCHECKEND\*\//);

const output = outputMatch[1].trim();

await div(`
  <pre class="px-2 py-2">${b(output, { format: "css" })}</code>
`);