Vue CLI Plugin for Tailwind CSS

3.0.0 · active · verified Sun Apr 19

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.

Common errors

```
Error: The plugin 'tailwind' is not found.
```
cause Your global Vue CLI version is outdated, or the plugin was not correctly installed using `vue add`.

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.
```
tailwindcss requires PostCSS 8. You can learn more at...
```
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.

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`.

Warnings

breaking 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.
Fix: Before adding or upgrading the plugin, ensure your global Vue CLI installation is v5.0+ by running `npm install -g @vue/cli@next`.
breaking 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.
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.
gotcha 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.
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.

Install

npm install vue-cli-plugin-tailwind npm
yarn add vue-cli-plugin-tailwind yarn
pnpm add vue-cli-plugin-tailwind pnpm

Imports

tailwind
wrong:
```
npm install vue-cli-plugin-tailwind
```
correct:
```
vue add tailwind
```
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.
tailwind.config.js
```
/* (created by vue add tailwind) */
```
The `tailwind.config.js` file is generated interactively during `vue add tailwind`, offering 'minimal', 'full', or 'none' options. It defines your Tailwind CSS customizations.
postcss.config.js
```
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, };
```
The plugin automatically configures PostCSS to include Tailwind CSS and Autoprefixer, typically found in `postcss.config.js` at the project root.

Quickstart

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`.

# 1. Ensure Vue CLI v5.0+ is installed globally
# npm install -g @vue/cli@next

# 2. Create a new Vue CLI project (if you don't have one)
# vue create my-vue-tailwind-app
# cd my-vue-tailwind-app

# 3. Add the Tailwind CSS plugin to your project
vue add tailwind

# During the interactive prompt, you will be asked to choose
# how your tailwind.config.js file should be generated:
# - 'minimal' (default): A basic config file.
# - 'full': The complete default Tailwind CSS configuration.
# - 'none': If you plan to provide your own config file.

# 4. Verify your postcss.config.js (should be automatically configured):
// module.exports = {
//   plugins: {
//     tailwindcss: {},
//     autoprefixer: {},
//   },
// };

# 5. Start your development server
# npm run serve

# You can now start using Tailwind CSS classes in your Vue components.

view raw JSON →