preact-purge-tailwindcss

Preact CLI Tailwind CSS Plugin (JS/Typescript supported)

This is for using Typescript, Tailwind Css, Purgecss together with Preact.

• Significantly reduce your size of your bundled CSS (from about 700kb to 1~10kb)
• Preact Typescript template is required
• Remove unused css for all components, (js, ts, tsx, jsx)
• Keep the dependency updated

Usage

npm i preact-purge-tailwindcss --save-dev
 
# OR 
 
yarn add preact-purge-tailwindcss --dev

In your preact.config.js:

import tailwind from "preact-purge-tailwindcss";
 
module.exports = (config, env, helpers) => {
  config = tailwind(config, env, helpers);
  return config;
};

API

Pass in config, env and helpers as forwarded from config.

It also exposes a fourth argument params which allows you to customise the regex provided to Purge CSS.

import tailwind from "preact-purge-tailwindcss";
 
module.exports = (config, env, helpers) => {
  config = tailwind(config, env, helpers, {
    regex: /[\w-/:%]+(?<!:)/g,
  });
  return config;
};

Reference

• folk from
• npm package