# @donotlb/vue-cli-plugin-tailwind

> vue-cli plugin for Tailwind CSS

Latest version **1.4.3** (published 2020-08-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @donotlb/vue-cli-plugin-tailwind
pnpm add @donotlb/vue-cli-plugin-tailwind
yarn add @donotlb/vue-cli-plugin-tailwind
bun add @donotlb/vue-cli-plugin-tailwind
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.3 |
| Published | 2020-08-24 |
| First published | 2020-08-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 9.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 207 |
| Author | Jens Eggerstedt |
| Maintainers | donotlb |
| Keywords | vue, cli, plugin, tailwind, purgecss |

## Links

- npm: https://www.npmjs.com/package/@donotlb/vue-cli-plugin-tailwind
- Repository: https://github.com/forsartis/vue-cli-plugin-tailwind
- Homepage: https://github.com/forsartis/vue-cli-plugin-tailwind#readme
- Issues: https://github.com/forsartis/vue-cli-plugin-tailwind/issues
- npm.io page: https://npm.io/package/@donotlb/vue-cli-plugin-tailwind

## Dependencies (2)

- [tailwindcss](https://npm.io/package/tailwindcss.md) ^1.7.3
- [@fullhuman/postcss-purgecss](https://npm.io/package/@fullhuman/postcss-purgecss.md) ^2.3.0

## Alternatives

- [@salesforce/cli](https://npm.io/package/@salesforce/cli.md) — 389.7K weekly downloads
- [@mintlify/cli](https://npm.io/package/@mintlify/cli.md) — 208.9K weekly downloads
- [@grafana/e2e-selectors](https://npm.io/package/@grafana/e2e-selectors.md) — 128.7K weekly downloads
- [mintlify](https://npm.io/package/mintlify.md) — 112.0K weekly downloads
- [@intlayer/cli](https://npm.io/package/@intlayer/cli.md) — 22.8K weekly downloads

## Recent versions

- 1.4.3 (latest) — 2020-08-24
- 1.4.2 — 2020-08-24

## README

# vue-cli-plugin-tailwind

forked from [forsartis/vue-cli-plugin-tailwind](https://github.com/forsartis/vue-cli-plugin-tailwind)

[![Tailwind CSS](https://img.shields.io/npm/dependency-version/vue-cli-plugin-tailwind/tailwindcss.svg)](https://tailwindcss.com/)
[![License](https://img.shields.io/npm/l/vue-cli-plugin-tailwind.svg)](https://github.com/forsartis/vue-cli-plugin-tailwind/blob/master/LICENSE)

A plugin that adds Tailwind CSS and Purgecss to your vue-cli project.

## Getting started
Inside your vue-cli project folder add the plugin via:
```
vue add tailwind
```
Choose what Tailwind config you want to generate:
* **none** - Won't create a config file. Useful if you already have a config or you don't need to change Tailwinds default styles.
* **minimal** *(default)* - Will create a minimal `tailwind.config.js` file where you can define your customizations.
* **full** - Will generate a `tailwind.config.js` file containing the entire default configuration.

See [Tailwinds configuration guide](https://tailwindcss.com/docs/configuration) for more info.

## PostCSS Configuration
Tailwind CSS and Purgecss will be added as plugins in your PostCSS config.
```javascript
// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    'vue-cli-plugin-tailwind/purgecss': {},
    autoprefixer: {},
  },
};
```
### Custom Tailwind config file name
If you use a name other than `tailwind.config.js` for the Tailwind config file, you will need to specify it in your PostCSS configuration.
```javascript
// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: 'custom-name.js',
    //...
  },
};
```
### Configure Purgecss
By default Purgecss will look for css selectors in your `.html` files inside the `./public` directory and `.vue` files inside the `./src` directory.
```javascript
let config = {
  content: ['./public/**/*.html', './src/**/*.vue'],
  defaultExtractor: content =>
    content.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || [],
};
```
You can extend/override the default config in your PostCSS configuration.
```javascript
// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    'vue-cli-plugin-tailwind/purgecss': {
      whitelist: ['foo', 'bar'],
    },
    autoprefixer: {},
  },
};
```
Check [https://www.purgecss.com/configuration#options](https://www.purgecss.com/configuration#options) for a list of available options.

## License
[MIT](https://github.com/forsartis/vue-cli-plugin-tailwind/blob/master/LICENSE)

---
_Source: https://npm.io/package/@donotlb/vue-cli-plugin-tailwind · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._