Can't change responsive widths when using tailwind

General
1

Hello.

Is it possible to change responsive widths when using tailwind?
And how i can add my own classes to tailwind.config.js?
I try to use external build process but it doesn’t work as i expected.

Regards

2

Hi, the external build process is the only way to do it. The most likely reason you can’t get it to work is b/c the PG documentation for setting up TW external build is not 100% complete or correct, making it really hard to set up if you’ve never done it before. If you do some searching online you can fill in the missing gaps in the PG directions for the external processor. One thing to note is you have to use tailwind.css as the file name in your source file and tailwind.config.js as the file name of your JS file. You also must but these two files in your root directory.

Here is how I set mine up:

root/tailwindcss-cli (folder for the cli or your node.js files)
root/tailwind.css (put this at the top of your file @config "./tailwind.config.js";
root/tailwind.config.js

Open your command prompt and change directories to your CLI or Node.js folder then put in:
TW CLI: tailwindcss -i …/tailwind.css -o …/output.css --watch (if you are using TW CLI)
Node JS: npx tailwindcss -i …/tailwind.css -o …/output.css --watch (if you are using Node.js)

3

@Akita If the documentation available on the Pinegrow website is not enough, there are very useful and well documented external resources about using TailwindCSS & Pinegrow through the external build process:

1 Like
4

Hello. Thx for help.

I’v got it working, but when I add some custom values in tailwind.conifg.js, for example: borderRadius, screens - they do not appear in pinegrow editor. I can add it manually by adding rounded-* and it works but cant pick value from element properties tab. Also responsive widths works but can not see them in pinegrow.

Is it normal behavior?

5

Hi, PG does not support custom variables in the UI drop-down if that is what you are referring to. I would assume it does not pickup your new widths in the UI as well but you may be able to update these in the Page → Breakpoints setting.