matthewharwood/preact-cli-tailwind

Preact CLI Plugin that helps add Tailwind CSS to your project

Preact CLI Tailwind CSS Plugin

Adds Tailwind CSS to Preact CLI.

Tailwind is added as a PostCSS Plugin. Also adds Purge CSS plugin in production.

Usage

npm i preact-cli-tailwind --save-dev
npm i tailwindcss --save

# OR

yarn add preact-cli-tailwind --dev
yarn add tailwindcss

In root run:

npx tailwindcss init

Add these to global stylesheet `src/styles/index.css:

/* purgecss start ignore */
@tailwind base;
/* purgecss end ignore */

/* purgecss start ignore */
@tailwind components;
/* purgecss end ignore */

@tailwind utilities;

In your preact.config.js:

/** ...*/
import tailwind from "preact-cli-tailwind";

export default {
  webpack(config, env, helpers, options) {
    /**
     * ... after the boilerplate
     */
    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.

const tailwind = require("preact-cli-tailwind");

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

Contributing

PRs Welcome.