Tailwind Resources Logo Tailwind Resources
Craft3 Webpack5 Tailwind2 Boilerplate screenshot

Craft3 Webpack5 Tailwind2 Boilerplate

Author Avatar Theme by Mizziness
Updated: 3 Nov 2021
44 Stars

A real-world boilerplate for Craft CMS 3 projects that leverages Wepback 5, Tailwind 2, PostCSS 8, and has a hot-reload dev environment. Now with dynamic imports, asynchronous chunk loading, and legacy vs modern browser support!

Github

Categories

Scss

Overview

The Craft CMS 3 Boilerplate is an exceptional starting point for developers looking to leverage the power of modern web technologies in their Craft CMS projects. With a robust combination of Webpack 5, Tailwind 2, and PostCSS 8, this boilerplate simplifies the development process while enhancing the performance of your applications. Whether you’re building a simple site or a more complex web application, this boilerplate is designed to help streamline your workflow and improve your efficiency.

One of the standout features of this boilerplate is the inclusion of a hot-reload development environment, which allows for real-time updates as you code. The latest version comes with significant updates to the framework and dependencies, ensuring a high level of performance and flexibility. This makes it not only user-friendly but also suitable for projects of varying sizes and scopes.

Features

  • Craft CMS 3 Integration: A seamless integration with Craft CMS, your go-to content management system, enabling easy asset consumption.
  • Webpack 5 Support: Utilizes Webpack 5 for bundling and optimizing your assets, improving overall build efficiency.
  • TailwindCSS 2: Incorporates TailwindCSS for rapid and responsive design, making styling your project a breeze.
  • SASS and PostCSS Support: Features SASS and PostCSS to facilitate advanced CSS functionalities, allowing for smoother styles management.
  • Hot Module Replacement (HMR): Offers a hot-reload development environment to see changes in real-time, enhancing the development experience.
  • Various Loaders and Plugins: Comes preconfigured with essential loaders and plugins for an optimized build process, including support for SCSS, CSS extraction, and file generation.
  • Cross-platform Compatibility: Easily configurable across different platforms, ensuring a smooth setup regardless of your development environment.
  • Performance Optimizations: Improved bundle performance and additional asset chunking support for a more efficient production build.