@jinhang/vuepress-plugin-tailwind

@jinhang/vuepress-plugin-tailwind

A VuePress plugin to use tailwindcssopen in 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 CSSopen in new window.

Usage

  1. Install this plugin :
yarn add @jinhang/vuepress-plugin-tailwind
1
  1. Add @tailwind import statements to the beginning of .vuepress/styles/index.scss :
@tailwind base;
@tailwind components;
@tailwind utilities;

// Add your style definitions below...
1
2
3
4
5
  1. Load this plugin in .vuepress/config.js :
module.exports = {
  plugins: ["@jinhang/tailwind"],
};
1
2
3

⚠️ 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 guideopen in new window.

tailwindConfig

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

// .vuepress/config.js
module.exports = {
  plugins: [["@jinhang/tailwind", { tailwindConfig: "style/config.js" }]],
};
1
2
3
4

The default value is :

{
  purge: {
    content: [
      `${sourceDir}/**/*.@(js|ts|md|vue|html)`,
      `${vuepressDir}/**/*.@(js|ts|md|vue|html)`,
    ],
  },
}
1
2
3
4
5
6
7
8

This default value is adjusted for VuePress from the documentopen in new window to remove unused styles of Tailwind.

The priorities of configuration is:

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

💡 sourceDir and vuepressDir above are Context APIopen in 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: [
    [
      "@jinhang/tailwind",
      { corePlugins: { preflight: false }, important: true },
    ],
  ],
};
1
2
3
4
5
6
7
8
9

Then, the configuration object is:

{
  corePlugins: { preflight: false },
  important: true,
  purge: {
    content: [
      `${sourceDir}/**/*.@(js|md|vue|html)`,
      `${vuepressDir}/**/*.@(js|md|vue|html)`,
    ],
  },
};
1
2
3
4
5
6
7
8
9
10

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()open in 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

MITopen in new window