preact-cli-tailwind-purgecss

Adds Tailwind and a typical PurgeCSS config to your Preact CLI project.

Unused styles are purged during production builds.

Getting Started

Install the plugin and TailwindCSS:

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

Include the plugin in your project by creating a preact.config.js

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

export default function (config, env, helpers) {
  preactCliTailwindPurgeCSS(config, env, helpers);
}

Create a tailwind.config.js file.

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

Create a folder for styles, and a CSS file in src/styles with the following Tailwind imports. (Or SASS/SCSS, install sass-loader & node-sass for this yarn add -D sass-loader node-sass).

@tailwind base;

@tailwind components;

@tailwind utilities;

Then import that CSS or SASS file into your app's main index.js file, e.g. import "./styles/index.css";

Custom PurgeCSS Configuration

Pass in an object with any required config.

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

export default function (config, env, helpers) {
  preactCliTailwindPurgeCSS(config, env, helpers, {
    content: ["./src/**/*.mdx"],
  });
}

License

MIT