vue-cli-plugin-tailwind
A plugin that adds Tailwind CSS 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 (make sure to configure PurgeCSS).
- 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 for more info.
PostCSS Configuration
Tailwind CSS will be added as plugins in your PostCSS config.
module.exports = {
plugins: {
tailwindcss: {},
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.
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.
purge: {
content: ['./public/**/*.html', './src/**/*.vue']
},
Check https://tailwindcss.com/docs/optimizing-for-production for more info.
License
MIT