Adds Tailwind CSS to Preact CLI.
Tailwind is added as a PostCSS Plugin. Also adds Purge CSS plugin in production.
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;
},
};
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;
};
PRs Welcome.