Skip to content

tim-hub/preact-purge-tailwindcss

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

56 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Preact CLI Tailwind CSS Plugin (JS/Typescript supported)

CodeFactornpm version

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