Tailwind Starter

Announcements
21

My bad; I deleted that release and tagged again …

1 Like
22

This turned me into a newt. Burn, Burn, Burn !!! :wink:

23

A Monty Python fan; I assume from Europe, then.

1 Like
24

Yep. And as a French Git user, fetcher la vache is a minimum required.

25

I thought the French hated British humour.

26

It’s Monty Python. Not “British Humour” :wink:

27

We hate anyone & anything. We are superior.

So you’re lucky to have me on this forum.

PS : We also are arrogant.

4 Likes
28

They (the French) took the “Saarland” from Germany and then when they couldn’t do anything with it gave it back :stuck_out_tongue:

I am afraid this post get’s away from it’s original topic now… oh whey.

29

OK. So last one. I changed my avatar in homage for Bep.
That’s not british.
Neither Dag is.

1 Like
30

When you load it as a module, how do you get hugo to load the package.json-file? hugo mod npm pack does nothing for me, or well, it creates package.json files that does not include the dependencies of the Tailwind starter.

31

Thank you for this, it is very interesting, a possible final breakaway from Twitter’s bootstrap.

I borrowed the tailwind and postcss config files and $styles process for my testing page, installed npm and then tailwindcss postcss postcss-cli autoprefixer (i opted out of typography) and it works nicely locally. It does increase the rebuild and built times significantly but it is not an issue.

The nice, however, stopped once i hugo and uploaded it to VPS (with npm and tailwind installed) CSS does not render. It does render (with limitations) if i add tailwind as a CDN source.

Could it be a configuration issue since the original configuration files are meant for GitHub?

32

True, but when doing template editing (where most of your style work now lives), you don’t feel that pain. And 2-3 second overhead on the production build is something I can live with.

This is not tied to GitHub (or, it may be if you include it as a module, but I guess you don’t).

You don’t give much to guess on here, do you build on VPS or just upload the built result?

33

Uploaded the built result (contents of public).

Once nothing rendered i looked at the CSS file and saw there is very little in it. So i started to guess if it needs the contents of node_modules since it also does not work locally without that and ofc configuration files.

34

OK, so then you don’t need NPM or anything there. I’m now guessing that you have your baseURL set wrong (or not set at all).

35

Hm. Hope i am not making some clumsy error.

base url is set. I speculate if my base URL was wrong none of the internal links would work properly and none of the images would load?

One thing i wonder about is why the css file has so little content in it. Could be that is the problem. I used

{{ $options := dict "inlineImports" true }}
{{ $styles := resources.Get "css/etarena.css" }}
{{ $styles = $styles | resources.PostCSS $options }}
{{ $styles = $styles | minify | fingerprint | resources.PostProcess }}

to generate it.

Just checked the local version of generated css file with the online one, the one in public folder. The css file in public is missing a ton of things - seems that is the problem.

36

I have “solved” the issue. Sort of. By commenting out the purge part in the tailwind.config.js the css file in public now contains well everything it seems. The page now renders correctly. The css file though is 2,3MB in size. That should probably worry me.

I will try to figure this out, somehow.

EDIT:

By modifying the purge part to

purge: {
		enabled: process.env.HUGO_ENVIRONMENT === 'production',
          mode: 'all',
       content: [ './hugo_stats.json' ],

   },

it now works ok (does not purge too much), css is 10kb in size, pages render correctly.

I might just be able to depart from twitter’s bootstrap. Thank you.