PHPackages                             chasegiunta/craft-vue-tailwind - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. chasegiunta/craft-vue-tailwind

ActiveProject[Utility & Helpers](/categories/utility)

chasegiunta/craft-vue-tailwind
==============================

Craft CMS + Vue.js + TailwindCSS Boilerplate

3.1(6y ago)7631627[3 PRs](https://github.com/chasegiunta/craft-vue-tailwind/pulls)UnlicensePHPCI failing

Since Apr 9Pushed 2y ago4 watchersCompare

[ Source](https://github.com/chasegiunta/craft-vue-tailwind)[ Packagist](https://packagist.org/packages/chasegiunta/craft-vue-tailwind)[ Docs](https://craftcms.com/)[ RSS](/packages/chasegiunta-craft-vue-tailwind/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (3)Versions (18)Used By (0)

craft-vue-tailwind
==================

[](#craft-vue-tailwind)

Fork of the [craft-vue](https://github.com/chasegiunta/craft-vue) template that integrates the Tailwind CSS utility framework & removes unused CSS with Purgecss.

What's Included
---------------

[](#whats-included)

- `npm run dev` / `yarn dev`: first-in-class development experience.

    - Webpack + `vue-loader` for single file Vue components
    - State preserving hot-reload
    - Page reloading on file edits (twig, html, etc)
    - State preserving compilation error overlay
    - Lint-on-save with ESLint
    - Source maps
- `npm run build` / `yarn build`: Production ready build.

    - JavaScript minification with [UglifyJS v3](https://github.com/mishoo/UglifyJS2/tree/harmony)
    - Babel compiling
    - CSS across all components extracted into a single file and minified with [cssnano](https://github.com/ben-eb/cssnano)
    - Static assets compiled with version hashes for efficient long-term caching
    - Removes unused CSS with Purgecss. Includes whitelister to keep third-party libraries untouched.
    - Bundle size analytics

Fork It And Make Your Own
-------------------------

[](#fork-it-and-make-your-own)

You should fork this repo to create your own opinionated boilerplate for your setup. This template makes no assumptions about pre-processors, template structure, or linting configurations.

Setup
-----

[](#setup)

This boilerplate requires Vue CLI 3 be [installed globally on your machine](https://cli.vuejs.org/guide/installation.html).

```
# create & install project
composer create-project chasegiunta/craft-vue-tailwind PATH

# run Craft's setup & install
./craft setup

# install the Twigpack plugin
./craft plugin/install twigpack

# install dependencies
npm install # yarn

# (optional) initialize Tailwind's config file (tailwind.config.js)
./node_modules/.bin/tailwind init

# run dev server (default runs on localhost:8080)
npm run dev # yarn dev (alias for 'yarn serve')

# build for production with minification
npm run build # yarn build
```

Once up and running, the fun part comes in using Vue CLI's GUI to customize your project to suite your needs. Simply run `vue ui` and import your newly created project to get started.

You can also run your `dev` & `build` tasks from the GUI to get valuable build stats & runtime analytics.

**NOTE:** During development, *only your assets* will be served from `localhost:8080` and referenced in the base template. You'll still load your site locally under your normal development domain (mysite.test, etc.). This will also cause a brief unstyled flash on page loads due to JS/CSS assets loading from javascript for development. **This flash isn't present after build, on production**.

If webpack's dev server (`yarn dev`) is not running, Twigpack will serve your assets from the build directory.

For a detailed explanation on how things work, check out the [Twigpack docs](https://github.com/nystudio107/craft-twigpack) & [Vue CLI docs](https://cli.vuejs.org/).

Pre-Processors
--------------

[](#pre-processors)

This boilerplate has pre-configured CSS extraction for most popular CSS pre-processors including LESS, SASS, Stylus, and PostCSS. To use a pre-processor, all you need to do is install the appropriate webpack loader for it. For example, to use SASS:

```
npm install sass-loader node-sass --save-dev
# yarn add sass-loader node-sass --dev
```

Note you also need to install node-sass because sass-loader depends on it as a peer dependency.

Read more about this at

Automatic Component Registration
--------------------------------

[](#automatic-component-registration)

Any vue components placed within `src/components` will be registered with Vue automatically. You may nest these in subfolders if you wish.

Babel Compiling
---------------

[](#babel-compiling)

This boilerplate uses babel-preset-env for configuring babel. [You can read more about it here.](https://cli.vuejs.org/config/#babel)

Linting
-------

[](#linting)

You can enable linting by adding the `@vue/cli-plugin-eslint` plugin through the GUI `vue ui`.

###  Health Score

38

—

LowBetter than 84% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity28

Limited adoption so far

Community23

Small or concentrated contributor base

Maturity72

Established project with proven stability

 Bus Factor1

Top contributor holds 55.9% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~55 days

Recently: every ~129 days

Total

13

Last Release

2288d ago

Major Versions

1.1.1 → v2.0.02018-08-04

2.1.1 → v3.0.02019-06-07

### Community

Maintainers

![](https://www.gravatar.com/avatar/fddff4e56b10437114fa7021297e8df81a895cd70c3c15bd96e977223d3f3a14?d=identicon)[chasegiunta](/maintainers/chasegiunta)

---

Top Contributors

[![brandonkelly](https://avatars.githubusercontent.com/u/47792?v=4)](https://github.com/brandonkelly "brandonkelly (146 commits)")[![chasegiunta](https://avatars.githubusercontent.com/u/1377169?v=4)](https://github.com/chasegiunta "chasegiunta (91 commits)")[![angrybrad](https://avatars.githubusercontent.com/u/61869?v=4)](https://github.com/angrybrad "angrybrad (7 commits)")[![carlcs](https://avatars.githubusercontent.com/u/7516543?v=4)](https://github.com/carlcs "carlcs (5 commits)")[![Tam](https://avatars.githubusercontent.com/u/977594?v=4)](https://github.com/Tam "Tam (2 commits)")[![benjamindavid](https://avatars.githubusercontent.com/u/2911900?v=4)](https://github.com/benjamindavid "benjamindavid (2 commits)")[![dependabot-preview[bot]](https://avatars.githubusercontent.com/in/2141?v=4)](https://github.com/dependabot-preview[bot] "dependabot-preview[bot] (2 commits)")[![mildlygeeky](https://avatars.githubusercontent.com/u/273266?v=4)](https://github.com/mildlygeeky "mildlygeeky (2 commits)")[![jasonmccallister](https://avatars.githubusercontent.com/u/5354908?v=4)](https://github.com/jasonmccallister "jasonmccallister (1 commits)")[![cromwellryan](https://avatars.githubusercontent.com/u/129756?v=4)](https://github.com/cromwellryan "cromwellryan (1 commits)")[![slebbo](https://avatars.githubusercontent.com/u/7859330?v=4)](https://github.com/slebbo "slebbo (1 commits)")[![geenious](https://avatars.githubusercontent.com/u/26128416?v=4)](https://github.com/geenious "geenious (1 commits)")

---

Tags

cmstailwindprojectCraftcraftcmsvuetailwindcssVue.jsvue js

### Embed Badge

![Health badge](/badges/chasegiunta-craft-vue-tailwind/health.svg)

```
[![Health](https://phpackages.com/badges/chasegiunta-craft-vue-tailwind/health.svg)](https://phpackages.com/packages/chasegiunta-craft-vue-tailwind)
```

###  Alternatives

[verbb/navigation

Create navigation menus for your site.

90683.7k17](/packages/verbb-navigation)[verbb/formie

The most user-friendly forms plugin for Craft.

101372.9k40](/packages/verbb-formie)[nystudio107/craft-routemap

Returns a list of Craft/Vue/React route rules and element URLs for ServiceWorkers from Craft entries

3151.3k2](/packages/nystudio107-craft-routemap)[verbb/tablemaker

Create customizable and user-defined table fields.

40168.8k1](/packages/verbb-tablemaker)[verbb/vizy

A flexible visual editor field for Craft.

4348.6k](/packages/verbb-vizy)[verbb/hyper

A user-friendly links field for Craft.

24130.9k9](/packages/verbb-hyper)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)