I have just started toying with converting our css to use tailwind. I am using version 3. With version 3 of tailwind, you do not need to purge as it only generates the classes it finds, and nothing more. Installing Tailwind CSS with Vite - Tailwind CSS So, like you, I like to start off creating the modules within Hubspot to at least establish the editor options and fields. I then fetch the module using the cli, and finish it locally.
My suggestion would be to do that and use the watch command from the Hubspot cli, and also have the tailwind compiler running at the same time. This way, as you are working on your module and saving, you are both uploading your module changes, and tailwind is processing any changes, which in turn get uploaded to hubspot.
For example, in my particular project while working locally, I have initialized a package.json file using node/npm on a level just above the theme. That way, when running the HS watch CLI command on my theme folder, it is not uploading any of that npm stuff. Then, from my package.json, I have a script to get tailwindcss up and running. So I just run those two CLI commands (HS watch and npm) from 2 terminal windows.
Here is an example of the pacakge.json
{
“name”: “tailwind-theme-css”,
“version”: “1.0.0”,
“description”: “CSS for Hubspot theme”,
“scripts”: {
“dev:css”: “tailwindcss -i ./src/myTheme/css/tailwind/input.css -o ./src/myTheme/css/tailwind/output.css --watch”,
},
“devDependencies”: {
“@tailwindcss/forms”: “^0.4.0”,
“prettier-plugin-tailwindcss”: “^0.1.4”,
“tailwindcss”: “^3.0.18”
}
}
So, you would want your tailwindcss.config.js file at that root, and depending on your file structure, you will need to adjust the script, but hopefully that get you started?
Again, I am just starting to deal with this myself, but this is my intention in terms of workflow.
As a final note, if you are using VS Code locally, and have installed both the Hubspot VS Code Extensions, and Tailwind CSS Intellisense, you will want to adjust your settings in `.vscode/settings.json` so they play nice together.
{
“files.associations”: {
“*.html”: “html-hubl”,
“*.css”: “css-hubl”
},
“emmet.includeLanguages”: {
“html-hubl”: “html”
},
“tailwindCSS.includeLanguages”: {
“html-hubl”: “html”,
“css-hubl”: “css”
}
}
