Uni App Vue2 Tailwind Hbuilder Template screenshot

Uni App Vue2 Tailwind Hbuilder Template

Updated: 23 Dec 2025
16 Stars

uni-app-vue2-tailwind-hbuilder-template

Overview

The uni-app-vue2-tailwind-hbuilder-template serves as a foundation for building mini-apps using HBuilderX, Vue2, and Tailwind CSS. However, recent updates to HBuilderX have created compatibility issues with Tailwind CSS v2, leading to potential obstacles for developers. While this template remains functional, it may not leverage the full capabilities of the latest Tailwind CSS v3, prompting users to consider alternatives such as Vue3 with Vite for a more robust experience. Gaining insights into the unique features and setup might help you decide whether this is the right template for your project.

Features

  • Compatibility with Vue2: This template is designed for those sticking with Vue2 while utilizing HBuilderX’s ecosystem, providing a familiar environment for existing users.
  • Built-in PostCSS Support: Currently tied to PostCSS 7, ensuring compatibility with many existing setups, though it limits access to newer features in PostCSS 8.
  • Tailwind CSS Integration: Allows for the use of Tailwind CSS v2, ensuring that styling with utility-first classes is straightforward, while noting the limitations compared to v3.
  • Smart Prompt Tools: Access to intelligent prompts within HBuilderX, aiding developers by streamlining the coding process and reducing syntax errors.
  • Yarn Installation: Easy setup through the Yarn package manager, making project initialization seamless when starting a new mini-app.
  • Custom folder configuration: Users are reminded to update the tailwind.config.js file to include new directories, ensuring that Tailwind generates the necessary classes for each component.
  • Rapid Development Feedback: Active development on associated plugins indicates ongoing improvements, allowing users to submit issues or bugs in real-time for prompt attention.
  • Community Plugins: Access to additional utilities in the ecosystem, like the weapp-tailwindcss-webpack-plugin, which enhances the functionality further, contributing to a more productive development experience.