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

forsartis
147 Stars 8 Forks MIT License 67 Commits 2 Opened issues

Description

vue-cli plugin for Tailwind CSS

Services available

!
?

Need anything else?

Contributors list

# 344,036
TypeScr...
Visual ...
Vue.js
HTML
57 commits
# 600,503
JavaScr...
CSS
tailwin...
vue-cli...
1 commit
# 148,923
HTML
JavaScr...
vuejs
social-...
1 commit

vue-cli-plugin-tailwind

Tailwind CSS License

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.

javascript
// postcss.config.js
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.
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
purge: {
  content: ['./public/**/*.html', './src/**/*.vue']
},
Check https://tailwindcss.com/docs/optimizing-for-production for more info.

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.