https://github.com/tim-hub/preact-purge-tailwindcss

Preact CLI Plugin that helps add Tailwind CSS to your project, with typescript support.
https://github.com/tim-hub/preact-purge-tailwindcss

npm preact preact-cli preact-plugin tailwindcss typescript webdevelopment

Last synced: 4 days ago
JSON representation

Preact CLI Plugin that helps add Tailwind CSS to your project, with typescript support.

• Host: GitHub
• URL: https://github.com/tim-hub/preact-purge-tailwindcss
• Owner: tim-hub
• License: mit
• Created: 2020-03-14T04:17:24.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-02-03T05:20:45.000Z (almost 2 years ago)
• Last Synced: 2024-11-23T12:35:03.132Z (2 months ago)
• Topics: npm, preact, preact-cli, preact-plugin, tailwindcss, typescript, webdevelopment
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/preact-purge-tailwindcss
• Size: 631 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 31
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Preact CLI Tailwind CSS Plugin (JS/Typescript supported)

[![CodeFactor](https://www.codefactor.io/repository/github/tim-hub/preact-purge-tailwindcss/badge)](https://www.codefactor.io/repository/github/tim-hub/preact-purge-tailwindcss)[![npm version](https://badge.fury.io/js/preact-purge-tailwindcss.svg)](https://badge.fury.io/js/preact-purge-tailwindcss)

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

```bash

npm i preact-purge-tailwindcss --save-dev

# OR

yarn add preact-purge-tailwindcss --dev

```

In your `preact.config.js`:

```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](https://tailwindcss.com/docs/controlling-file-size#understanding-the-regex) provided to Purge CSS.

```js

import tailwind from "preact-purge-tailwindcss";

module.exports = (config, env, helpers) => {

  config = tailwind(config, env, helpers, {

    regex: /[\w-/:%]+(?