[typhoon] Tailwind paddings are not working

[mjk-fi]

Hi!

I read the documentation: https://getgrav.org/premium/typhoon/docs

Padding Classes → The padding classes used to provide space in the Hero section. The default provides a variety of padding and generally increases the padding as the responsive breakpoints increase. These are tailwind padding classes. More information in the [Tailwind Documentation](https://tailwindcss.com/docs/padding)

The padding is working really inconsistent in my installation. Am I thinking this wrong in someway?

Here are samples I have:

This is the normal situation: pt-32 md:pt-40 lg:pt-48 xl:pt-56 pb-16 md:pb-20 lg:pb-24 xl:pb-32

When I try to modify it to smaller, for example I put this: pt-8 md:pt-8 lg:pt-8 xl:pt-8 pb-8 md:pb-8 lg:pb-8 xl:pb-8

pt-20 md:pt-20 lg:pt-20 xl:pt-20 pb-20 md:pb-20 lg:pb-20 xl:pb-20

pt-32 md:pt-32 lg:pt-32 xl:pt-32 pb-32 md:pb-32 lg:pb-32 xl:pb-32

pt-36 md:pt-36 lg:pt-36 xl:pt-36 pb-36 md:pb-36 lg:pb-36 xl:pb-36

[favoraidco]

• 1, can't figure it out. Tried combinations and single inputs to override default values via admin plugin, but got similar results as the topic-starter.

[rhukster]

First question, are you runnig the Tailwind watch command to pick up and compile in your new CSS classes you are adding? https://getgrav.org/premium/typhoon/docs#modify-the-css

Tailwind works by pre-processing the CSS you are using in your site, and only compiling the ones you actually use to ensure small size and performance, instead of comiling every class available and being massive and slow.

[mjk-fi]

I have webhotel in use to where I don't have server, or command line access. I basically have only FTP-access to the website folder.

Is there plugin to Grav or something to compile the new CSS in Admin panel?

[rhukster]

It's not possible to compile on the server because TailwindCSS needs to install a bunch of JS-based node modules to run.

I would strongly recommend not attemping to do any site development on a remote server. It's just a very slow and inneficient way of doing things. You can develop locally on your own machine, then when things are as you want them, you copy the files to the server. This is the way :)

I wrote about this in 2014 but the key points still hold true: https://getgrav.org/blog/development-strategy

Basically even with a rasberry pi you can fully run Grav locally, so basically any kind of computer is suitable.

[favoraidco]

@rhukster Thank you for the prompt reply. I thought padding option would work via admin-plugin, as some other settings do. I know your target web developers rather than people with no coding experience, it's just Grav gives perception that it is easy to work with and customize via admin plugin. I'll stick to the default theme for now and follow future updates.

[rhukster]

With traditional CSS frameworks your assumption would be correct, but TailwindCSS is a more advanced framework, that is intended for the modern web. Its just not possible to know every combination of padding you might needs, so we can't populate the CSS with all those entries. once you start using tailwind though, you will not be able to go back to the old ways of doing things, it's just so much better, and the resulting CSS is much smaller.