Hubspot Tailwind screenshot

Hubspot Tailwind

Author Avatar Theme by Ozguruysal
Updated: 1 Jul 2021
36 Stars

Starter project for building HubSpot themes with Tailwind CSS and Webpack.

Overview

The Hubspot Tailwind CSS Starter project is designed to streamline the process of building HubSpot themes using Tailwind CSS and Webpack. This starter kit provides developers with an efficient way to integrate Tailwind CSS’s utility-first framework with HubSpot’s CMS, making it easier to create responsive and modern web designs. Whether you’re a seasoned developer or just starting out, this starter project can help you quickly set up a robust environment for theme development.

This project emphasizes simplicity and ease of use, allowing for rapid development cycles with built-in tools that automate tedious tasks. With the power of Webpack and Tailwind CSS, you can focus more on creating exceptional user experiences rather than wrestling with configuration and setup.

Features

  • Easy Installation: Quickly set up your development environment using yarn or npm install to install all necessary dependencies.

  • Real-time Development: The start script builds the project with Webpack and automatically uploads it to your default HubSpot portal, enabling live updates as you modify files.

  • Efficient Build Process: The build command clears the /dist folder and compiles your project, ensuring your output is always fresh and relevant.

  • Seamless Deployment: Use the deploy command to clear the /dist contents, build the project, and upload it to your HubSpot portal in one step, simplifying your workflow.

  • Direct Upload Capability: The upload command specifically targets uploading the contents of the /dist folder to your HubSpot portal, giving you control over when and what you publish.

  • Plug-and-play Integration: Incorporates the @hubspot/webpack-cms-plugins/HubSpotAutoUploadPlugin, which enhances the development experience by automating uploads during development.

  • Configurable Settings: Easily manage environment settings and parameters through the hubspot.config.yml file, allowing for flexible project configurations.