Hubspot Tailwind

screenshot of Hubspot Tailwind
tailwind

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.

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.