Registry / devops / vue-cli-plugin-tailwind

vue-cli-plugin-tailwind

library3.0.0jsnpmunverified

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.

devops web-framework

npm install vue-cli-plugin-tailwind

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-CLI-PLUGIN-TAI

vue-cli-plugin-tailwind

devopsjavascriptv3.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

tailwind

✓ vue add tailwind

✗ npm install vue-cli-plugin-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.

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.

Debug

Known issues

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

affects: >=3.0.0

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

affects: >=3.0.0

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

affects: all

Errors

Common errors & fixes

Error: The plugin 'tailwind' is not found.

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

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

Upgrade

Version history

3.0.0latest on npm

Audit

Dependencies

@vue/clirequiredThe plugin requires Vue CLI v5.0 or higher to function correctly, especially for v3.0.0 of the plugin.

tailwindcssrequiredCore dependency for styling, managed and installed by the plugin.

postcssrequiredHandled by the plugin for CSS processing; versioning can be a common source of issues.

autoprefixerrequiredHandled by the plugin for CSS processing; versioning can be a common source of issues.

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/forsartis/vue-cli-plugin-tailwind ↗

packagehttps://www.npmjs.com/package/vue-cli-plugin-tailwind ↗