forsartis/ vue-cli-plugin-tailwind
Need help with vue-cli-plugin-tailwind?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
About the developer
147 Stars 
8 Forks 
MIT License 
67 Commits 
2 Opened issues 
Description
vue-cli plugin for Tailwind CSS
Services available
Contributors list
Readme
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 tailwindChoose 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.jsfile where you can define your customizations. * full - Will generate a
tailwind.config.jsfile 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.
javascript
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
Custom Tailwind config file name
If you use a name other than
tailwind.config.jsfor 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
.htmlfiles inside the
./publicdirectory and
.vuefiles inside the
./srcdirectory.
javascript
purge: {
content: ['./public/**/*.html', './src/**/*.vue']
},
Check https://tailwindcss.com/docs/optimizing-for-production for more info.