# @kawarimidoll/vuepress-plugin-tailwind

A VuePress plugin to use tailwindcss (opens new window) easily.

With this plugin, you can use any classes defined by Tailwind CSS, and the unused classes are automatically purged (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 :

@tailwind base;
@tailwind components;
@tailwind utilities;

// Add your style definitions below...

Load this plugin in .vuepress/config.js :

module.exports = {
  plugins: [
    "@kawarimidoll/tailwind",
  ],
};

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

# Options

If you want to use the options, refer to the Tailwind CSS configuration guide (opens new window).

# tailwindConfig

This is the configuration object or path to the configuration file. Use like this :

// .vuepress/config.js
module.exports = {
  plugins: [
    ["@kawarimidoll/tailwind", { tailwindConfig: "style/config.js" }],
  ],
};

The default value is :

{
  purge: {
    content: [
      `${sourceDir}/**/*.@(js|ts|md|vue|html)`,
      `${vuepressDir}/**/*.@(js|ts|md|vue|html)`,
    ],
  },
}

This default value is adjusted for VuePress from the document (opens new window) to remove unused styles of Tailwind.

The priorities of configuration is:

If there is input tailwindConfig, the value is used.
If there is tailwind.config.js in the same directory as package.json, the file is used.
The default value above is used.

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

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

# Any other key

If you use any other key, the option object is merged to the default value of tailwindConfig.

For example, when you use corePlugins and important like this:

// .vuepress/config.js
module.exports = {
  plugins: [
    [
      "@kawarimidoll/tailwind",
      { corePlugins: { preflight: false }, important: true },
    ],
  ],
};

Then, the configuration object is:

{
  corePlugins: { preflight: false },
  important: true,
  purge: {
    content: [
      `${sourceDir}/**/*.@(js|md|vue|html)`,
      `${vuepressDir}/**/*.@(js|md|vue|html)`,
    ],
  },
};

To build this document, { corePlugins: { preflight: false } } is used to enable default style of VuePress.

💡 If you use tailwindConfig, the other keys are ignored because of the priority.

⚠️ If you use purge key, the default value is overwritten, not merged. It is because this plugin uses Object.assign() (opens new window) to merge objects.

# Versioning policy

Since v1.0.0, the versioning of this plugin will follow that of Tailwind.

For example, when there is a major version upgrade of Tailwind, this plugin also gets a major upgrade.

# License

MIT (opens new window)