vue-cli-plugin-tailwind
Advanced tools
Comparing version
@@ -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); | ||
}); | ||
} | ||
}; |
{ | ||
"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" | ||
} | ||
} |
@@ -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 @@ { |
@@ -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) |
9286
45.55%2
-33.33%9
12.5%110
61.76%78
333.33%2
100%+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
Updated