PHPackages                             frischkraft/craft3-webpack5-tailwind2 - 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. frischkraft/craft3-webpack5-tailwind2

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

frischkraft/craft3-webpack5-tailwind2
=====================================

Craft CMS 3 Boilerplate with TailwindCSS 2 and Webpack 5

1.0.6(5y ago)07MITPHP

Since Dec 6Pushed 5y ago1 watchersCompare

[ Source](https://github.com/andreasbecker/craft3-webpack5-tailwind2)[ Packagist](https://packagist.org/packages/frischkraft/craft3-webpack5-tailwind2)[ RSS](/packages/frischkraft-craft3-webpack5-tailwind2/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependencies (7)Versions (8)Used By (0)

Craft CMS 3 Boilerplate
-----------------------

[](#craft-cms-3-boilerplate)

**(with Webpack 5, Tailwind 2, PostCSS 8, and HMR, and other goodies)**

A real-world boilerplate for Craft CMS 3 projects that leverages Wepback 5, Tailwind 2, PostCSS 8, and Twigpack. Also included is a hot-reload dev environment. I created this as a starting point for Craft CMS 3 / Webpack 5 projects.

This project was originally created by

### What's Included

[](#whats-included)

- [Craft CMS 3](https://github.com/craftcms/cms) - My CMS of choice, and the app which will consume assets from Webpack.
- [Webpack 5](https://webpack.js.org/blog/2020-10-10-webpack-5-release/) - Bundling, optimizing, and serving your assets
- [Twigpack](https://github.com/nystudio107/craft-twigpack) - The bridge between Craft CMS and Webpack
- [TailwindCSS 2](https://tailwindcss.com) - Awesome CSS framework that makes dev speedy
- [SASS](https://sass-lang.com/) - SASS/SCSS Support
- [PostCSS](https://postcss.org/) - Post-processing CSS Files

### Other included tools/plugins

[](#other-included-toolsplugins)

#### Webpack

[](#webpack)

- [`webpack`](https://github.com/webpack/webpack) - Module and asset bundler.
- [`webpack-cli`](https://github.com/webpack/webpack-cli) - Command line interface for webpack
- [`webpack-dev-server`](https://github.com/webpack/webpack-dev-server) - Development server for webpack
- [`webpack-merge`](https://github.com/survivejs/webpack-merge) - Simplify development/production configuration
- [`cross-env`](https://github.com/kentcdodds/cross-env) - Cross platform configuration

#### Transpiling

[](#transpiling)

- [`@babel/core`](https://www.npmjs.com/package/@babel/core) - Transpile ES6+ to backwards compatible JavaScript
- [`@babel/plugin-proposal-class-properties`](https://babeljs.io/docs/en/babel-plugin-proposal-class-properties) - Use properties directly on a class (an example Babel config)
- [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) - Smart defaults for Babel
- [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) - Transpile files with Babel and webpack

#### Loaders, Sass, Plugins

[](#loaders-sass-plugins)

- [`sass-loader`](https://webpack.js.org/loaders/sass-loader/) - Load SCSS and compile to CSS
- [`sass`](https://github.com/sass/dart-sass) - Dart Sass
- [`fibers`](https://www.npmjs.com/package/fibers) - Increase Dart Sass performance (see [note here](https://github.com/sass/dart-sass/blob/master/README.md#javascript-api)
- [`postcss-loader`](https://webpack.js.org/loaders/postcss-loader/) - Process CSS with PostCSS
- [`postcss-preset-env`](https://www.npmjs.com/package/postcss-preset-env) - Sensible defaults for PostCSS
- [`css-loader`](https://webpack.js.org/loaders/css-loader/) - Resolve CSS imports
- [`style-loader`](https://webpack.js.org/loaders/style-loader/) - Inject CSS into the DOM
- [`clean-webpack-plugin`](https://github.com/johnagan/clean-webpack-plugin) - Remove/clean build folders
- [`webpack-manifest-plugin`](https://www.npmjs.com/package/webpack-manifest-plugin) - Create Manifest.json file with chunks
- [`html-webpack-plugin`](https://github.com/jantimon/html-webpack-plugin) - Generate HTML files from template
- [`mini-css-extract-plugin`](https://github.com/webpack-contrib/mini-css-extract-plugin) - Extract CSS into separate files
- [`css-minimizer-webpack-plugin`](https://webpack.js.org/plugins/css-minimizer-webpack-plugin/) - Optimize and minimize CSS assets

### Get Started

[](#get-started)

First, finish up installing Craft CMS locally for your development environment:

```
$ composer install
$ ./craft setup

```

Then install our other packages and run the HMR development server:

```
$ yarn install
$ yarn dev

```

(I use `yarn` for my project, but you don't need to - use the tool of your choice.)

Webpack assets are set up to serve from `localhost:8080` by default.

You can include your chunked/hashed assets in Craft CMS templates by using [Twigpack](https://nystudio107.com/docs/twigpack/)'s features:

```
{{ craft.twigpack.includeCssModule("app.css", true) }}
{{ craft.twigpack.includeJsModule("app.js", true, {"type": "module"}) }}
{{ craft.twigpack.includeJsModule("chunk-vendors.js", true) }}

```

### Scripts

[](#scripts)

As you can see in the `package.json` file, there are 3 included scripts for convenience:

- `yarn dev` - Runs the HMR development server
- `yarn build` - Creates a production-ready build for deployment (asset output is in `web/dist`)
- `yarn clean` - A quick way to clear Craft CMS caches while you code

### Make it Yours

[](#make-it-yours)

This project comes pre-configured out of the box to work with Craft CMS templates, but there are plenty of ways you can customize the way this works to suit your own needs. It tries to make no assumptions about your toolkit, other than the minimum required configuration to work with the tools included.

- Tailwind has been set up with with a default configuration, and I highly suggest modifying it for your project. (You can overwrite it with an existing `tailwind.config.js` file, if you have one, to import all your custom styling quickly.)
- devServer options can be changed and extended as needed - for example, by default auto `open` for the served url is turned off, but if you're using a custom generated template, then you might want it on, instead.
- Go to town!

### Prettier Webpack

[](#prettier-webpack)

If you're like me and you prefer a cleaner webpack report, try this:

`yarn add webpackbar -D`

In the `wpconfig` files, you'll see two commented-out lines which you can uncomment to enable a much nicer view of your webpack report with [webpackbar](https://github.com/nuxt-contrib/webpackbar).

### Inspired By

[](#inspired-by)

And used as a starting point:

### License

[](#license)

This project is open source and available under the [MIT License](https://github.com/taniarascia/webpack-boilerplate/blob/master/LICENSE).

###  Health Score

25

—

LowBetter than 37% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity4

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity58

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 50% 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 ~18 days

Recently: every ~25 days

Total

7

Last Release

1876d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/219f6fafce70ae8486d83a1c695a14a8e0c14a20152039bd4a4a205fd627550c?d=identicon)[FRISCHKRAFT](/maintainers/FRISCHKRAFT)

---

Top Contributors

[![andreasbecker](https://avatars.githubusercontent.com/u/661734?v=4)](https://github.com/andreasbecker "andreasbecker (8 commits)")[![mizziness](https://avatars.githubusercontent.com/u/4164335?v=4)](https://github.com/mizziness "mizziness (8 commits)")

---

Tags

cmsprojectCraftcraftcms

### Embed Badge

![Health badge](/badges/frischkraft-craft3-webpack5-tailwind2/health.svg)

```
[![Health](https://phpackages.com/badges/frischkraft-craft3-webpack5-tailwind2/health.svg)](https://phpackages.com/packages/frischkraft-craft3-webpack5-tailwind2)
```

###  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)[verbb/tablemaker

Create customizable and user-defined table fields.

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

A user-friendly links field for Craft.

24130.9k9](/packages/verbb-hyper)[verbb/social-poster

Automatically post entries to social media.

918.5k](/packages/verbb-social-poster)

PHPackages © 2026

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