TailwindCSS CMS Theme

Developer Support CMS Development
1

Anyone have any experience with creating a boilerplate theme for tailwind css.
I saw this github repo but its fairly outdated and so are all of the pages: GitHub - ozguruysal/hubspot-tailwind: Starter project for building HubSpot themes with Tailwind CSS and Webpack. · GitHub. Anybody used this recently and had success with it.
Alternativly what would you recommend to start of with when trying to use tailwind for the CMS.
Thanks!

2

Hi, @Anze_Koprivec :waving_hand: Great question! Have you seen this HubSpot Developer blog post — Creating a HubSpot website with Tailwind CSS, from @Sjardo?

Aside from that, adding any code examples, error messages, or other details can help the community give you a more targeted reply.

Best,

Jaycee

3

Hey Jaycee,

i’ve seen the blog post and all of the other community posts but I none of those really anwser my question of biilding a complex from scratch theme with tailwind, not just as an addition.

Maybe a more direct could be if its possible to map the theme field.json setting to be mapped to tailwinds config files or how do you handle utilizing the CMS here fully.

4

Hi! I’m Sjardo, the writer of the tailwind & hubspot blog :slightly_smiling_face:

A rough outline of the tailwind.config i use for most setups. but:

const plugin = require('tailwindcss/plugin')
module.exports = {

content: [
'./modules/**/*.{html, css}',
'./templates/**/*.{html, css}', 
'./templates/**/**/*.{html, css}', // clean this up
],
theme: {
 container: {
 center: true,
 padding: '2rem',
 },
extend: {
 colors: {
 primary: {
 light: 'var(--primary-light)',
 DEFAULT: 'var(--primary)',
 dark: 'var(--primary-dark)'
 },
 secondary: {
 light: 'var(--secondary-dark)',
 DEFAULT: 'var(--secondary)',
 dark: 'var(--secondary-dark)'
 },

 },
},

},
plugins: [
 require('@tailwindcss/forms'), 
 require('@tailwindcss/container-queries'),
],
}

The only thing i do with the theme.json, is set matching css variable to make sure they work together. That’s about it. And the theme is used on plenty of sites, all fully managed for colors and fonts witouth touching any code!
Example of primary colors:

{
 "label": "Global colors",
 "name": "global_colors",
 "type": "group",
 "children": [
 {
 "label": "Primary",
 "name": "primary",
 "type": "color",
 "visibility": {
 "hidden_subfields": {
 "opacity": true
 }
 },
 "default": {
 "color": "#494A52"
 }
 },
 {
 "label": "Primary Dark",
 "name": "primary__dark",
 "type": "color",
 "visibility": {
 "hidden_subfields": {
 "opacity": true
 }
 },

 "default": {
 "color": "#494A52"
 }
 },
 {
 "label": "Primary Light",
 "name": "primary__light",
 "type": "color",
 "visibility": {
 "hidden_subfields": {
 "opacity": true
 }
 },
 "default": {
 "color": "#494A52"
 }
 },

and within theme-overwrides.css, you do set the css variables:

 {% set primary_color = theme.global_colors.primary.color %}
 {% set primary_color_light = theme.global_colors.primary__light.color %}
 {% set primary_color_dark = theme.global_colors.primary__dark.color %}

 :root{
 --primary: {{ primary_color }};
 --primary-light: {{ primary_color_light }};
 --primary-dark: {{ primary_color_dark }};
 }

I hope this guides you in the right direction!

5

Thanks, Sjardo,

this is really helpfull. Do you perhaps have any other good resources, boilerplates, opensource projects combining hubspot’s CMS and tailwind to learn any futher into the structures and build of larger enterprise websites?

6

Hi!
It looks i’m the first one posting about it, but i did saw some tailwind + Hubspot websites in the open.
I’m happy to help out, just send a DM.

7

@Jaycee_Lewis maybe it’s time for a new blog, to go a little deeper? :sweat_smile: Let me know if that might be usefull.

8

Hey Sjardo that would definetly be usefull. Maybe talking about using tailwind in combination with a bundler such as Webpack or Vite to build a modern tech stack theme for HubSpot. There isn’t many developer resources out there talking about that.