# @kawarimidoll/vuepress-plugin-tailwind

GitHub package.json version npm downloads Dependencies GitHub code size in bytes LICENSE

A VuePress plugin to use tailwindcss and postcss-purgecss easily.

With this plugin, you can use any classes defined by Tailwind CSS, and the unused classes are automatically purged by PurgeCSS (production only).

This plugin is based on the official guide of Tailwind CSS.

# Usage

  1. Install this plugin :
yarn add @kawarimidoll/vuepress-plugin-tailwind
  1. Add @tailwind import statements to the beginning of .vuepress/styles/index.styl with whitelisting feature :
/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */
@tailwind utilities;

// Add your style definitions...
  1. Load this plugin in .vuepress/config.js :
module.exports = {
  plugins: [
    "@kawarimidoll/tailwind"
    // with options
    // ["@kawarimidoll/tailwind", { tailwindConfig: { important: true } }]
  ]
};

⚠️ These configuration files are not created automatically. You have to create them if not exist.

# Options

# tailwindConfig

  • default: undefined

If you want to use this option, refer to the Tailwind CSS configuration guide.

# purgecssConfig

  • default:
{
  content: [
    `${sourceDir}/**/*.@(js|md|vue|html)`,
    `${vuepressDir}/**/*.@(js|md|vue|html)`,
    `${cwd}/node_modules/**/*vuepress*/!(node_modules)/**/*.@(js|md|vue|html)`
  ],
  defaultExtractor: content => content.match(/[\w-\/:]+(?<!:)/g) || []
}

This default value is adjusted for VuePress from the document to include all files in the source directory and all plugins with "vuepress" in the name. If you want to use this option, refer to the PurgeCSS configuration guide.

💡 sourceDir, vuepressDir and cwd above are Context API of VuePress.

⚠️ If you use purgecssConfig, the default value is overwritten, not merged.

# License

MIT

Made with ❤️ by Ahmad Mostafa - @z3by