🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

vue-cli-plugin-tailwind

Package Overview
Dependencies
Maintainers
1
Versions
35
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-cli-plugin-tailwind - npm Package Compare versions

Comparing version

0.4.2
to
1.0.0-beta.1

prompts.js

31

generator/index.js

@@ -31,2 +31,11 @@ const fs = require('fs');

function generateConfig(option) {
const args = ['init'];
if (option === 'full') {
args.push('--full');
}
const { spawnSync } = require('child_process');
spawnSync('./node_modules/.bin/tailwind', args);
}
module.exports = (api, options) => {

@@ -37,3 +46,3 @@ const postcss = readPostcssConfig(api.generator);

plugins: {
tailwindcss: './tailwind.config.js',
tailwindcss: {},
'vue-cli-plugin-tailwind/purgecss': {},

@@ -51,6 +60,18 @@ },

api.onCreateComplete(() => {
const { spawnSync } = require('child_process');
spawnSync('./node_modules/.bin/tailwind', ['init', 'tailwind.config.js']);
});
if (options.replaceConfig) {
const filename = 'tailwind.config.js';
delete api.generator.files[filename];
const configPath = path.join(api.generator.context, filename);
try {
fs.unlinkSync(configPath);
} catch (error) {
throw new Error(error);
}
}
if (options.initConfig && options.replaceConfig !== false) {
api.onCreateComplete(() => {
generateConfig(options.initConfig);
});
}
};

7

package.json
{
"name": "vue-cli-plugin-tailwind",
"version": "0.4.2",
"version": "1.0.0-beta.1",
"description": "vue-cli plugin for Tailwind CSS",

@@ -22,7 +22,4 @@ "author": "Jens Eggerstedt <j.eggerstedt@kaibatech.de>",

"@fullhuman/postcss-purgecss": "^1.1.0",
"tailwindcss": "^0.7.4"
},
"peerDependencies": {
"@vue/cli-shared-utils": "^3.0.0"
"tailwindcss": "^1.0.0-beta.3"
}
}

2

purgecss/index.js

@@ -11,3 +11,3 @@ const isHotReloaded = process.argv.includes('serve');

let config = {
content: ['./public/index.html', './src/**/*.vue'],
content: ['./public/**/*.html', './src/**/*.vue'],
extractors: [

@@ -14,0 +14,0 @@ {

66

README.md

@@ -5,5 +5,5 @@ # vue-cli-plugin-tailwind

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:

@@ -13,7 +13,67 @@ ```

```
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.
:warning: Check the plugins order in your PostCSS config (autoprefixer should run after tailwindcss).
See [Tailwinds configuration guide](https://next.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
class TailwindExtractor {
static extract(content) {
return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
}
}
let config = {
content: ['./public/**/*.html', './src/**/*.vue'],
extractors: [
{
extractor: TailwindExtractor,
extensions: ['html', 'vue'],
},
],
};
```
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)