# Version 0.x guide

This is README of version 0.x.

A VuePress plugin to use tailwindcss (opens new window) and postcss-purgecss (opens new window) 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 (opens new window).

# Usage

Install this plugin :

yarn add @kawarimidoll/vuepress-plugin-tailwind

Add @tailwind import statements to the beginning of .vuepress/styles/index.styl with whitelisting feature (opens new window) :

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

// Add your style definitions...

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 (opens new window).

# 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 (opens new window) 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 (opens new window).

💡 sourceDir, vuepressDir and cwd above are Context API (opens new window) of VuePress.

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

# License

MIT (opens new window)