vue-cli plugin for Tailwind CSS
A plugin that adds Tailwind CSS to your vue-cli project.
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.
Tailwind CSS will be added as plugins in your PostCSS config.
javascript // postcss.config.js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, };
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', //... }, };
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.