{"id":12429,"library":"vue-cli-plugin-tailwind","title":"Vue CLI Plugin for Tailwind CSS","description":"vue-cli-plugin-tailwind is a specialized plugin designed to simplify the integration of Tailwind CSS into projects managed by Vue CLI. Its current stable release is v3.0.0, which mandates compatibility with Vue CLI v5.0 or newer and provides support for Tailwind CSS v3.0. The plugin automates the setup of Tailwind CSS, including necessary PostCSS configurations, and offers an interactive prompt to generate a `tailwind.config.js` file with minimal, full, or no predefined content. This significantly reduces manual setup effort and potential configuration errors, allowing developers to quickly adopt Tailwind's utility-first approach within their Vue.js applications. The project's release cadence generally aligns with major updates to both Vue CLI and Tailwind CSS, ensuring ongoing compatibility and feature support.","status":"active","version":"3.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/forsartis/vue-cli-plugin-tailwind","tags":["javascript","vue","cli","plugin","tailwind","purgecss"],"install":[{"cmd":"npm install vue-cli-plugin-tailwind","lang":"bash","label":"npm"},{"cmd":"yarn add vue-cli-plugin-tailwind","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-cli-plugin-tailwind","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"The plugin requires Vue CLI v5.0 or higher to function correctly, especially for v3.0.0 of the plugin.","package":"@vue/cli","optional":false},{"reason":"Core dependency for styling, managed and installed by the plugin.","package":"tailwindcss","optional":false},{"reason":"Handled by the plugin for CSS processing; versioning can be a common source of issues.","package":"postcss","optional":false},{"reason":"Handled by the plugin for CSS processing; versioning can be a common source of issues.","package":"autoprefixer","optional":false}],"imports":[{"note":"This is a Vue CLI plugin primarily used via the `vue add` command, which handles installation, dependency management, and initial setup. Direct `npm install` is not the recommended way to use plugins.","wrong":"npm install vue-cli-plugin-tailwind","symbol":"tailwind","correct":"vue add tailwind"},{"note":"The `tailwind.config.js` file is generated interactively during `vue add tailwind`, offering 'minimal', 'full', or 'none' options. It defines your Tailwind CSS customizations.","symbol":"tailwind.config.js","correct":"/* (created by vue add tailwind) */"},{"note":"The plugin automatically configures PostCSS to include Tailwind CSS and Autoprefixer, typically found in `postcss.config.js` at the project root.","symbol":"postcss.config.js","correct":"module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, };"}],"quickstart":{"code":"# 1. Ensure Vue CLI v5.0+ is installed globally\n# npm install -g @vue/cli@next\n\n# 2. Create a new Vue CLI project (if you don't have one)\n# vue create my-vue-tailwind-app\n# cd my-vue-tailwind-app\n\n# 3. Add the Tailwind CSS plugin to your project\nvue add tailwind\n\n# During the interactive prompt, you will be asked to choose\n# how your tailwind.config.js file should be generated:\n# - 'minimal' (default): A basic config file.\n# - 'full': The complete default Tailwind CSS configuration.\n# - 'none': If you plan to provide your own config file.\n\n# 4. Verify your postcss.config.js (should be automatically configured):\n// module.exports = {\n//   plugins: {\n//     tailwindcss: {},\n//     autoprefixer: {},\n//   },\n// };\n\n# 5. Start your development server\n# npm run serve\n\n# You can now start using Tailwind CSS classes in your Vue components.","lang":"typescript","description":"Demonstrates how to install `vue-cli-plugin-tailwind` into a new or existing Vue CLI project, including prerequisite `vue-cli` versions and interactive configuration options for `tailwind.config.js`."},"warnings":[{"fix":"Before adding or upgrading the plugin, ensure your global Vue CLI installation is v5.0+ by running `npm install -g @vue/cli@next`.","message":"vue-cli-plugin-tailwind v3.0.0 (and newer) has a hard dependency on Vue CLI v5.0 or higher. Using an older Vue CLI version will prevent the plugin from installing or functioning correctly.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Before running `vue add tailwind@next` for an upgrade, execute `npm uninstall tailwindcss @tailwindcss/postcss7-compat postcss autoprefixer` in your project root to clear legacy packages.","message":"Upgrading to vue-cli-plugin-tailwind v3.0.0 from previous versions (especially v2.x) requires manual uninstallation of specific old dependencies due to changes in Tailwind CSS v3 and PostCSS 8.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Carefully select the configuration option: 'minimal' for a basic setup, 'full' for the entire default config (useful for exploration), or 'none' if you are managing your own Tailwind configuration (e.g., in a monorepo) or already have one.","message":"The `vue add tailwind` command presents an interactive prompt for generating your `tailwind.config.js` file. Choosing 'none' if you expect a config file can lead to confusion.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"First, update Vue CLI globally to v5.0+: `npm install -g @vue/cli@next`. Then, in your project, run `vue add tailwind@next` to install the plugin.","cause":"Your global Vue CLI version is outdated, or the plugin was not correctly installed using `vue add`.","error":"Error: The plugin 'tailwind' is not found."},{"fix":"Follow the explicit upgrade steps for v3: `npm uninstall tailwindcss @tailwindcss/postcss7-compat postcss autoprefixer`, then ensure Vue CLI v5.0+ is installed globally, and finally run `vue add tailwind@next`.","cause":"An older version of Tailwind CSS, or a PostCSS 7 compatibility layer (`@tailwindcss/postcss7-compat`), is still present in the project, incompatible with Tailwind CSS v3 and `vue-cli-plugin-tailwind` v3.","error":"tailwindcss requires PostCSS 8. You can learn more at..."}],"ecosystem":"npm"}